@charset "utf-8";

.brand-nav {max-width:469px; margin:0 auto 15px; text-align:center;}
.brand-nav ul {display:table; table-layout:fixed; width:100%;}
.brand-nav ul li {display:table-cell; vertical-align:top; border:1px solid #061f3a; border-left:0;}
.brand-nav ul li:first-child {border-left:1px solid #061f3a;}
.brand-nav ul li a {display:block; color:#000; font-size:16px; font-weight:500; line-height:48px; letter-spacing:-.03em;}
.brand-nav ul li.active {background:#061f3a;}
.brand-nav ul li.active a {color:#fff;}

.telecom-nav {max-width:469px; margin:0 auto 35px;}
.telecom-nav ul {display:table; table-layout:fixed; width:100%;}
.telecom-nav ul li {display:table-cell; vertical-align:top; border:1px solid #061f3a; border-left:0;}
.telecom-nav ul li:first-child {border-left:1px solid #061f3a;}
.telecom-nav ul li a {display:block; height:48px; overflow:hidden; text-indent:-999em; background-position:50% 50%; background-repeat:no-repeat;}
.telecom-nav ul li .skt {background-image:url("../images/sub/nav_skt.png");}
.telecom-nav ul li .kt {background-image:url("../images/sub/nav_kt.png");}
.telecom-nav ul li .lgt {background-image:url("../images/sub/nav_lgt.png");}
.telecom-nav ul li .samsung {background-image:url("../images/sub/brand_samsung.png");}
.telecom-nav ul li .apple {background-image:url("../images/sub/brand_apple.png");}
.telecom-nav ul li .lg {background-image:url("../images/sub/brand_lg.png");}
.telecom-nav ul li.active {background:#061f3a}
.telecom-nav ul li.active .skt {background-image:url("../images/sub/nav_skt_on.png");}
.telecom-nav ul li.active .kt {background-image:url("../images/sub/nav_kt_on.png");}
.telecom-nav ul li.active .lgt {background-image:url("../images/sub/nav_lgt_on.png");}
.telecom-nav ul li.active .samsung {background-image:url("../images/sub/brand_samsung_on.png");}
.telecom-nav ul li.active .apple {background-image:url("../images/sub/brand_apple_on.png");}
.telecom-nav ul li.active .lg {background-image:url("../images/sub/brand_lg_on.png");}

.goods-sort {margin-bottom:30px; padding-bottom:10px; border-bottom:1px solid #000; color:#555; font-weight:300; font-size:14px; line-height:1.5em;}
.goods-sort:after {content:""; display:block; clear:both;}
.goods-sort .total {float:left; padding-left:20px; background:url("../images/sub/sort_icon.png") 0 5px no-repeat;}
.goods-sort .sort {float:right;}
.goods-sort .sort ul li {float:left; padding:0 8px 0 9px; position:relative;}
.goods-sort .sort ul li:before {content:""; position:absolute; top:50%; left:0; margin-top:-6px; width:1px; height:12px; background:#d6d6d6;}
.goods-sort .sort ul li:first-child {padding-left:0;}
.goods-sort .sort ul li:first-child::before {display:none;}
.goods-sort .sort ul li:last-child {padding-right:0;}
.goods-sort .sort ul li a:hover {text-decoration:underline;}

.goods-list ul {margin:0 -12px;}
.goods-list ul:after {content:""; display:block; clear:both;}
.goods-list ul li {float:left; width:25%; padding:0 12px; margin-bottom:70px; text-align:center;}
.goods-list ul li:nth-child(4n+1) {clear:left;}
.goods-list ul li a {display:block;}
.goods-list .thumb {max-width:186px; margin:0 auto 10px;}
.goods-list .thumb .img {position:relative; padding-bottom:100%; overflow:hidden;}
.goods-list .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.goods-list .telecom {font-size:12px; font-weight:700; line-height:1.3em; letter-spacing:0;}
.goods-list .telecom.skt {color:#1e3a5f;}
.goods-list .telecom.kt {color:#000;}
.goods-list .telecom.lgt {color:#e2249d;}
.goods-list .tit {color:#000; font-size:22px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; margin-bottom:5px;}
.goods-list .monthly {font-size:14px; color:#888; font-weight:300; line-height:1.3em; margin-bottom:4px;}
.goods-list .price {font-size:18px; color:#888; font-weight:300; line-height:1.3em; margin-bottom:10px;}
.goods-list .price strong {color:#000; font-size:22px;}
.goods-list .txt {font-size:13px; color:#888; font-weight:300; line-height:1.3em; margin-bottom:17px;}

/* 상품 목록 카드 스타일 (간소화 버전) */
.goods-list .product-card {position:relative; border:1px solid #e5e5e5; border-radius:8px; padding:15px; background:#fff; text-align:left; transition:box-shadow 0.2s;}
.goods-list a:hover .product-card {box-shadow:0 4px 12px rgba(0,0,0,0.1);}

/* 배지 */
.goods-list .card-badges {margin-bottom:10px;}
.goods-list .badge {display:inline-block; padding:3px 8px; font-size:11px; font-weight:500; border-radius:3px; margin-right:4px;}
.goods-list .badge-5g {background:#e8f4fd; color:#0066cc; border:1px solid #0066cc;}
.goods-list .badge-sale {background:#fff0e6; color:#ff6b00; border:1px solid #ff6b00;}

/* 썸네일 */
.goods-list .product-card .thumb {max-width:160px; margin:0 auto 15px;}

/* 카드 정보 영역 */
.goods-list .card-info {text-align:left;}
.goods-list .card-info .telecom {font-size:12px; font-weight:600; margin-bottom:4px;}
.goods-list .card-info .tit {font-size:18px; font-weight:600; color:#000; margin-bottom:6px; line-height:1.3em;}
.goods-list .card-info .yogum-basis {font-size:12px; color:#888; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #eee;}

/* 가격 섹션 */
.goods-list .price-section {padding-bottom:10px; border-bottom:1px solid #eee; margin-bottom:10px;}
.goods-list .price-row {display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; font-size:13px; line-height:1.4em;}
.goods-list .price-row:last-child {margin-bottom:0;}
.goods-list .price-row dt {color:#666;}
.goods-list .price-row dd {color:#666;}
.goods-list .price-row.discount dt {color:#6b5ce7;}
.goods-list .price-row.discount dd {color:#6b5ce7;}
.goods-list .price-row.halbu {margin-top:6px; padding-top:6px; border-top:1px dashed #ddd;}
.goods-list .price-row.halbu dt {font-weight:500; color:#666; font-size:13px;}
.goods-list .price-row.halbu dd {font-weight:600; color:#ff3b3b; font-size:13px;}

/* 월 납부 섹션 */
.goods-list .monthly-section {padding-bottom:10px; border-bottom:1px solid #eee; margin-bottom:10px;}

/* 총액 섹션 */
.goods-list .total-section .price-row.total dt {font-size:14px; font-weight:600; color:#000;}
.goods-list .total-section .price-row.total dd {font-size:14px; color:#000;}
.goods-list .total-section .price-row.total dd strong {font-size:20px; font-weight:700; color:#000;}
.goods-list .bt {display:inline-block; padding:0 17px; border:1px solid #bababa; border-radius:8px; color:#000; font-size:14px; font-weight:300; line-height:31px; transition:.2s;}
.goods-list a:hover .bt {background:#000; border-color:#000; color:#fff;}

/* 상세 */
.goods-summary {margin-bottom:45px; margin-top:10px; position:relative;}
.goods-summary:after {content:""; display:block; clear:both;}

.goods-photo {float:left; width:28%;}

/*.goods-photo .photo {position:relative; border:1px solid #ddd; padding:14px;}  25.10.21 update */
.goods-photo .photo {position:relative;  padding:14px;}
.goods-photo .photo .items {display:none;}
.goods-photo .photo .slick-slider {display:block !important;}
.goods-photo .photo .img {position:relative; height:0; padding-bottom:100%;}
.goods-photo .photo .img img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.goods-photo .bnrs .bnr {margin-top:15px;}
.goods-photo .bnrs .bnr:first-child {margin-top:25px;}

/* 타이틀 영역 */
.goods2-tit {margin-top: 10px; margin-bottom: 10px;}

/* 옵션선택 */
.goods-options {float:left; width:40%; padding:0 14px;}

.options-wrap {position:relative; border:1px solid #ddd; border-bottom:0;}

.option-title {background:#fff; padding:8px 20px; border-bottom:1px solid #888; color:#000;}
.option-title p {font-size:16px; line-height:1.3em; margin-bottom:7px; margin-top:4px;}
.option-title p img {margin-right:7px;}
.option-title p .bar {display:inline-block; margin:0 6px; width:1px; height:12px; background:#b5b5b5;}
.option-title h3 {font-size:24px; line-height:1.3em;}

.option-group {display:table; table-layout:fixed; width:100%; padding:15px 13px; border-bottom:1px solid #eee; line-height:1.3em;}
.option-group .opt-tit {display:table-cell; vertical-align:top; width:90px; color:#000; font-size:16px; padding-top:17px; letter-spacing:-.05em;} /*pc버전 타이틀크기*/
.option-group .opt-tit.block {display:block; width:auto; margin-bottom:12px; font-size: 18px; font-weight:700; color:#111; letter-spacing:-.03em;}
.option-group .opt-cnt {display:table-cell; vertical-align:top;}
.option-group .opt-cnt.block {display:block;}
.option-group .select {height:42px; line-height:40px; padding:0 12px; color:#999; border:1px solid #c4c4c4; border-radius:4px; background:#fff url('/images/bbs/select2.png') right 15px center no-repeat; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.option-group .select::-ms-expand {display:none;} 

.option-agency {margin:0 -2px; max-width:264px; text-align:center;}
.option-agency:after {content:""; display:block; clear:both;}
.option-agency .col {float:left; width:25%; padding:0 2px;}

.option-giga {margin:-2px; text-align:center;}
.option-giga:after {content:""; display:block; clear:both;}
.option-giga .col {float:left; padding:2px;}
.option-group .option-giga .col label > p { padding-left: 5px; }

.select-agency {display:block; position:relative; background:#fff;}
.select-agency input {position:absolute; top:0; left:0; z-index:-1; width:0; height:0;}
.select-agency label {display:table; width:100%; height:34px; border:1px solid #c3c3c3; border-radius:4px; color:#555; font-size:16px; line-height:32px; letter-spacing:-.03em; cursor:pointer; overflow:hidden; background-position:50% 50%; background-repeat:no-repeat;}
.select-agency.skt label {background-image:url("../images/shop/telecom_skt_off.png"); text-indent:-999em;}
.select-agency.kt label {background-image:url("../images/shop/telecom_kt_off.png"); text-indent:-999em;}
.select-agency.lgt label {background-image:url("../images/shop/telecom_lgt_off.png"); text-indent:-999em;}
.select-agency input:checked + label {border-color:#1e3a5f; color:#1e3a5f;}
.select-agency.skt input:checked + label {background-image:url("../images/shop/telecom_skt.png");}
.select-agency.kt input:checked + label {background-image:url("../images/shop/telecom_kt.png");}
.select-agency.lgt input:checked + label {background-image:url("../images/shop/telecom_lgt.png");}

/* update 25.10.22
.select-giga {display:block; min-width:80px; position:relative; background:#fff;}
.select-giga input {position:absolute; top:0; left:0; z-index:-1; width:0; height:0;}
.select-giga label {display:table; width:100%; height:34px; padding:0 10px; border:1px solid #c3c3c3; border-radius:4px; cursor:pointer;}
.select-giga .cell {display:table-cell; vertical-align:middle;}
.select-giga .tit {display:block; color:#555; font-size:16px; line-height:1.4em; margin:2px 0;}
.select-giga .txt {display:block; font-family:'Pretendard',sans-serif; color:#999; font-size:11px; line-height:1.4em; letter-spacing:-.03em; margin:2px 0;}
.select-giga input:checked + label {border-color:#d1d5db; background:#f5f7fa;}
.select-giga input:checked + label .tit {color:#1e3a5f;}
*/
.select-giga {display:block; min-width:80px; position:relative; background:#fff;}
.select-giga input {}
.select-giga label {display:flex; align-items:center; width:100%; height:44px; padding:5px 10px; border:1px solid #c3c3c3; border-radius:4px; cursor:pointer;}
.select-giga .cell {display:flex; align-items:center;}
.select-giga .tit { display: block;  color:#b3b3b3;  font-size: 16px;  line-height: 1.7rem;  margin: auto 7px;}
.select-giga .txt {display:block; font-family:'Pretendard',sans-serif; color:#999; font-size:11px; line-height:1.4em; letter-spacing:-.03em; margin:2px 0;}
.select-giga input[type="radio"] {    appearance: none;  border: max(2px, 0.1em) solid gray;  border-radius: 50%;  width: 1.25em; height: 1.25em;  margin: 0 6px 0 4px !important; vertical-align: middle;}
.select-giga input:checked { border: 0.4em solid #1e3a5f;}
.select-giga input:checked + label {border-color:#d1d5db; background:#f5f7fa;}
.select-giga input:checked + label .tit {color:#1e3a5f;}

/* 가입유형 선택 박스 (안내문구 포함) 크기 조정 */
.select-giga label p { margin: 0; padding: 4px 0 0 0; }
/* 가입유형 선택 박스만 크기 조정 (안내문구가 있는 박스) */
.option-group .opt-tit[data-step="2"] + .option-giga .select-giga label,
.option-group .opt-tit.block[data-step="2"] ~ .option-giga .select-giga label { height: auto; min-height: 60px; padding: 10px 12px; }

.select-giga input:checked + span {color:#555;font-weight:600}

.select-color {margin:0 -5px; text-align:center;}
.select-color:after {content:""; display:block; clear:both;}
.select-color .color {float:left; position:relative; width:54px; padding:4px 4px;}
.select-color .color label {display:block; width:35px; height:35px; border-radius:100%; margin:0 auto 6px; border:1px solid #c3c3c3; vertical-align:middle; cursor:pointer;}
.select-color .color input[type="radio"] {position:absolute; top:0; left:0; z-index:-1; width:0; height:0;}
.select-color .color input[type="radio"]:checked + label {position:relative;}
.select-color .color input[type="radio"]:checked + label:after {content:""; position:absolute; top:-5px; right:-5px; bottom:-5px; left:-5px; border:2px solid #1e3a5f; border-radius:100%;}
.select-color .color .txt {display:block; color:#555; font-size:13px; font-weight:400; line-height:1.4em; letter-spacing:-.03em; word-break:break-all;}

.select-jiwon .option {position:relative; margin-bottom:6px;}
.select-jiwon .option label {display:table; width:100%; height:57px; padding:0 8px; font-size:16px; line-height:1.2em; letter-spacing:-.02em; background:#fff; border:1px solid #c3c3c3; border-radius:4px; cursor:pointer;}
.select-jiwon .option input[type="radio"] {position:absolute; top:0; left:0; z-index:-1; width:0; height:0;}
.select-jiwon .option .left {display:table-cell; vertical-align:middle;}
.select-jiwon .option .right {display:table-cell; vertical-align:middle; text-align:right;}
.select-jiwon .option .sm {font-size:13px;}
.select-jiwon .option input[type="radio"]:checked + label {border-color:#2356c5; color:#2356c5;}
.select-jiwon .option:last-child {margin-bottom:0;}

.select-discount {text-align:center; margin:0 -4px 15px;}
.select-discount:after {content:""; display:block; clear:both;}
.select-discount .option {float:left; width:50%; padding:0 4px; position:relative;}
.select-discount .option label {font-size:16px; line-height:1.2em; letter-spacing:-.02em; cursor:pointer;}
.select-discount .option input[type="radio"] {position:absolute; top:0; left:0; z-index:-1; width:0; height:0;}
.select-discount .option .box {padding:8px 2px; border:1px solid #c3c3c3; border-radius:4px; margin-bottom:10px;}
.select-discount .option .sm {font-size:13px;}
.select-discount .option input[type="radio"]:checked + label {color:#1e3a5f;}
.select-discount .option input[type="radio"]:checked + label .box {border-color:#1e3a5f;}
/* 25.07.29 chnaged
.select-discount .option input[type="radio"]:checked + label {color:#2356c5;}
.select-discount .option input[type="radio"]:checked + label .box {border-color:#2356c5;}
*/
.select-add-discount {display:flex; align-items:center; color:#555; font-size:14px; line-height:1.5em;}
.select-add-discount .img {width:53px;}
.select-add-discount .txt {flex:1 1 auto;}
.select-add-discount .price {color:#ff3e3e;}

.select-option {margin:-2px; overflow:hidden;}
.select-option:after {content:""; display:block; clear:both;}
.select-option .option {float:left; padding:2px; position:relative;}
.select-option .option label {display:inline-block; height:34px; padding:0 6px; text-align:center; letter-spacing:-.03em; font-size:16px; line-height:32px; color:#555; background:#fff; border:1px solid #c3c3c3; border-radius:4px; cursor:pointer; overflow:hidden;}
.select-option .option input[type="radio"] {position:absolute; top:0; left:0; z-index:-1; width:0; height:0;}
.select-option .option input[type="radio"]:checked + label {border-color:#d1d5db; background:#f5f7fa; color:#1e3a5f; font-weight:400;}
.select-option .option .hot {display:inline-block; vertical-align:middle; margin:-.5em 1px 0 0; width:26px; height:26px; color:#fff; font-size:10px; line-height:26px; background:#888; border-radius:100%;}
.select-option .option input[type="radio"]:checked + label .hot {background:#bb050f;}

.select-option.gaip .option label {min-width:90px;}
.select-option.usim .option label {min-width:130px;}
.select-option.yakjung .option label {min-width:90px; height:44px !important; padding:8px 6px !important; line-height:28px !important;}

.icon-help {display:inline-block; vertical-align:middle; margin:-.2em 0 0 3px; cursor:pointer; width:17px; height:17px; text-align:center; font-style:normal; color:#000; font-size:12px; font-weight:500; line-height:15px; letter-spacing:0; background-image:linear-gradient(#ffffff, #ededed); border:1px solid #838383; border-radius:100%;}

.select-tip {position:relative; margin-top:12px; padding-left:36px; color:#555; font-size:15px; line-height:1.5em; letter-spacing:-.03em;}
.select-tip:before {content:"TIP"; position:absolute; top:1px; left:0; width:30px; height:15px; text-align:center; color:#fff; font-size:12px; font-weight:300; letter-spacing:0; line-height:15px; background:#666; border-radius:3px;}
.select-tip strong {font-weight:500;}

.select-plan {position:relative; border:1px solid #2356c5; padding:11px; border-radius:5px;}
.select-plan .select-hidden {display:none;}
.select-plan .tit {color:#333; font-size:16px; line-height:1.3em; margin-bottom:4px; margin-right:60px;}
.select-plan .price {color:#888; font-size:13px; font-weight:300; line-height:1.3em; margin-bottom:10px;}
.select-plan .info {color:#888; font-size:13px; font-weight:300; line-height:1.6em;}
.select-plan .info-opt {position:relative; margin-top:12px; padding-left:42px; color:#555; font-size:12px; line-height:1.4em; letter-spacing:-.03em;}
.select-plan .info-opt:before {content:"TIP"; position:absolute; top:-1px; left:0; width:36px; height:18px; text-align:center; color:#fff; font-size:11px; font-weight:300; letter-spacing:0; line-height:18px; background:#f36c1a; border-radius:3px;}
.select-plan .info-opt strong {font-weight:500;}
.select-plan .choice-btn {position:absolute; top:10px; right:10px; display:inline-block; padding:0 8px; text-align:center; color:#1e3a5f; font-size:14px; font-weight:300; line-height:24px; background-image:linear-gradient(#ffffff, #ededed); border:1px solid #838383; border-radius:3px;}

.select-add-option {padding:15px; border-bottom:1px solid #ddd;}
.select-add-option a {position:relative; display:block; background:#414143; color:#ffd739; padding:15px 10px; padding-right:45px; font-size:14px; font-weight:500; letter-spacing:-.03em; line-height:1.4em; border-radius:2px;}
.select-add-option a .toggle {content:""; position:absolute; top:50%; right:10px; margin-top:-9px; width:18px; height:18px;}
.select-add-option a .toggle:before {content:""; position:absolute; top:50%; left:0; right:0; margin-top:-1px; height:2px; background:#fff;}
.select-add-option.active {border-bottom:0;}
.select-add-option.active a .toggle:after {content:""; position:absolute; top:0; bottom:0; left:50%; margin-left:-1px; width:2px; background:#fff;}

#addOptions.active {display:block !important;}

.select-card .select-hidden {display:none;}
.select-card .select-input {position:relative; margin-bottom:10px;}
.select-card .select-input .select {overflow:hidden; white-space:nowrap; word-break:break-all; text-overflow:ellipsis; cursor:pointer;}
.select-card .select-input.del {background-image:none;}
.select-card p {font-size:14px; line-height:1.45em; letter-spacing:-.03em; margin-top:10px;}
.select-card p strong {color:#2356c5; font-weight:500;}
.select-card .card-del {position:absolute; top:50%; right:10px; margin-top:-10px; width:20px; height:20px; background:#555; border:0; border-radius:100%; transition:.2s;}
.select-card .card-del:before,
.select-card .card-del:after {content:""; position:absolute; display:block; top:25%; left:50%; width:2px; height:50%; margin-left:-1px; background:#fff; border-radius:2px;}
.select-card .card-del:before {transform:rotate(45deg)}
.select-card .card-del:after {transform:rotate(-45deg)}
.select-card .card-del:hover {background:#cb1a1a;}

.select-etc .checkbox {margin-right:30px;}
.select-etc .info-txt {display:inline-block; vertical-align:middle; margin-top:-.1em; letter-spacing:-.05em;}
.select-etc .family {position:relative; margin-top:12px; padding-left:100px;}
.select-etc .family label {position:absolute; top:9px; left:0; letter-spacing:-.04em;}
.select-etc .family .select {width:100%;}

.select-welfare {font-size:14px; line-height:1.5em; font-weight:300; letter-spacing:-.03em;}

/*요금 설명*/
.yogeum-guide{
    font-size: 0.8rem;
    background: #898989;
    margin: 6px 0;
    padding: 1px;
    border: 1px solid #cecece;
    border-radius: 5px;
}

.yogeum-guide .cont{height:75px;background:#f9f9f9;overflow: hidden;padding: 3px 10px;}

.cont.open{height:auto;}

.yogeum-guide .b-open{
    height: 35px;
    background: #f9f9f9;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom: 1px solid;
	text-align:center;	
}

.b-open img{	transition: transform .2s;transform-origin: 34% 52%;}

.cont.open + .b-open img{ transform: rotate(180deg);transform-origin:34% 52%;}

/*요금 계산표 25.10.24  */
.yogeum-calc {float:left; width:32%;}
.calc-wrap.fixed {position:fixed; top:10px}
.calc-wrap.fixed-bottom {position:absolute; bottom:0;}
.calc-body {position:relative; padding:12px 14px; border:1px solid #e0e0e0; border-radius: 12px; background:#fff;}
.calc-tit {border-bottom: 1px solid #e0e0e0;}
.calc-tit h3{font-size:1rem; padding: 4px 0 8px; font-weight:600; color:#222;}
.calc-box{padding: 10px 0;}
.calc-box .t-line{border-top:1px solid #e0e0e0;}
.calc-price {margin-bottom:5px;}
.calc-price strong{display: inline-block; vertical-align: top; font-size: 22px; line-height: 23px;color: #1e3a5f; font-weight: 700;}
.calc-price span{ display: inline-block;    vertical-align: top;    font-size: 15px;    line-height: 26px;    color: #222;    font-weight: 500;}
.calc-price .price{float: right; padding-right: 5px;}
.calc-price em {padding-left: 3px;font-style: normal;font-size: 0.85rem; color:#999;}
.calc-info {margin-bottom: 2px; line-height: 1.4;}
.calc-info span:nth-child(1) {color: #555; font-size: 13px;}
.calc-info .price {float: right; padding-right: 5px; font-size: 13px; color:#333;}

.calc-sum .t-line{border-top:1px solid #e0e0e0;}

/* 강조: 할부원금(단말기금액) 라인 전용 스타일 */
.calc-info.highlight {padding:7px 10px; margin:5px 0; background:rgba(54,23,206,0.06); border:1px solid rgba(54,23,206,0.2); border-radius:8px;}
.calc-info.highlight span:nth-child(1) {font-weight:600; font-size:15px; color:#1e3a5f !important;}
.calc-info.highlight .price {font-weight:700; font-size:15px; color:#1e3a5f !important;}
.t-line span:nth-child(1) {padding:0px 10px;}
.calc-sum .calc-price {padding-top: 10px; display: flex; justify-content: space-between; align-items: center;}
.calc-sum .calc-price strong{display: inline-block; vertical-align: top; font-size: 22px; line-height: 23px;color: #1e3a5f; font-weight: 700;}
.calc-sum .calc-price span{ display: inline-block;    vertical-align: top;    font-size: 19px;    line-height: 23px;    color: #222;    font-weight: 700;}
.calc-sum .calc-price .last-price{padding-top: 0px;    text-align: right; margin-left: auto;}
.calc-sum .calc-price .last-price strong{display: inline-block; vertical-align: top; font-size: 26px; line-height: 23px;color: #1e3a5f; font-weight: 700;}
.calc-sum .calc-price .last-price span{ display: inline-block;    vertical-align: top;    font-size: 17px;    line-height: 23px;    color: #222;    font-weight: 700;     padding: 5px 2px 0px 2px;}
.calc-sum .calc-after6m {display:flex; justify-content:space-between; align-items:baseline; padding:6px 0 0; margin-top:6px; border-top:1px dashed #e0e0e0;}
.calc-sum .calc-after6m > span {font-size:12px; color:#777;}
.calc-sum .calc-after6m .last-price strong {font-size:16px; color:#666; font-weight:600;}
.calc-sum .calc-after6m .last-price span {font-size:13px; color:#666; font-weight:600;}
.calc-sum .calc-etc{padding-top: 0px;  text-align: right; color: #999; font-size: 13px;}
.calc-sum .calc-etc span {font-size: 13px;}

/*25.11.06 윺심 css 추가 */
.usim-last-price{text-align:right;}
.usim-last-price strong{display: inline-block; vertical-align: top; font-size: 27px; line-height: 23px;color: #ff0000; font-weight: 700;}

.cline{text-decoration: line-through; color: #999;}

.dot_line {clear: both; border-top: 1px solid #eee;  height: 1px;}

/*제휴및 기타할인 25.11.06*/
.jehu-discount{background: #f8f9fa;    border: 1px solid #e8e8e8;    padding: 7px 10px;    margin: 4px 0;    font-size: 13px; line-height: 1.4em; border-radius:8px;}
.jehu-discount dl {padding:2px 0;display:table; width:100%; line-height:1.4em; padding:0 4px 0 7px;}
.jehu-discount dt {display:table-cell; vertical-align:middle; letter-spacing:-.025em;color:#555;}
.jehu-discount dd {display:table-cell; vertical-align:middle; text-align:right;}
.jehu-discount .text-red {color:#e67e22;}
.jehu-discount .help-txt {font-size:12px; color:#999; line-height:1.5em; font-weight:300; letter-spacing:-.025em; margin-top:2px;}

.discount-line {display:none;clear: both; border-top: 1px solid #eee;  height: 1px;}

.total-discount{margin: 8px 0; font-size: 14px;}
.total-discount dl {padding:2px 0;display:table; width:100%; line-height:1.4em; padding:0 4px 0 7px;}
.total-discount dt {display:table-cell; vertical-align:middle; letter-spacing:-.025em;color:#000;}
.total-discount dd {display:table-cell; vertical-align:middle; text-align:right;}


.jiwon-box { font-size: 0.9rem; margin: 10px 0;  padding: 1px; border: 2px solid #cecece; border-radius: 5px;}
.jiwon-box.active {  border: 2px solid #1e3a5f; }
.jiwon-box p{margin:0 auto;height:37px;font-size:0.9rem;padding:8px 10px;width:95%;border-bottom: 1px solid #d1d1d1;}
.jiwon-box img{filter: opacity(0.5) drop-shadow(0 0 0 #000000);height: 16px; width: 7px; position: relative; top: 4px;}

.jiwon-box input[type="radio"] {    appearance: none;  border: max(2px, 0.1em) solid gray;  border-radius: 50%;  width: 1.25em; height: 1.25em;  margin: 0.7em 2px !important;}
.jiwon-box input:checked { border: 0.4em solid #1e3a5f;}

.jiwon-box ul li{margin: 0 15px 15px;}

.jiwon-box .tit{font-weight:500;}
.jiwon-box .desc{font-size: 0.8rem;margin: -6px 0px -6px 23px;font-weight:500;}
.jiwon-box .desc2{font-size: 0.8rem;margin: 13px 0px -6px 23px;line-height: 18px;font-weight:500;}

/* === 추천 요금제 3개 카드 === */
.yogum-quick-cards {display:flex; flex-direction:column; gap:8px; margin-bottom:12px; padding:0 4px;}
.yogum-quick-card {display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 14px; border:1px solid #e0e0e0; border-radius:8px; cursor:pointer; transition:border-color 0.15s, background 0.15s; position:relative; background:#fff;}
.yogum-quick-card.active {border-color:#d1d5db; background:#f5f7fa;}
.yogum-quick-badge {display:inline-block; background:#fff; color:#555; border:1px solid #ccc; font-size:10px; font-weight:600; padding:1px 6px; border-radius:8px; white-space:nowrap; margin-right:5px; vertical-align:middle;}
.yogum-quick-left {flex:1; min-width:0;}
.yogum-quick-name {font-size:15px; font-weight:600; color:#222; margin-bottom:6px; line-height:1.3;}
.yogum-quick-specs {display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px;}
.yogum-quick-specs .spec-badge {display:inline-flex; align-items:center; gap:4px; background:#fff; color:#555; font-size:11px; padding:3px 8px; border-radius:20px; line-height:1.3; border:1px solid #e0e0e0;}
.yogum-quick-specs .spec-badge i {font-size:10px; color:#888;}
.yogum-quick-detail-btn {display:inline-flex; align-items:center; gap:3px; font-size:12px; color:#999; background:none; border:none; padding:0; cursor:pointer; transition:color 0.15s;}
.yogum-quick-detail-btn:hover {color:#555;}
.yogum-quick-detail-btn .arrow {font-size:8px; transition:transform 0.2s;}
.yogum-quick-detail-btn.open .arrow {transform:rotate(180deg);}
.yogum-quick-memo {font-size:12px; color:#666; line-height:1.6; margin-top:8px; padding-top:8px; border-top:1px solid #eee;}
.yogum-quick-right {text-align:right; flex-shrink:0; padding-top:2px;}
.yogum-quick-price {font-size:13px; color:#555; white-space:nowrap;}
.yogum-quick-price strong {font-size:17px; font-weight:800; color:#222;}
.yogum-quick-support {font-size:12px; color:#1e3a5f; margin-top:4px; white-space:nowrap;}
.yogum-quick-support strong {font-weight:700;}

/* === 요금제 모달 (추천 카드 기반 컴팩트 변형) === */
.yogum-modal-overlay {position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:9999; display:flex; align-items:center; justify-content:center;}
.yogum-modal {background:#fff; border-radius:16px; width:90%; max-width:520px; max-height:85vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.15);}
.yogum-modal-header {display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #eee;}
.yogum-modal-header h3 {font-size:17px; font-weight:700; margin:0;}
.yogum-modal-close {background:none; border:none; font-size:24px; color:#999; cursor:pointer; padding:0; line-height:1;}
.yogum-modal-close:hover {color:#333;}
.yogum-modal-body {overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:6px;}
.yogum-modal-card {display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px 12px; border:1px solid #e0e0e0; border-radius:8px; cursor:pointer; transition:border-color 0.15s, background 0.15s; background:#fff;}
.yogum-modal-card:hover {border-color:#ccc; background:#fafafa;}
.yogum-modal-card.active {border-color:#d1d5db; background:#f5f7fa;}
.yogum-modal-left {flex:1; min-width:0;}
.yogum-modal-name {font-size:14px; font-weight:600; color:#222; line-height:1.3; margin-bottom:4px;}
.yogum-modal-specs {display:flex; flex-wrap:wrap; gap:4px;}
.yogum-modal-specs .spec-badge {display:inline-flex; align-items:center; gap:3px; background:#fff; color:#555; font-size:10px; padding:2px 6px; border-radius:20px; line-height:1.3; border:1px solid #e0e0e0;}
.yogum-modal-specs .spec-badge i {font-size:9px; color:#888;}
.yogum-modal-right {text-align:right; flex-shrink:0; padding-top:1px;}
.yogum-modal-price {font-size:12px; color:#555; white-space:nowrap;}
.yogum-modal-price strong {font-size:15px; font-weight:700; color:#222;}
.yogum-modal-price .price-original {font-size:11px; color:#aaa; text-decoration:line-through; margin-right:4px;}
.yogum-modal-support {font-size:11px; color:#1e3a5f; margin-top:3px; white-space:nowrap;}
.yogum-modal-support strong {font-weight:700;}
.yogum-modal-detail-btn {display:inline-flex; align-items:center; gap:3px; font-size:11px; color:#999; background:none; border:none; padding:0; cursor:pointer; margin-top:4px; transition:color 0.15s;}
.yogum-modal-detail-btn:hover {color:#555;}
.yogum-modal-detail-btn .arrow {font-size:8px; transition:transform 0.2s;}
.yogum-modal-detail-btn.open .arrow {transform:rotate(180deg);}
.yogum-modal-memo {font-size:11px; color:#666; line-height:1.5; margin-top:6px; padding-top:6px; border-top:1px solid #eee;}
/* 모달 탭 */
.yogum-modal-tabs {padding:12px 16px 0;}
.yogum-tab-grid {display:flex; gap:6px; flex-wrap:wrap;}
.yogum-tab-card {background:#f5f5f5; border:1px solid #e0e0e0; border-radius:8px; padding:8px 14px; cursor:pointer; transition:all 0.15s; text-align:center; font-size:13px; font-weight:500; color:#666;}
.yogum-tab-card:hover {background:#eee;}
.yogum-tab-card.active {background:#1e3a5f; color:#fff; border-color:#1e3a5f;}
.yogum-tab-name {display:block; font-weight:600;}
.yogum-tab-age {display:block; font-size:11px; margin-top:2px; opacity:0.7;}
.yogum-tab-price-btn {display:block; width:100%; margin-top:10px; padding:8px; background:none; border:1px dashed #ccc; border-radius:8px; color:#666; font-size:12px; cursor:pointer; transition:all 0.15s;}
.yogum-tab-price-btn:hover {border-color:#1e3a5f; color:#1e3a5f; background:#fafbff;}
/* 가격비교 테이블 */
.yogum-price-compare {padding:0 16px 12px;}
.price-compare-notice {font-size:11px; color:#999; margin:8px 0;}
.price-compare-table {width:100%; border-collapse:collapse; font-size:12px;}
.price-compare-table th {background:#f5f5f5; padding:8px 6px; font-weight:600; border-bottom:1px solid #e0e0e0; text-align:center;}
.price-compare-table td {padding:6px; text-align:center; border-bottom:1px solid #f0f0f0;}

/* === 추가할인 접힘 토글 === */
.extra-dc-toggle {display:flex; align-items:center; justify-content:space-between; padding:14px 14px; margin:0 10px; border:1px dashed #ccc; border-radius:8px; cursor:pointer; transition:background 0.15s;}
.extra-dc-toggle:hover {background:#f9f9f9;}
.extra-dc-label {font-size:14px; font-weight:600; color:#555;}
.extra-dc-arrow {font-size:10px; color:#999; transition:transform 0.25s; margin-left:auto;}
.extra-dc-toggle.open .extra-dc-arrow {transform:rotate(180deg);}
.extra-dc-toggle.open {border-style:solid; border-color:#1e3a5f; background:#fafbff;}
.extra-dc-toggle.open .extra-dc-label {color:#1e3a5f;}
/* 추가할인 접힘 미리보기 (실제 적용 금액 있을 때만) */
.extra-dc-preview {font-size:12px; color:#777; font-weight:500; margin-left:12px;}
.extra-dc-preview strong {color:#1e3a5f; font-weight:700;}
.extra-dc-toggle.open .extra-dc-preview {display:none;}
#extraDcWrap {border:none; margin:0 10px; padding-top:10px;}
#extraDcWrap #addOptions {border:none;}
#extraDcWrap .option-group {border:none; border-bottom:1px solid #eee; padding:10px 0; margin:0;}
#extraDcWrap .option-group:last-child {border-bottom:none;}
#extraDcWrap .opt-tit {font-size:13px;}
#extraDcWrap .opt-cnt {font-size:13px;}

/* === 할인방법 탭 통합 (Step 5+6) === */
.dc-tab-wrap {padding:0 10px 10px;}
.dc-tabs {display:flex; gap:0; margin-bottom:12px; border-radius:8px; overflow:hidden; border:1px solid #ddd;}
.dc-tab {flex:1; padding:12px 0; font-size:15px; font-weight:600; border:none; background:#f5f5f5; color:#888; cursor:pointer; transition:all 0.2s; text-align:center;}
.dc-tab.active {background:#1e3a5f; color:#fff;}
.dc-panel {animation:dcFadeIn 0.2s ease;}
@keyframes dcFadeIn {from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)}}
.dc-panel-desc {font-size:13px; color:#666; margin:0 0 10px; padding:0 4px;}
.dc-option-list {display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.dc-option {display:flex; align-items:flex-start; gap:8px; padding:12px; border:1px solid #e0e0e0; border-radius:8px; cursor:pointer; transition:border-color 0.15s;}
.dc-option:has(input:checked) {border-color:#d1d5db; background:#f5f7fa;}
.dc-option input[type="radio"] {appearance:none; width:18px; height:18px; border:2px solid #ccc; border-radius:50%; margin:2px 0 0; flex-shrink:0; transition:border 0.15s;}
.dc-option input:checked {border:5px solid #1e3a5f;}
.dc-option-inner {display:flex; flex-direction:column; gap:2px; min-width:0;}
.dc-option-tit {font-size:14px; font-weight:600; color:#222;}
.dc-option-amt {font-size:13px; color:#555;}
.dc-option-amt strong {color:#1e3a5f; font-weight:700; font-size:14px;}
.dc-option-note {font-size:11px; color:#999; line-height:1.4; margin-top:2px;}
.dc-danmal-summary {padding:14px 12px; background:#f5f7fa; border:1px solid #d1d5db; border-radius:8px; margin-bottom:14px; font-size:14px; color:#333;}
.dc-danmal-total {display:flex; justify-content:space-between; align-items:center;}
.dc-danmal-total strong {font-size:16px; color:#1e3a5f; font-weight:700;}
.dc-danmal-detail {display:flex; flex-direction:column; gap:2px; margin-top:8px; padding-top:8px; border-top:1px solid #d5ddf5;}
.dc-danmal-detail span {font-size:12px; color:#666;}
.dc-danmal-detail strong {font-weight:600; color:#333;}
.dc-danmal-allbami strong {color:#e67e22;}
.dc-yogum-allbami {padding:14px 12px; background:#f5f7fa; border:1px solid #d1d5db; border-radius:8px; margin-top:10px; font-size:14px; color:#333;}
.dc-yogum-benefit-title {font-size:13px; font-weight:600; color:#555; margin-bottom:8px;}
.dc-yogum-benefit-detail {display:flex; flex-direction:column; gap:3px; padding-top:8px; border-top:1px solid #d5ddf5;}
.dc-yogum-benefit-detail span {font-size:12px; color:#666;}
.dc-yogum-benefit-detail strong {font-weight:600; color:#1e3a5f;}
.dc-yogum-allbami-row strong {color:#e67e22 !important;}
.dc-yogum-allbami-row small {color:#777; font-size:11px;}

/* 폰판기 단독 뱃지 — 2026-04-21 pop-in + 찌지직 전기 glitch (절제 톤) */
.badge-online-only {display:inline-block; margin:0 2px; padding:1px 6px; border-radius:3px; background:#fff3e0; color:#e67e22; border:1px solid #f0d8b8; font-size:10px; font-weight:600; line-height:1.5; vertical-align:middle; position:relative; animation:badgePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both, badgeGlitch 3s 0.5s infinite;}
@keyframes badgePopIn {
	0% {transform:scale(0.7); opacity:0;}
	60% {transform:scale(1.1); opacity:1;}
	100% {transform:scale(1); opacity:1;}
}
/* Glitch (v3 2026-04-21 주기 2배): 3s 주기 중 0~10%(0.3s) 찌지직 — 글자 선명 + 떨림 + 주황 glow 스파크 */
@keyframes badgeGlitch {
	0%, 10%, 100% {transform:scale(1) translate(0, 0); text-shadow:none;}
	2% {transform:scale(1) translate(-1.5px, 0.5px); text-shadow:0 0 5px rgba(230,126,34,0.8), 0 0 10px rgba(255,200,0,0.4);}
	4% {transform:scale(1) translate(1.5px, -0.5px); text-shadow:0 0 6px rgba(255,180,0,0.9), 0 0 12px rgba(255,150,0,0.5);}
	6% {transform:scale(1) translate(-1px, 1px); text-shadow:0 0 4px rgba(230,126,34,0.7);}
	8% {transform:scale(1) translate(0.5px, -0.3px); text-shadow:0 0 5px rgba(230,126,34,0.8);}
}

/* 유효성 실패 Step 강조 (2초 자동 해제) */
.step-error-highlight {box-shadow:0 0 0 2px #dc3545; border-radius:6px; transition:box-shadow 0.2s ease-out;}

/* 가격 변경 플래시 — 배경만 0.4초 */
@keyframes priceFlash {0%{background-color:transparent;} 40%{background-color:#fff3d6;} 100%{background-color:transparent;}}
.price-flash {animation:priceFlash 0.4s ease-out; border-radius:4px;}

/* 계산기 상단 총 할인 혜택 요약 (기존 폰판기 톤 재사용) */
.calc-save-summary {display:flex; align-items:center; justify-content:flex-start; padding:7px 12px; margin:4px 0 2px; background:#fff8ef; border:1px solid #f0e0cc; border-radius:8px;}
.calc-save-summary .save-label {font-size:13px; color:#555;}
/* 2026-04-20 우측정렬 통일: 금액+단위를 우측으로 밀착 */
.calc-save-summary .save-amount {font-size:16px; color:#e67e22; font-weight:700; margin-left:auto;}
.calc-save-summary .save-unit {font-size:13px; color:#e67e22; margin-left:2px;}

/* 2026-04-20 요금표 숫자 자릿수 폭 균일화 (tabular-nums) */
.calc-box, .calc-sum, .calc-save-summary, .jehu-discount, .total-discount,
.calc-box .price, .calc-sum .last-price, .calc-save-summary .save-amount,
.jehu-discount dd, .total-discount dd {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}
.dc-halbu {padding:10px 0 0; border-top:1px solid #eee;}
.dc-halbu-label {display:block; font-size:13px; font-weight:600; color:#555; margin-bottom:8px;}
.dc-halbu-options {display:flex; gap:6px;}
.dc-halbu-options .option {flex:1;}
.dc-halbu-options .option label {display:block; text-align:center; padding:8px 4px; border:1px solid #ddd; border-radius:6px; font-size:13px; color:#555; cursor:pointer; transition:all 0.15s;}
.dc-halbu-options .option input {display:none;}
.dc-halbu-options .option input:checked + label {border-color:#d1d5db; color:#1e3a5f; font-weight:600; background:#f5f7fa;}

/* 요금 자동계산기  삭제 또는 변경예정 25.10.24 */
.goods-count {float:left; width:32%;}

.count-wrap {transition:.2s;}
.count-wrap dl {display:table; width:100%; line-height:1.457em; padding:0 4px 0 7px;}
.count-wrap dt {display:table-cell; vertical-align:middle; letter-spacing:-.025em;}
.count-wrap dd {display:table-cell; vertical-align:middle; text-align:right;}

.count-wrap.fixed {position:fixed; top:10px}
.count-wrap.fixed-bottom {position:absolute; bottom:0;}

.count-body {position:relative; padding:13px 10px 13px; border:1px solid #e0cece; border-bottom:1px solid #000; background:#fafafa;}
.count-body dd .price {font-weight:700; line-height:1.1em; color:#000;}

.count-tit {position:relative; padding:6px 0;}
.count-tit h3 {padding-left:26px; color:#ff3e3e; font-size:20px; font-weight:400; line-height:1.3em; letter-spacing:-.04em; background:url("../images/shop/icon_cost.png") 0 3px no-repeat;}
.count-tit .bt-count-detail {position:absolute; bottom:0; right:0; padding:0 8px; font-size:12px; color:#fff; line-height:22px; background:#eace5b; border-radius:4px 4px 0 0;}

.discount-wrap {background:#2c2268; text-align:center; color:#fff; padding:12px;}
.discount-wrap .tt {font-size:20px; line-height:1.3em;}
.discount-wrap .price strong {font-size:28px; line-height:1.4em;}
.discount-wrap .txt {font-size:16px; font-weight:500; line-height:1.4em;}
.discount-wrap + .count-box {margin-top:0; border-top:0;}

.count-box-wrap {overflow:hidden; margin-left:-6px;}
.count-box-wrap .count-box {float:left; width:calc(50% - 6px); margin:0 0 0 6px;}

.count-box {background:#fff; border:1px solid #ddd; padding:10px 8px; margin:6px 0; font-size:14px; line-height:1.4em;}
.count-box .line {border-bottom:1px solid #dedede; margin:8px 0;}
.count-box dl {padding:3px 0;}
.count-box dt {color:#000;}
.count-box .origin {color:#888; font-size:14px; line-height:1.4em;}
.count-box .dc {color:#555; font-size:14px; line-height:1.4em; margin:2px 0 3px;}
.count-box .month {color:#888; font-size:12px; font-weight:300; line-height:1.4em;}
.count-box .dc-price dt,
.count-box .dc-price dd {vertical-align:top;}
.count-box .help-txt {font-size:14px; color:#888; line-height:1.5em; font-weight:300; letter-spacing:-.025em; margin-top:2px;}
.count-box .in-height {min-height:65px}

.count-discount {margin:12px 0; font-size:14px;}
.count-discount .line {border-bottom:1px solid #9b9b9b; margin:8px 0;}
.count-discount .text-red {color:#ff3e3e;}
.count-discount .allbbaem {color:#ff3e3e}
.count-discount strong {font-weight:500;}
.count-discount.hidden {display:none;}

/*.count-foot {padding:16px 19px; border:1px solid #c8c4a9; background:#fff;}*/
.count-foot {padding:16px 19px; }
.count-foot .btns {margin-top:20px;}
.count-foot .btn-pack {display:block; margin:6px 0; width:100%; font-weight:400; border-radius:3px; border:0; position:relative;}
.count-foot .btn-pack:before {content:""; position:absolute; top:-5px; left:-5px; width:10px; height:10px; background:#fff; transform:rotate(45deg);}
.count-foot .btn-pack:after {content:""; position:absolute; bottom:-5px; right:-5px; width:10px; height:10px; background:#fff; transform:rotate(45deg);}
.count-foot .btn-pack.focus3 {background:#1e3a5f; font-weight:700; font-size:16px;}
/* 2026-04-20 안1: 카톡 상담 ghost 다운그레이드 — 주문 primary와 시각 위계 분리 (Phase A-1 원리 적용) */
.count-foot .btn-pack.focus2 {background:#fff; color:#1e3a5f !important; border:1px solid #1e3a5f; font-weight:500;}
.count-foot .btn-pack.focus2:before, .count-foot .btn-pack.focus2:after {display:none;}
.count-foot .btns .btn-pack.focus2 { color: #1e3a5f !important; }
/* 모바일에서는 하단 고정바(카톡+주문)가 대체하므로 요금계산기 하단 CTA 완전 숨김 */
@media (max-width: 767px) {
	.count-foot .btns {display:none;}
}
.count-foot .btn-pack img {vertical-align:middle; margin:-.2em 5px 0 0;}
.count-foot .text-red {color:#1e3a5f;}

.count-plus {display:flex; align-items:center; color:#555; font-size:14px; line-height:1.5em; margin-bottom:25px;}
.count-plus .img {width:53px;}
.count-plus .txt {flex:1 1 auto; text-align:right;}

.count-total {margin-bottom:25px;}
.count-total dt {color:#000; font-size:18px; line-height:1.3em;}
.count-total dd {color:#000; font-size:20px; line-height:1.3em;}
.count-total .price {color:#ff3600; font-size:30px; font-weight:700; line-height:1.1em;}
.count-total .help-txt {margin-top:5px; text-align:right; color:#888; font-size:12px; line-height:1.5em; letter-spacing:-.02em;}

/* === 모바일 하단 고정바 (리디자인) === */
/* 딤 오버레이 */
.fix-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:99;}
.goods-fix-count {display:none; position:fixed; bottom:0; left:0; width:100%; z-index:100; font-family:'Pretendard',sans-serif;}
.goods-fix-count.active {display:block;}

/* 상세 패널 (풀 바텀시트 — KT 스타일) */
.goods-fix-count .fix-detail-panel {background:#fff; border-radius:16px 16px 0 0; max-height:calc(100vh - 100px); overflow-y:auto; box-shadow:0 -4px 20px rgba(0,0,0,0.15); -webkit-overflow-scrolling:touch; padding-bottom:24px;}
/* 핸들바 + 헤더 */
.goods-fix-count .fix-detail-handle {padding:10px 0 0; text-align:center;}
.goods-fix-count .fix-detail-handle span {display:inline-block; width:36px; height:4px; border-radius:2px; background:#ddd;}
.goods-fix-count .fix-detail-header {display:flex; align-items:center; justify-content:space-between; padding:12px 16px 0;}
.goods-fix-count .fix-detail-header strong {font-size:16px; font-weight:700; color:#111;}
.goods-fix-count .fix-detail-close {display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; background:transparent; cursor:pointer; padding:0;}
/* 상품 요약 정보 (KT 스타일) */
.goods-fix-count .fix-product-info {display:flex; align-items:center; gap:14px; padding:16px; margin:8px 12px 0; background:#f7f7f8; border-radius:12px;}
.goods-fix-count .fix-product-thumb {width:72px; height:72px; flex-shrink:0; border-radius:10px; overflow:hidden; background:#fff; padding:4px;}
.goods-fix-count .fix-product-thumb img {width:100%; height:100%; object-fit:contain;}
.goods-fix-count .fix-product-meta {display:flex; flex-direction:column; gap:3px; min-width:0; text-align:left;}
.goods-fix-count .fix-product-name {font-size:15px; font-weight:700; color:#111; line-height:1.4;}
.goods-fix-count .fix-product-color {font-size:13px; color:#555; line-height:1.4;}
.goods-fix-count .fix-product-tags {font-size:12px; color:#888; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.goods-fix-count .fix-detail-inner {padding:16px 16px 12px;}
.goods-fix-count .fix-detail-row {display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:13px; color:#555; line-height:1.5;}
.goods-fix-count .fix-detail-row.sub {padding-left:10px; font-size:12px; color:#888;}
.goods-fix-count .fix-detail-row.sub.highlight span {font-weight:600; color:#333;}
.goods-fix-count .fix-detail-row.total {font-size:14px; font-weight:700; color:#111; padding:8px 0;}
.goods-fix-count .fix-price {text-align:right; white-space:nowrap;}
.goods-fix-count .fix-detail-divider {border-top:1px solid #eee; margin:8px 0;}
/* 안내 문구 */
.goods-fix-count .fix-detail-notice {padding:8px 16px 0; font-size:11px; color:#999; line-height:1.4; text-align:left;}

/* 요약 바 */
.goods-fix-count .fix-summary-bar {display:flex; align-items:center; justify-content:space-between; background:#fff; border-top:1px solid #e5e5e5; padding:14px 16px;}
.goods-fix-count .fix-summary-left {display:flex; flex-direction:column; gap:4px; min-width:0; text-align:left; flex:1;}
.goods-fix-count .fix-price-row {display:flex; align-items:baseline; justify-content:space-between;}
.goods-fix-count .fix-price-label {font-size:12px; color:#888; white-space:nowrap;}
.goods-fix-count .fix-price-unit {font-size:12px; color:#888; margin-left:1px;}
.goods-fix-count .fix-price-now strong {font-size:20px; font-weight:800; color:#111;}
.goods-fix-count .fix-price-now .fix-price-unit {font-size:14px; color:#111;}
.goods-fix-count .fix-price-after strong {font-size:15px; font-weight:600; color:#666;}
.goods-fix-count .fix-price-after .fix-price-unit {font-size:12px; color:#666;}
.goods-fix-count .fix-price-after .fix-price-label {font-size:12px; color:#777;}
.goods-fix-count .fix-summary-label {font-size:14px; color:#555; text-align:left;}
.goods-fix-count .fix-summary-condition {font-size:11px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;}
.goods-fix-count .fix-summary-price {font-size:20px; font-weight:700; color:#111; flex:1; text-align:right; margin-right:8px;}
.goods-fix-count .fix-summary-price span {font-size:20px;}
.goods-fix-count .fix-toggle {display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #ddd; border-radius:50%; background:#fff; cursor:pointer; transition:transform 0.25s; margin-left:12px; flex-shrink:0;}
.goods-fix-count .fix-toggle.open {transform:rotate(180deg);}
.goods-fix-count .fix-toggle svg {display:block;}

/* 액션 바 — CTA 계층화 (주문 우세, 상담 보조) */
.goods-fix-count .fix-action-bar {display:flex; align-items:center; gap:8px; background:#fff; padding:10px 16px 14px; padding-bottom:calc(14px + env(safe-area-inset-bottom));}
.goods-fix-count .fix-btn-kakao {display:flex; align-items:center; justify-content:center; gap:6px; flex:0 0 38%; height:48px; border:1px solid #ddd; border-radius:12px; background:#fff; font-size:14px; font-weight:500; color:#555; text-decoration:none;}
.goods-fix-count .fix-btn-kakao img {display:block;}
.goods-fix-count .fix-btn-order {flex:1; height:48px; border:0; border-radius:12px; background:#1e3a5f; color:#fff; font-size:16px; font-weight:700; cursor:pointer; letter-spacing:-0.02em;}

/* 상세 텝메뉴 */
.goods-tab {text-align:center; margin-bottom:45px; border-bottom:1px solid #061f3a; position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.08); padding-top:12px;}
.goods-tab ul {max-width:749px; margin:0 auto;}
.goods-tab ul:after {content:""; display:block; clear:both;}
.goods-tab ul li {float:left; width:25%; border:1px solid #061f3a; border-left:0; border-bottom:0;}
.goods-tab ul li:first-child {border-left:1px solid #061f3a;}
.goods-tab ul li a {display:block; position:relative; color:#585858; font-size:18px; font-weight:300; line-height:48px; letter-spacing:-.03em; white-space:nowrap;}
.goods-tab ul li a:hover {color:#333;}
.goods-tab ul li.active a {color:#fff; background:#061f3a;}
.goods-tab ul li {position:relative;}
.goods-tab ul li a {display:block; line-height:48px;}
.tab-count {position:absolute; top:-8px; right:2px; min-width:20px; height:20px; padding:0 6px; background:#ef4444; color:#fff; font-size:11px; font-weight:700; line-height:20px; text-align:center; border-radius:10px; letter-spacing:0; z-index:1;}

#viewDetail,
#viewGuide,
#viewReview {margin-bottom:70px;}

/* 유의사항 아코디언 — Shadcn/MUI 스타일 */
.guide-accordion {margin:8px 0;}
.guide-item {background:#fff; border:1px solid #e4e4e7; border-radius:12px; margin-bottom:10px; overflow:hidden; transition:box-shadow .15s, border-color .15s;}
.guide-item:last-child {margin-bottom:0;}
.guide-item.active {border-color:#d4d4d8; box-shadow:0 1px 3px rgba(0,0,0,.06);}
.guide-header {display:flex; justify-content:space-between; align-items:center; width:100%; padding:14px 18px; background:#fff; border:none; cursor:pointer; font-size:15px; font-weight:600; color:#18181b; text-align:left; transition:background .12s; gap:12px;}
.guide-header:hover {background:#fafafa;}
.guide-header svg {color:#a1a1aa; transition:transform .2s; flex-shrink:0;}
.guide-item.active .guide-header svg {transform:rotate(180deg);}
.guide-header::before {content:''; display:inline-block; width:3px; height:16px; background:#1e3a5f; border-radius:2px; flex-shrink:0;}
.guide-body {padding:0 18px 14px 33px; font-size:14px; line-height:1.8; color:#71717a;}
.guide-body ul {margin:0; padding:0; list-style:none;}
.guide-body li {position:relative; padding-left:14px; margin-bottom:8px;}
.guide-body li::before {content:''; position:absolute; left:0; top:9px; width:5px; height:5px; background:#d4d4d8; border-radius:50%;}
.guide-body li:last-child {margin-bottom:0;}

#viewDetail .board-list {display:block !important;}

/* 쇼핑 테이블 */
.shop-table {margin-bottom:35px;}
.shop-table table {width:100%; border-collapse:collapse; border-spacing:0;}
.shop-table table thead th {height:50px; padding:5px; border-bottom:1px solid #b9bcbe; border-top:2px solid #000; font-size:16px; color:#000; font-weight:500; line-height:1.5em;}
.shop-table table thead tr.bg th {background:#1e3a5f; color:#fff; border-top-color:#1e3a5f;}
.shop-table table tbody td {padding:10px 5px; border-bottom:1px solid #b9bcbe; color:#555; font-size:16px; line-height:20px; text-align:center; word-break:break-all;}
.shop-table table tbody td img {vertical-align:middle;}
.shop-table table tbody td.space-left {text-align:left; padding-left:15px;}
.shop-table table tbody td.bt p {margin:1px 0;}
.shop-table table tbody td .prod-info {overflow:hidden;}
.shop-table table tbody td .prod-info .img {float:left;}
.shop-table table tbody td .prod-info .img img {width:80px;}
.shop-table table tbody td .prod-info .info {margin-left:93px; letter-spacing:-.025em;}
.shop-table table tbody td .prod-info .info p {margin-bottom:3px;}
.shop-table table tbody td .telecom {color:#000; font-weight:500;}
.shop-table table tbody td .telecom span:first-child {margin-right:15px;}
.shop-table table tbody td .tit {color:#000; font-weight:500;}
.shop-table table tbody td .date {color:#888;}
.shop-table table tbody td .order-num {display:inline-block; text-decoration:underline; color:#000; margin-top:5px;}
.shop-table table tbody td .price {color:#1e3a5f; font-weight:700;}

.shop-table-m {display:none;}

.order-form {margin-bottom:50px;}
.order-form table {width:100%; border-collapse:collapse; border-spacing:0; border-top:1px solid #000; border-bottom:1px solid #000;}
.order-form th {padding:12px 28px; height:69px; color:#000; font-size:16px; font-weight:500; line-height:1.5em; text-align:left; background:#f8f8f8; border-bottom:1px solid #b9bcbe;}
.order-form td {padding:12px 16px; color:#555; font-size:16px; line-height:1.5em; border-bottom:1px solid #b9bcbe;}
.order-form td span.txt {display:inline-block; margin-left:18px;}
.order-form td .radiobox {margin:4px 16px 4px 0;}
.order-form td .mvno {display:inline-block;}
.order-form td .btn-pack {background:#555;color:#fff;border-color:#555;}
.order-form table tbody tr:last-child th,
.order-form table tbody tr:last-child td {border-bottom:0;}

/* 주문정보 설명 */
.order-desc {line-height:1.5em; margin-bottom:20px; letter-spacing:-.03em;}
.order-desc ul li {position:relative; padding-left:12px; margin-bottom:2px;}
.order-desc ul li:before {content:"·"; position:absolute; top:0; left:0;}

.order-info {color:#555; font-weight:300; line-height:1.4em; letter-spacing:-.03em; margin:-15px 0 35px;}
.order-info ul li {position:relative; padding-left:12px; margin-bottom:4px;}
.order-info ul li:before {content:"·"; position:absolute; top:0; left:0;}
.order-info .text-red {color:#1e3a5f; font-weight:700;}

/* 유의사항 */
.shop-guide {color:#555; font-size:16px; font-weight:300; line-height:1.625em; letter-spacing:-.03em;}
.shop-guide h3 {padding-left:32px; margin-bottom:11px; color:#000; font-size:20px; line-height:1.3em; background:url("../images/sub/bullet.png") 5px 7px no-repeat;}
.shop-guide ul li {position:relative; padding-left:16px;}
.shop-guide ul li:before {content:"·"; font-weight:400; position:absolute; top:0; left:0;}
.shop-guide .group {margin-left:30px; margin-bottom:35px;}

/* 월 예상 청구 금액 */
.billing-amount {margin-bottom:45px;}
.billing-amount .wrap {display:table; table-layout:fixed; width:100%; border-top:1px solid #000; border-bottom:1px solid #000;}
.billing-amount .wrap .col {display:table-cell; vertical-align:top; border-left:1px solid #d4d4d4;}
.billing-amount .wrap .col:first-child {border-left:0;}
.billing-amount .wrap .tit {position:relative; height:82px; padding:14px 2px; text-align:center; background:#fffbf6; color:#000; font-size:16px; font-weight:500; line-height:1.5em; letter-spacing:-.025em;}
.billing-amount .wrap .tit strong {font-size:20px; line-height:1.4em;}
.billing-amount .wrap .col:last-child .tit strong {color:#ff4600;}
.billing-amount .wrap .cnt {padding:13px; color:#888; font-size:12px; font-weight:300; line-height:20px; letter-spacing:-.025em;}
.billing-amount .wrap .cnt dl {display:table; width:100%;}
.billing-amount .wrap .cnt dt {display:table-cell; vertical-align:top;}
.billing-amount .wrap .cnt dd {display:table-cell; vertical-align:top; color:#000; text-align:right;}
.billing-amount .wrap .cnt .line {border-bottom:1px solid #d4d4d4; margin:8px 0;}
.billing-amount .wrap .cnt .text-red {color:#ff4600}
.billing-amount .wrap .ico {position:absolute; top:50%; right:0; margin:-19px -19px 0 0; width:39px; height:39px; background:#fff; border:1px solid #000; border-radius:4px; z-index:2;}
.billing-amount .wrap .ico.plus:before {content:""; position:absolute; top:50%; left:11px; right:11px; height:3px; background:#000; margin-top:-2px;}
.billing-amount .wrap .ico.plus:after {content:""; position:absolute; left:50%; top:11px; bottom:11px; width:3px; background:#000; margin-left:-2px;}
.billing-amount .wrap .ico.minus {border-color:#1e3a5f;}
.billing-amount .wrap .ico.minus:before {content:""; position:absolute; top:50%; left:11px; right:11px; height:3px; background:#1e3a5f; margin-top:-2px;}
.billing-amount .wrap .ico.equal:before {content:""; position:absolute; top:50%; left:11px; right:11px; height:3px; background:#000; margin-top:-5px;}
.billing-amount .wrap .ico.equal:after {content:""; position:absolute; bottom:50%; left:11px; right:11px; height:3px; background:#000; margin-bottom:-5px;}
.billing-amount .wrap .col-total .cnt {display:none;}
.billing-amount .wrap .tit-sub {display:block; margin-top:8px; font-size:11px; font-weight:300; color:#888; line-height:1.4em;}
.billing-amount .info {margin:10px 0 0 12px; color:#888; font-size:14px; font-weight:300; line-height:1.5em; letter-spacing:-.025em;}
.billing-amount .info h5 {color:#1e3a5f; font-size:14px; line-height:1.3em; margin-bottom:8px;}
.billing-amount .info ul li {position:relative; padding-left:10px;}
.billing-amount .info ul li:before {content:"·"; position:absolute; top:0; left:0;}

/* 약관동의 */
.order-agree {border-top:1px solid #000; margin-bottom:50px;}
.order-agree dt {position:relative; padding:14px 18px; padding-right:200px; color:#000; line-height:1.5em; letter-spacing:-.025em; border-bottom:1px solid #b9bcbe; cursor:pointer;}
.order-agree dt .radiobox {position:absolute; width:198px; right:0; top:12px;}
.order-agree dt .radiobox .ico {margin-right:13px;}
.order-agree dt.active {background:#f8f8f8;}
.order-agree dd {display:none; padding:14px 18px; line-height:1.5em; border-bottom:1px solid #b9bcbe;}

/* 요금제 선택 팝업 */
.pop-plan {width:100%; max-width:1200px; border:4px solid #e5e5e5; padding:17px;}
.pop-plan-tit {text-align:center; margin-bottom:22px; margin-top:12px;}
.pop-plan-tit h2 {color:#000; font-size:30px; font-weight:500; letter-spacing:-.04em; line-height:1.3em;}
.pop-plan-options {text-align:center; margin-bottom:18px;}
.pop-plan-options .item {display:inline-block; vertical-align:top; min-width:106px; margin:1px 0; background:#2c2268; border-radius:3px; text-align:center; color:#eace5b; font-size:14px; font-weight:300; line-height:34px; letter-spacing:-.03em;}
.pop-plan-options .item:before {content:""; display:inline-block; vertical-align:middle; margin:-.2em 2px 0 0; width:10px; height:10px; background:url("../images/shop/opt_checked.png") 50% 50% no-repeat;}

.select-plan-list {position:relative;}
.select-plan-list .swiper-slide {width:auto;}

.plan-box {position:relative; width:280px; border:1px solid #ccc; padding:3px 16px;}
.plan-box.active:before {content:""; position:absolute; top:-1px; right:-1px; bottom:-1px; left:-1px; border:4px solid #1e3a5f;}
.plan-box .title {position:relative; text-align:center; padding:18px 0 13px 0; border-bottom:1px solid #dedede;}
.plan-box .title h3 {color:#000; font-size:28px; font-weight:500; letter-spacing:-.04em; line-height:1.3em; margin-bottom:4px;}
.plan-box .title p {color:#888; font-size:14px; font-weight:300; line-height:1.3em;}
.plan-box .cnt-wrap {position:relative; min-height:305px; padding:12px 5px; color:#888; font-size:14px; font-weight:300; line-height:1.42em; letter-spacing:-.015em;}
.plan-box .info-txt {margin-bottom:10px;}
.plan-box .url-link {margin-bottom:17px;}
.plan-box .url-link a {display:inline-block; border-bottom:1px solid #cf112b; color:#cf112b; font-size:12px; font-weight:500; line-height:1.3em;}
.plan-box .info-opt ul li {position:relative; padding-left:11px;}
.plan-box .info-opt ul li:before {content:"·"; position:absolute; top:0; left:0;}
.plan-box .month-price {position:relative; padding:12px 5px; border-bottom:1px solid #dedede;}
.plan-box .month-price dl {display:table; width:100%;}
.plan-box .month-price dt {display:table-cell; vertical-align:middle; color:#888; font-size:14px; font-weight:300; line-height:1.3em; letter-spacing:-.03em;}
.plan-box .month-price dt span {font-size:12px;}
.plan-box .month-price dd {display:table-cell; vertical-align:middle; text-align:right; color:#000; font-size:16px; font-weight:300; line-height:1.3em; letter-spacing:-.03em;}
.plan-box .month-price dd strong {color:#1e3a5f; font-size:30px; line-height:1em;}
.plan-box .btn {position:relative; text-align:center; padding:20px 0;}
.plan-box .planSelectBtn {display:inline-block; vertical-align:top; text-align:center; min-width:148px; color:#535353; font-size:18px; font-weight:700; line-height:42px; letter-spacing:-.03em; background:#fff; border:1px solid #f37043; border-radius:4px; transition:.2s;} 
.plan-box .planSelectBtn:hover {color:#fff; background:#1e3a5f; border-color:#1e3a5f;}

/* 제휴카드 선택 팝업 */
.pop-card {width:100%; max-width:1200px; border:4px solid #e5e5e5; padding:32px 15px;}
.pop-card-tit {text-align:center; margin-bottom:45px;}
.pop-card-tit h2 {color:#000; font-size:30px; font-weight:500; letter-spacing:-.04em; line-height:1.3em; margin-bottom:3px;}
.pop-card-tit p {color:#1e3a5f; font-size:16px; font-weight:300; letter-spacing:-.04em; line-height:1.4em;}

.select-card-list {position:relative; padding:0 97px;}
.select-card-list .swiper-slide {width:auto;}

.card-box {position:relative; width:308px; border:1px solid #ccc; padding:21px 16px;}
.card-box .image {position:relative; height:145px;}
.card-box .image img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.card-box .title {text-align:center; padding:9px 0 12px 0; border-bottom:1px solid #dedede;}
.card-box .title h3 {color:#000; font-size:20px; font-weight:500; letter-spacing:-.04em; line-height:1.3em; margin-bottom:5px;}
.card-box .title p {color:#888; font-size:14px; font-weight:300; line-height:1.3em;}
.card-box .price-area {padding:12px 0; color:#888; font-size:14px; font-weight:300; line-height:1.42em; letter-spacing:-.015em; border-bottom:1px solid #dedede;}
.card-box .price-area ul li {display:table; width:100%; cursor:pointer;}
.card-box .price-area ul li:hover {text-decoration:underline;}
.card-box .price-area .txt {display:table-cell; vertical-align:middle;}
.card-box .price-area .price {display:table-cell; vertical-align:middle; text-align:right; font-weight:500; color:#1e3a5f;}
.card-box .price-area .price strong {font-weight:500;}
.card-box .month-price {position:relative; padding:12px 10px; background:#fafafa;}
.card-box .month-price dl {display:table; width:100%;}
.card-box .month-price dt {display:table-cell; vertical-align:middle; color:#000; font-size:14px; font-weight:300; line-height:1.3em; letter-spacing:-.03em;}
.card-box .month-price dd {display:table-cell; vertical-align:middle; text-align:right; color:#000; font-size:16px; font-weight:300; line-height:1.3em; letter-spacing:-.03em;}
.card-box .month-price dd strong {color:#1e3a5f; font-size:30px; line-height:1em;}
.card-box .month-price p {color:#000; font-size:12px; font-weight:300; line-height:1.3em; letter-spacing:-.015em; text-align:right; margin-top:8px;}
.card-box .url-link {margin-bottom:5px; text-align:right;}
.card-box .url-link a {display:inline-block; border-bottom:1px solid #cf112b; color:#cf112b; font-size:12px; font-weight:500; line-height:1.3em;}

.select-card-desc {margin-top:22px; text-align:center; color:#888; font-size:14px; font-weight:300; line-height:1.4em; letter-spacing:-.02em;}
.select-card-desc ul {display:inline-block; text-align:left;}
.select-card-desc ul li {padding-left:1.1em; text-indent:-1.1em; margin-bottom:4px;}
.select-card-desc ul li:last-child {margin-bottom:0;}

.swiper-btn {position:absolute; top:50%; margin-top:-50px; width:38px; height:50px; background-color:#bebebe; background-position:50% 50%; background-repeat:no-repeat; border-radius:6px; z-index:50; cursor:pointer;}
.swiper-btn.prev {left:0; background-image:url("../images/shop/slide_prev.png")}
.swiper-btn.next {right:0; background-image:url("../images/shop/slide_next.png")}
.swiper-btn.swiper-button-disabled {opacity:.2;}

.pop-close-lg {position:absolute; top:20px; right:20px; transition:none; width:38px; height:38px; overflow:hidden; text-indent:-999em;}
.pop-close-lg:before,
.pop-close-lg:after {content:""; position:absolute; display:block; top:0; left:50%; width:2px; height:100%; margin-left:-1px; background:#000; border-radius:2px;}
.pop-close-lg:before {transform:rotate(45deg)}
.pop-close-lg:after {transform:rotate(-45deg)}

/* loading */
.count-loading {position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6);}
.lds-roller {position:absolute; top:50%; left:50%; width:90px; height:90px; margin:-45px 0 0 -45px;}
.lds-roller div {animation:lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;transform-origin:40px 40px;}
.lds-roller div:after {content:"";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#1e3a5f;margin:-4px 0 0 -4px;}
.lds-roller div:nth-child(1) {animation-delay:-0.036s;}
.lds-roller div:nth-child(1):after {top:63px; left:63px;}
.lds-roller div:nth-child(2) {animation-delay:-0.072s;}
.lds-roller div:nth-child(2):after {top:68px;left:56px;}
.lds-roller div:nth-child(3) {animation-delay:-0.108s;}
.lds-roller div:nth-child(3):after {top:71px;left:48px;}
.lds-roller div:nth-child(4) {animation-delay:-0.144s;}
.lds-roller div:nth-child(4):after {top:72px;left:40px;}
.lds-roller div:nth-child(5) {animation-delay:-0.18s;}
.lds-roller div:nth-child(5):after {top:71px;left:32px;}
.lds-roller div:nth-child(6) {animation-delay:-0.216s;}
.lds-roller div:nth-child(6):after {top:68px;left:24px;}
.lds-roller div:nth-child(7) {animation-delay:-0.252s;}
.lds-roller div:nth-child(7):after {top:63px;left:17px;}
.lds-roller div:nth-child(8) {animation-delay:-0.288s;}
.lds-roller div:nth-child(8):after {top:56px;left:12px;}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*대표이미지 하단 텍스트박스 */
.auto-fold {
  margin-top: 5px; 
  position: relative;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f9f9f9;
  padding: 12px 12px 42px;
  overflow: hidden;
}

.auto-fold__content {
  max-height: none;       /* JS에서 제어 */
  overflow: hidden;       /* 접힘 상태에서만 의미 */
  transition: max-height .25s ease;
  line-height: 1.6;
  color: #333;
}

.auto-fold__toggle {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 38px;
  border: 0;
  border-top: 1px solid #e5e5e5;
  background: #fff;
  cursor: pointer;
  color: #333;
}

.auto-fold__toggle .arrow {
  
  margin-left: 6px;
  font-size: 11px;
}
.auto-fold__toggle .arrow { display:inline-block; transition: transform .2s; }
.auto-fold[aria-expanded="true"] .auto-fold__toggle .arrow { transform: rotate(180deg); }


/* 안내 텍스트 스타일 */
.auto-fold__content .notice-title {
  margin: 0 0 6px;
  color: #444;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: center;
}

.auto-fold__content .notice-body {
  margin: 0;
  color: #333;
  line-height: 1.6;
  word-break: keep-all;
}

.auto-fold__content .notice-body .hl {
  color: #2356c5; /* 강조 색상 */
  font-weight: 700;
}

.auto-fold__content .notice-body strong {
  color: #cb1a1a; /* ‘없습니다’ 강조 색상 */
  font-weight: 700;
}

/* 숫자 배지: 옵션 타이틀 앞에 검정 네모 + 흰색 숫자 */
.option-group .opt-tit.block[data-step]::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background: #999;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  flex-shrink: 0;
}

/* 상품 목록 카드 모바일 반응형 */
@media (max-width: 640px) {
  .goods-list .total-section .price-row.total dt {font-size:12px;}
  .goods-list .total-section .price-row.total dd {font-size:12px;}
  .goods-list .total-section .price-row.total dd strong {font-size:16px;}
}

/* 후기 요약 뱃지 */
.review-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  background: rgba(54,23,206,.05);
  border: 1px solid rgba(54,23,206,.15);
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
  cursor: pointer;
}
.review-summary-badge:hover {
  background: rgba(54,23,206,.1);
  border-color: rgba(54,23,206,.25);
}
.review-summary-badge .badge-stars-wrap {
  position: relative;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
}
.review-summary-badge .badge-stars-empty {
  color: #d4d4d8;
  letter-spacing: 1px;
}
.review-summary-badge .badge-stars-fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f59e0b;
  letter-spacing: 1px;
}
.review-summary-badge .badge-score {
  color: #18181b;
  font-weight: 700;
  font-size: 15px;
}
.review-summary-badge .badge-divider {
  width: 1px;
  height: 12px;
  background: #d4d4d8;
  margin: 0 4px;
}
.review-summary-badge .badge-cta {
  color: #1e3a5f;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.review-summary-badge:hover .badge-cta {
  color: #2710a3;
}
.review-summary-badge .badge-photo-icon {
  color: #555;
  font-size: 13px;
  margin-left: 2px;
}

/* 구매후기 롤링 섹션 (Shadcn/MUI style) */
.review-rolling-section {
  margin:14px 0;
  padding:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  overflow:hidden;
  transition:box-shadow .2s;
}
.review-rolling-section:hover {box-shadow:0 4px 12px rgba(0,0,0,.08);}

/* 헤더 */
.review-rolling-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#fafafa;
}
.review-header-left {display:flex; align-items:center; gap:6px;}
.review-header-left .review-icon {color:#1e3a5f; flex-shrink:0;}
.review-header-left .review-title {font-size:14px; font-weight:600; color:#111; letter-spacing:-.02em;}
.review-header-left .review-count {font-size:12px; color:#1e3a5f; font-weight:500; background:rgba(54,23,206,.08); padding:2px 8px; border-radius:10px;}
.review-more-link {
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:13px;
  font-weight:500;
  color:#888;
  text-decoration:none;
  transition:color .15s;
}
.review-more-link:hover {color:#1e3a5f;}
.review-more-link svg {transition:transform .15s;}
.review-more-link:hover svg {transform:translateX(2px);}

/* 슬라이더 */
.review-rolling-swiper {overflow:hidden; position:relative; padding-bottom:22px;}

/* 카드 아이템 */
.review-rolling-item {
  display:block;
  text-decoration:none;
  color:#333;
  padding:16px;
  margin-bottom:6px;
  transition:background .15s;
}
.review-rolling-item:hover {background:rgba(54,23,206,.02);}
.review-item-top {display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.review-stars {font-size:15px; letter-spacing:1px; line-height:1;}
.review-stars .filled {color:#f59e0b;}
.review-stars .empty {color:#e5e7eb;}
.review-rolling-item .review-date {font-size:13px; color:#aaa; font-weight:400;}
.review-rolling-item .review-subject {
  font-size:15px;
  font-weight:600;
  color:#111;
  line-height:1.4;
  margin:0 0 4px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.review-rolling-item .review-contents {
  font-size:13.5px;
  color:#555;
  line-height:1.5;
  margin:0 0 8px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.review-rolling-item .review-name {font-size:13px; color:#999; font-weight:400;}

/* 사진 있는 리뷰: flex 가로 배치 */
.review-rolling-item.has-photo {display:flex; align-items:center; gap:12px;}

/* 썸네일 64x64 정사각형 */
.review-rolling-thumb {flex-shrink:0; width:64px; height:64px; border-radius:8px; overflow:hidden; background:#f4f4f5;}
.review-rolling-thumb img {width:100%; height:100%; object-fit:cover;}

/* 텍스트 영역 */
.review-rolling-text {flex:1; min-width:0;}

/* 페이지네이션 dots */
.review-rolling-pagination {text-align:center; bottom:4px !important;}
.review-rolling-pagination .swiper-pagination-bullet {
  width:6px; height:6px;
  background:#d4d4d8;
  opacity:1;
  margin:0 3px !important;
  border-radius:3px;
  transition:all .2s;
}
.review-rolling-pagination .swiper-pagination-bullet-active {
  background:#1e3a5f;
  width:18px;
}

/* PC: 롤링 섹션 컴팩트 — 요금계산기 뷰포트 확보 */
@media (min-width: 769px) {
  .review-rolling-section { margin: 8px 0; }
  .review-rolling-header { padding: 8px 16px; }
  .review-rolling-swiper { padding-bottom: 10px; }
  .review-rolling-item { padding: 8px 16px; }
  .review-rolling-item .review-contents { -webkit-line-clamp: 1; margin-bottom: 0; font-size: 13px; }
  .review-rolling-text { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
  .review-item-top { margin-bottom: 0; }
  .review-rolling-item .review-name { order: -1; font-size: 13px; }
  .review-rolling-item .review-date { font-size: 12px; }
  .review-rolling-item .review-subject { width: 100%; }
  .review-rolling-item .review-contents { width: 100%; }
  .review-item-top { margin-bottom: 2px; }
  .review-rolling-item .review-subject { margin: 0; font-size: 14px; }
  .review-rolling-thumb { width: 40px; height: 40px; border-radius: 6px; }
  .review-rolling-item.has-photo { gap: 8px; }
  .review-rolling-pagination { bottom: 2px !important; }
}

/* 모바일 후기 간소화 링크 — 제거, 탭 내 리스트 직접 노출 */
.rv-mobile-link { display: none; }

@media (max-width: 640px) {
  .review-rolling-section {margin:10px 0; border-radius:10px;}
  .review-rolling-header {padding:10px 14px;}
  .review-rolling-item {padding:12px 14px;}
  .review-rolling-item .review-text {font-size:13px;}
  .review-rolling-item .review-name {font-size:11px;}
  .review-rolling-thumb {width:56px; height:56px; border-radius:6px;}
  .review-rolling-item.has-photo {gap:10px;}
}

/* v2 2단 레이아웃 */
.goods-summary--v2 .goods-photo,
.goods-summary--v2 .goods-options,
.goods-summary--v2 .yogeum-calc { float: none; width: auto; }
.goods-summary--v2:after { display: none; }
.goods-summary--v2 { display: block; margin-top: 0; }

.goods-hero { display: flex; gap: 30px; align-items: flex-start; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #e5e5e5; }
.goods-hero-left { flex: 0 0 42%; max-width: 42%; }
.goods-hero-right { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* 히어로 타이틀 */
.hero-title-area { margin-bottom: 4px; }
.hero-title-area .hero-telecom { font-size: 14px; color: #666; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.hero-title-area .hero-telecom img { height: 20px; }
.hero-title-area .hero-product-name { font-size: 24px; font-weight: 800; color: #111; margin: 0; }

/* 안내박스 */
.hero-info-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 4px; }
.hero-info-item { display: flex; align-items: flex-start; gap: 14px; }
.hero-info-item .info-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #EEF0FF; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.hero-info-item .info-text strong { display: block; font-size: 15px; font-weight: 700; color: #111; margin-bottom: 2px; }
.hero-info-item .info-text p { font-size: 13px; color: #666; margin: 0; line-height: 1.4; }

/* 사전승낙마크 */
.hero-cert-mark { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; }
.hero-cert-mark .cert-icon { flex-shrink: 0; width: 36px; height: 36px; }
.hero-cert-mark .cert-icon img { width: 100%; height: 100%; object-fit: contain; }
.hero-cert-mark .cert-text { font-size: 13px; color: #888; line-height: 1.4; }
.hero-cert-mark .cert-text strong { color: #555; }

/* 신청하기 버튼 */
.hero-apply-btn { width: 100%; padding: 16px 0; background: #1e3a5f; color: #fff; font-size: 18px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; }
.hero-apply-btn:hover { background: #152b47; }

/* 퀵 네비게이션 (2026-04-23 아정당 스타일 — 전체 폭 밑줄 + 수직 구분선 + 크기 점프 제거) */
.view-quick-nav {display:flex; position:sticky; top:0; z-index:90; background:#fff; border-bottom:1px solid #eee; margin:0 0 20px;}
.view-quick-nav .qnav-link {flex:1 1 0; min-width:0; box-sizing:border-box; text-align:center; padding:14px 4px; font-size:15px; font-weight:600; color:#666; text-decoration:none; position:relative; transition:color 0.15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.view-quick-nav .qnav-link:hover {color:#333;}
/* active — 크기 점프 제거, 색+굵기+전체 폭 3px 밑줄 */
.view-quick-nav .qnav-link.active {background:transparent; font-weight:700; color:#1e3a5f;}
.view-quick-nav .qnav-link.active::after {content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#1e3a5f;}

/* 유의사항 — 웜레드 (주의 환기 섹션, 2단계 색상 유지) */
.view-quick-nav .qnav-link[data-target="viewGuide"].active {color:#bb4d3c;}
.view-quick-nav .qnav-link[data-target="viewGuide"].active::after {background:#bb4d3c;}

/* 2026-04-23 문의 탭 숨김 (상위 .tab-content display:block !important 오버라이드) */
#viewQna {display:none !important;}

/* ========================================
   가입정보 탭 — 2026-04-23 신규
   ======================================== */
#viewSignup .signup-info-section {margin-bottom:28px;}
#viewSignup .signup-info-section:last-child {margin-bottom:0;}
#viewSignup .si-section-title {font-size:16px; font-weight:700; color:#222; margin:0 0 12px 0; padding-left:10px; border-left:3px solid #1e3a5f; display:flex; align-items:center; gap:8px;}
#viewSignup .si-body {font-size:15px; color:#333; line-height:1.6;}
#viewSignup .si-body ul {list-style:none; padding:0; margin:0;}
#viewSignup .si-body li {position:relative; padding:6px 0 6px 20px; font-size:15px; color:#333;}
#viewSignup .si-body li::before {content:"·"; position:absolute; left:6px; color:#1e3a5f; font-weight:700; font-size:18px; line-height:1;}
#viewSignup .si-empty {color:#999; font-size:14px;}

/* 섹션 공통 카드 (2026-04-24 아정당 스타일) */
#viewSignup .si-yogum-info-card,
#viewSignup .si-addon-card,
#viewSignup .si-contract-card {background:#f8f9fa; border-radius:10px; padding:16px 18px;}

/* 섹션 1: 요금제 */
#viewSignup .si-yogum-title {display:flex; align-items:center; gap:8px; margin-bottom:12px;}
#viewSignup .si-yogum-title strong {font-size:18px; font-weight:700; color:#222;}
#viewSignup .si-yogum-period-badge,
#viewSignup .si-contract-badge {font-size:11px; color:#1e3a5f; background:#fff; border:1px solid #1e3a5f; border-radius:4px; padding:2px 8px; font-weight:500; white-space:nowrap;}
#viewSignup .si-yogum-specs {margin:0; padding:0;}
#viewSignup .si-yogum-spec-row {display:flex; padding:5px 0; margin:0;}
#viewSignup .si-yogum-spec-row dt {width:90px; flex-shrink:0; font-size:14px; color:#888; margin:0;}
#viewSignup .si-yogum-spec-row dd {flex:1; font-size:15px; color:#333; margin:0;}
#viewSignup .si-price-dc-note {display:inline-block; margin-left:6px; padding:2px 8px; background:#f5f7fa; color:#1e3a5f; font-size:11px; font-weight:600; border-radius:10px; vertical-align:middle;}

/* 섹션 2: 부가서비스 */
#viewSignup .si-addon-list {display:flex; flex-direction:column; gap:10px;}
#viewSignup .si-addon-card {padding:14px 18px;}
#viewSignup .si-addon-head {display:flex; align-items:center; gap:8px; margin-bottom:6px;}
#viewSignup .si-addon-head strong {font-size:16px; font-weight:700; color:#222;}
#viewSignup .si-addon-desc {font-size:14px; color:#555; line-height:1.5;}
#viewSignup .si-addon-empty {font-size:14px; color:#999; padding:16px; background:#f8f9fa; border-radius:10px; text-align:left;}

/* 섹션 3: 약정안내 */
#viewSignup .si-contract-card {display:flex; align-items:center; gap:8px; margin-bottom:12px;}
#viewSignup .si-contract-card strong {font-size:16px; font-weight:700; color:#222;}
#viewSignup .si-contract-desc {padding:0 4px; font-size:15px; color:#555; line-height:1.6;}
#viewSignup .si-contract-desc p {margin:0; padding:0;}
#viewSignup .si-contract-desc ul {list-style:none; margin:0; padding:0 0 0 4px;}
#viewSignup .si-contract-desc li {position:relative; padding:4px 0 4px 14px; font-size:15px; color:#555;}
#viewSignup .si-contract-desc li::before {content:"·"; position:absolute; left:2px; top:0; color:#1e3a5f; font-weight:700; font-size:18px; line-height:1.4;}

/* 섹션 4: 위약금 안내 */
#viewSignup .si-penalty-body {font-size:15px; color:#333; line-height:1.6;}
#viewSignup .si-penalty-body h4,
#viewSignup .si-penalty-body .penalty-group-label {display:block; font-size:15px; color:#111; font-weight:700; letter-spacing:-0.02em; margin:16px 0 6px 0; padding:0; background:none; border:0; border-radius:0;}
#viewSignup .si-penalty-body h4:first-child,
#viewSignup .si-penalty-body .penalty-group-label:first-child {margin-top:0;}
#viewSignup .si-penalty-body ul {list-style:none; padding:0 0 0 4px; margin:0 0 8px 0;}
#viewSignup .si-penalty-body li {position:relative; padding:4px 0 4px 14px; font-size:15px; color:#333;}
#viewSignup .si-penalty-body li::before {content:"·"; position:absolute; left:2px; top:0; color:#1e3a5f; font-weight:700; font-size:18px; line-height:1.4;}

/* 섹션 4: 시세 */
#viewSignup .si-pt-empty-badge {font-size:11px; color:#888; background:#f0f0f0; padding:3px 8px; border-radius:10px; font-weight:500;}
#viewSignup .si-pt-current {background:#f8f9fa; border-radius:10px; padding:16px; margin-bottom:12px;}
#viewSignup .si-pt-current-label {font-size:13px; color:#888; margin-bottom:4px;}
#viewSignup .si-pt-current-price {font-size:24px; font-weight:700; color:#1e3a5f; margin-bottom:4px;}
#viewSignup .si-pt-current-device {font-size:13px; color:#666;}
#viewSignup .si-pt-period {display:flex; gap:6px; margin-bottom:12px;}
#viewSignup .si-pt-period-btn {flex:1; padding:8px 0; font-size:14px; color:#666; background:#fff; border:1px solid #e0e0e0; border-radius:6px; cursor:pointer; transition:all 0.15s;}
#viewSignup .si-pt-period-btn:hover {border-color:#1e3a5f; color:#1e3a5f;}
#viewSignup .si-pt-period-btn.active {background:#1e3a5f; color:#fff; border-color:#1e3a5f;}
#viewSignup .si-pt-chart-wrap {position:relative; height:240px; margin-bottom:16px;}
#viewSignup .si-pt-chart-empty {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#999; font-size:14px; text-align:center;}
#viewSignup .si-pt-table {width:100%; border-collapse:collapse; font-size:14px;}
#viewSignup .si-pt-table th {background:#f8f9fa; padding:8px 10px; font-weight:600; color:#666; text-align:left; border-bottom:1px solid #e0e0e0;}
#viewSignup .si-pt-table td {padding:8px 10px; border-bottom:1px solid #f0f0f0; color:#333;}
#viewSignup .si-pt-table td strong {color:#222;}
#viewSignup .si-pt-table-loading {text-align:center; color:#aaa;}

@media (max-width: 767px) {
	#viewSignup .si-section-title {font-size:15px;}
	#viewSignup .si-yogum-info-card,
	#viewSignup .si-addon-card,
	#viewSignup .si-contract-card {padding:14px;}
	#viewSignup .si-yogum-title strong {font-size:17px;}
	#viewSignup .si-yogum-spec-row dt {width:80px; font-size:13px;}
	#viewSignup .si-yogum-spec-row dd {font-size:14px;}
	#viewSignup .si-addon-head strong {font-size:15px;}
	#viewSignup .si-addon-desc {font-size:13px;}
	#viewSignup .si-addon-empty {font-size:13px;}
	#viewSignup .si-contract-card strong {font-size:15px;}
	#viewSignup .si-contract-desc, #viewSignup .si-contract-desc li {font-size:14px;}
	#viewSignup .si-penalty-body, #viewSignup .si-penalty-body li {font-size:14px;}
	#viewSignup .si-pt-current-price {font-size:22px;}
	#viewSignup .si-pt-chart-wrap {height:200px;}
	#viewSignup .si-pt-period-btn {min-height:40px;}
}

@media (max-width: 767px) {
	/* 부모 padding 무관하게 화면 전체 폭 — 뷰포트 단위 사용 */
	.view-quick-nav {width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-bottom:12px;}
	.view-quick-nav .qnav-link {padding:14px 4px; font-size:14px;}
	/* 2026-04-23 아정당 스타일 — active 크기 점프 제거 (색+굵기+밑줄만) */
}

/* script.js 의 .tab-content hide() 오버라이드 — .goods-tab 제거 후 탭 전환 대신 앵커 스크롤로 전체 노출 */
.goods-col-left > .tab-content {display:block !important;}

/* 섹션 간 분리 — .tab-content 상단 여백+경계선만 유지 (2026-04-20 Zero-Header 설계) */
.goods-col-left > .tab-content {margin-top:40px; padding-top:28px; border-top:1px solid #f0f0f0;}
/* 가입정보 탭(첫 섹션)은 퀵네비 바로 아래라 회색줄/여백 제거로 컴팩트화 (2026-04-27)
   ID 명시도(1,1,1)로 위 .goods-col-left > .tab-content 규칙(0,2,1) 안전 오버라이드 — !important 불필요 */
.goods-col-left > #viewSignup {margin-top:16px; padding-top:0; border-top:0;}

@media (max-width: 767px) {
	.goods-col-left > .tab-content {margin-top:24px; padding-top:18px;}
}

/* Phase 3-1 — 후기 섹션 요약 라인 */
.review-summary-line {display:flex; align-items:center; gap:8px; padding:10px 14px; margin:0 0 16px; background:#fff8ef; border:1px solid #f0e0cc; border-radius:8px; font-size:14px; color:#555;}
.review-summary-line .rs-star {color:#e67e22; font-weight:700;}
.review-summary-line .rs-sep {color:#ccc;}
.review-summary-line .rs-count {color:#666;}

/* Phase 4-1 — 유의사항 아코디언 chevron 회전 */
.guide-item .guide-header svg {transition:transform 0.2s;}
.guide-item.active .guide-header svg {transform:rotate(180deg);}


/* 용량/색상 히어로 통합 셀렉터 (Phase B-7) — 기존 select-giga/select-color 스타일 재사용 */
.hero-variant-selector { display:flex; flex-direction:column; gap:10px; padding:12px; background:#fafafa; border:1px solid #eee; border-radius:10px; }
.hero-variant-row { display:flex; align-items:center; gap:12px; }
.hero-variant-label { flex:0 0 40px; font-size:13px; font-weight:600; color:#555; }
.hero-variant-options { flex:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.hero-variant-options .select-giga { display:inline-block; margin:0; }
.hero-variant-options .select-giga label { padding:6px 12px; min-height:0; border-radius:6px; border:1px solid #e0e0e0; background:#fff; cursor:pointer; transition:all 0.15s; }
.hero-variant-options .select-giga input:checked + .cell .tit,
.hero-variant-options .select-giga input:checked ~ .cell .tit { font-weight:700; }
.hero-variant-options .select-giga label:has(input:checked) { border-color:#1e3a5f; background:#f5f7fa; }
.hero-variant-options .select-giga .tit { font-size:13px; color:#333; }
.hero-variant-options .select-color { padding:0; gap:8px; }
.hero-variant-options .color { display:inline-flex; align-items:center; gap:4px; }
.hero-variant-options .color label { width:22px; height:22px; border-radius:50%; border:2px solid #e0e0e0; cursor:pointer; display:inline-block; transition:border-color 0.15s; }
.hero-variant-options .color input:checked + label { border-color:#1e3a5f; box-shadow:0 0 0 2px #fff inset; }
.hero-variant-options .color .txt { display:none; }

.goods-body { display: flex; flex-wrap: nowrap; gap: 24px; align-items: flex-start; }
.goods-col-left { flex: 1 1 0%; min-width: 0; }
.goods-col-right { flex: 0 0 340px; max-width: 340px; position: sticky; top: 20px; align-self: flex-start; }

.goods-summary--v2 .calc-wrap { position: static !important; width: auto !important; }
.goods-summary--v2 .calc-wrap.fixed,
.goods-summary--v2 .calc-wrap.fixed-bottom { position: static !important; width: auto !important; }
.goods-summary--v2 .calc-body { border: 2px solid #1e3a5f; border-radius: 12px; }
/* Shadcn Card 스타일 이미지 컨테이너 */
.goods-summary--v2 .goods-photo {
  padding: 0;
  margin-bottom: 0;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: 16px 16px 14px;
  overflow: visible;
}

/* 배지: Card 위 걸침 */
.goods-summary--v2 .badge-container {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
  margin-top: -8px;
}
.goods-summary--v2 .product-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  background: #fff;
  color: var(--badge-color, #1e3a5f);
  border: 1.5px solid var(--badge-color, #1e3a5f);
  line-height: 1.3;
}

/* 이미지 영역: radial-gradient 배경 */
.goods-hero-left .goods-photo .photo {
  padding: 0;
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  background: radial-gradient(circle, #fff 50%, #f4f4f5 100%);
  border-radius: 10px;
  overflow: visible; /* scale 애니메이션 잘림 방지 */
}
.goods-hero-left .goods-photo .photo .img { padding-bottom: 0; width: 360px; height: 360px; max-width: 100%; max-height: 100%; }
/* 레거시 transform:translate 오버라이드 — scale 충돌 방지 */
.goods-hero-left .goods-photo .photo .img img { width: 100%; height: 100%; object-fit: contain; position: static; transform: none; }

/* 이미지 전환 scale 애니메이션 (opacity는 Slick fade가 담당, 시간 350ms 통일) */
@keyframes photoScale {
  from { transform: scale(0.96); }
  to { transform: scale(1); }
}
.goods-hero-left .photo .slick-slide .img img {
  will-change: transform;
}
.goods-hero-left .photo .slick-slide.slick-active .img img {
  animation: photoScale 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 이미지 좌/우 화살표 — MUI FAB 스타일 */
.photo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e4e4e7;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.12), 0 6px 10px 0 rgba(0,0,0,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s, box-shadow .15s, background .15s;
  padding: 0;
  color: #71717a;
}
.photo-arrow:hover {
  background: #fff;
  color: #18181b;
  box-shadow: 0 6px 12px -2px rgba(0,0,0,.15), 0 8px 16px 0 rgba(0,0,0,.08);
}
.photo-arrow:active {
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.photo-arrow.slick-prev { left: -12px; }
.photo-arrow.slick-next { right: -12px; }
.photo-arrow::before { display: none; }

/* 색상 도트 인디케이터 — pill 확장 + opacity */
.photo-indicators { text-align: center; margin-top: 14px; }
.photo-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 8px; }
.photo-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dot-color, #ccc);
  border: 2px solid #e4e4e7;
  cursor: pointer;
  transition: opacity .2s, border-color .2s, box-shadow .2s;
  opacity: 0.45;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.photo-dot:hover { opacity: 0.75; border-color: #a1a1aa; }
.photo-dot.active {
  opacity: 1;
  border-color: #1e3a5f;
  box-shadow: 0 0 0 2px rgba(54,23,206,.2);
}

/* 메타 영역: 카운터 + 색상 라벨 */
.photo-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.photo-counter {
  font-size: 12px;
  color: #a1a1aa;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.photo-color-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 20px;
  font-size: 12px;
  color: #52525b;
  font-weight: 500;
  transition: opacity .2s;
}
.goods-summary--v2 .goods-tab { margin-top: 30px; margin-bottom: 0; max-width: 100%; }
.goods-summary--v2 .goods-tab ul { max-width: 100%; }
.goods-summary--v2 .tab-content { max-width: 100%; }

/* === 시세흐름 === */
.price-trend-wrap {max-width:720px; margin:30px auto 60px; padding:0 16px;}
.price-trend-header {margin-bottom:24px;}
.price-trend-header h2 {font-size:22px; font-weight:700; color:#222; margin:0 0 6px;}
.price-trend-desc {font-size:14px; color:#888; margin:0;}
.price-trend-controls {display:flex; align-items:flex-end; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.price-trend-select-wrap {flex:1; min-width:200px;}
.price-trend-select-wrap label {display:block; font-size:12px; color:#888; margin-bottom:4px;}
.price-trend-select {width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; color:#222; background:#fff; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23999'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center;}
.price-trend-tabs {display:flex; gap:6px;}
.pt-tab {padding:8px 16px; border:1px solid #e0e0e0; border-radius:20px; background:#fff; font-size:13px; color:#666; cursor:pointer; transition:all 0.15s;}
.pt-tab:hover {border-color:#ccc; background:#f9f9f9;}
.pt-tab.active {background:#1e3a5f; color:#fff; border-color:#1e3a5f;}
.price-trend-current {background:#f8f9ff; border:1px solid #e8ecff; border-radius:12px; padding:20px; margin-bottom:16px; text-align:center;}
.pt-current-label {font-size:13px; color:#888; margin-bottom:6px;}
.pt-current-gaip {display:inline-block; background:#1e3a5f; color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; margin-left:4px;}
.pt-current-price {font-size:28px; font-weight:800; color:#222; margin-bottom:4px;}
.pt-current-device {font-size:13px; color:#888;}
.price-trend-period {display:flex; gap:6px; margin-bottom:16px;}
.pt-period {padding:6px 14px; border:1px solid #e0e0e0; border-radius:6px; background:#fff; font-size:12px; color:#666; cursor:pointer; transition:all 0.15s;}
.pt-period.active {background:#222; color:#fff; border-color:#222;}
.price-trend-chart-wrap {position:relative; background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; margin-bottom:24px; min-height:280px;}
.pt-chart-empty {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#aaa; font-size:14px; text-align:center;}
.price-trend-table-wrap h3 {font-size:15px; font-weight:600; color:#222; margin:0 0 10px;}
.price-trend-table {width:100%; border-collapse:collapse;}
.price-trend-table th {background:#f8f9fa; padding:10px 12px; font-size:12px; color:#888; font-weight:500; text-align:left; border-bottom:1px solid #eee;}
.price-trend-table td {padding:10px 12px; font-size:13px; color:#444; border-bottom:1px solid #f5f5f5;}
.price-trend-table td strong {color:#222; font-weight:700;}
@media (max-width:768px){
    .price-trend-wrap {padding:0 12px; margin-top:20px;}
    .price-trend-controls {flex-direction:row; gap:8px; align-items:flex-end; flex-wrap:nowrap;}
    .price-trend-select-wrap {flex:1; min-width:0;}
    .price-trend-select-wrap label {display:none;}
    .price-trend-select {padding:8px 28px 8px 10px; font-size:13px;}
    .price-trend-tabs {width:auto; gap:4px; flex-shrink:0;}
    .pt-tab {padding:6px 10px; font-size:12px;}
    .pt-current-price {font-size:24px;}
}

/* 임베드 모드 (상품 상세 등에 삽입 시) — 길이 ~50% 축소 */
.pt-embed {max-width:none; margin:8px 0 16px; padding:0;}
.pt-embed .price-trend-controls {margin-bottom:10px; gap:0;}
.pt-embed .price-trend-tabs {width:100%; justify-content:flex-start; gap:4px;}
.pt-embed .pt-tab {padding:6px 12px; font-size:12px;}
.pt-embed .price-trend-current {padding:12px 14px; margin-bottom:10px; border-radius:8px; text-align:left;}
.pt-embed .pt-current-label {font-size:12px; margin-bottom:2px;}
.pt-embed .pt-current-gaip {display:none;}
.pt-embed .pt-current-price {font-size:22px;}
.pt-embed .pt-current-device {font-size:12px;}
.pt-embed .price-trend-chart-wrap {padding:8px; margin-bottom:12px; min-height:160px; border-radius:8px;}
.pt-embed .price-trend-table-wrap h3 {font-size:13px; margin:0 0 6px; color:#666;}
.pt-embed .pt-embed-period {font-size:11px; color:#aaa; font-weight:400;}
.pt-embed .price-trend-table th {padding:6px 8px; font-size:11px;}
.pt-embed .price-trend-table td {padding:6px 8px; font-size:12px;}
.pt-embed .pt-embed-more {display:block; text-align:right; padding:10px 0 4px; font-size:12px; color:#1e3a5f; text-decoration:none; font-weight:500;}
.pt-embed .pt-embed-more:hover {text-decoration:underline;}
@media (max-width:768px){
    .pt-embed .price-trend-current {padding:10px 12px;}
    .pt-embed .pt-current-price {font-size:20px;}
    .pt-embed .price-trend-chart-wrap {min-height:140px; padding:6px;}
}