/* EXN 상품카드 B-2(조건 칸형) · 목록 카드(.pc2)와 홈 추천 카드(.pc2h)
   항목 표시/숨김은 /exn/js/card-display.js 가 상품카드설정 값으로 제어한다. */

/* ── 목록 카드 ───────────────────────────────────────── */
.content_card_item.pc2{display:flex;flex-direction:column;justify-self:stretch;box-sizing:border-box;gap:12px;padding:18px;border:1px solid #e4e8f0;border-radius:20px;background:#fff;color:#1b2436;text-align:left}
.content_card_item.pc2:hover{border-color:#c3cdf0}
.content_card_item.pc2:focus-visible{outline:3px solid #7f95ee;outline-offset:2px}
.content_card_item.pc2 .pc2-media{position:relative;display:flex;align-items:center;justify-content:center;height:188px;margin:0;padding:0;border-radius:14px;background:#f5f7fb}
.content_card_item.pc2 .pc2-media>img{width:auto;height:170px;max-width:86%;max-height:170px;object-fit:contain}
.content_card_item.pc2 .content_card_company_logo_wrap{position:absolute;left:10px;top:10px;width:auto;display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 6px;border:1px solid #e4e8f0;border-radius:9px;background:#fff}
.content_card_item.pc2 .content_card_company_logo_wrap img{position:static;width:22px;height:18px;max-width:none;max-height:none;object-fit:contain}
.content_card_item.pc2 .content_card_color_wrap{position:absolute;left:0;right:0;top:auto;bottom:10px;transform:none;display:flex;flex-direction:row;justify-content:center;gap:6px}
.content_card_item.pc2 .content_card_color{width:12px;height:12px;border-radius:50%}

.content_card_item.pc2 .pc2-head{display:flex;flex-direction:column;gap:8px;min-width:0}
.content_card_item.pc2 .pc2-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.content_card_item.pc2 .content_card_model_title{font-size:11px;line-height:1.4;color:#6b7588}
.content_card_item.pc2 .content_card_modelname{height:auto;min-height:0;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:#1b2436;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content_card_item.pc2 .content_card_Capacity_wrap{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:3px;border-radius:10px;background:#f1f3f7}
.content_card_item.pc2 .content_card_Capacity_wrap>.content_card_Capacity{flex:1 1 auto;min-width:0;padding:5px 6px;border-radius:8px;background:#fff!important;color:#1b2436!important;font-size:12px;font-weight:800;line-height:1.4;text-align:center;box-shadow:0 1px 2px rgba(27,36,54,.12)}
.content_card_item.pc2 .content_card_Capacity_wrap>.content_card_Capacity.grayscale{background:transparent!important;color:#6b7588!important;font-weight:500;box-shadow:none;filter:none;opacity:1}

.content_card_item.pc2 .pc2-cells{display:flex;flex-wrap:wrap;gap:6px}
.content_card_item.pc2 .pc2-cell{flex:1 1 40%;min-width:0;display:flex;flex-direction:column;gap:1px;padding:8px 10px;border:1px solid #e9edf4;border-radius:10px}
.content_card_item.pc2 .pc2-cell>span{font-size:11px;line-height:1.4;color:#6b7588}
.content_card_item.pc2 .pc2-cell>strong{font-size:13px;font-weight:700;line-height:1.4;color:#1b2436;overflow-wrap:anywhere}
.content_card_item.pc2 .pc2-cell>small{font-size:11.5px;font-weight:500;line-height:1.4;color:#4a5468}
.content_card_item.pc2 .pc2-cell-plan em{display:block;font-style:normal}
.content_card_item.pc2 .pc2-cell-plan i{display:block;font-style:normal;font-weight:500;color:#4a5468}

.content_card_item.pc2 .pc2-price{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid #d6dffb;border-radius:14px;background:#eef2ff;color:#18266a}
.content_card_item.pc2 .pc2-price-top{display:flex;align-items:center;gap:8px;min-height:20px}
.content_card_item.pc2 .pc2-price-label{font-size:12px;font-weight:700;color:#3c4a75}
.content_card_item.pc2 .pc2-rate{margin-left:auto;padding:2px 8px;border-radius:999px;background:#d92d2d;color:#fff;font-size:12px;font-weight:800;line-height:1.5;white-space:nowrap}
.content_card_item.pc2 .pc2-price-value{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#18266a}
.content_card_item.pc2 .pc2-price-value small{margin-left:2px;font-size:15px;font-weight:700;letter-spacing:0}
.content_card_item.pc2 .pc2-calc{display:flex;flex-direction:column;gap:3px;padding-top:8px;border-top:1px solid #d6dffb;font-size:12.5px;line-height:1.5;color:#55607a}
.content_card_item.pc2 .pc2-calc>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px}

.content_card_item.pc2 .pc2-extra,.home-phone-card.pc2h .home-extra{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;line-height:1.4}
.pc2-bonus,.pc2-delivery{padding:5px 10px;border-radius:8px;font-weight:700}
.pc2-bonus{background:#fff3d1;color:#7a4b00}
.pc2-delivery{background:#e6f4ec;color:#17603a}

.content_card_item.pc2 .exn-card-action{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:auto;padding:0 10px;border-radius:12px;background:#18266a;color:#fff;font-size:14.5px;font-weight:800}
.content_card_item.pc2:hover .exn-card-action{background:#101b52}

@media (max-width:760px){
 .content_card_item.pc2{gap:8px;padding:12px;border-radius:16px}
 .content_card_item.pc2 .pc2-media{height:116px;border-radius:12px}
 .content_card_item.pc2 .pc2-media>img{height:104px;max-height:104px}
 .content_card_item.pc2 .content_card_company_logo_wrap{left:6px;top:6px;gap:3px;padding:3px 4px;border-radius:7px}
 .content_card_item.pc2 .content_card_company_logo_wrap img{width:18px;height:15px}
 .content_card_item.pc2 .content_card_color_wrap{bottom:6px;gap:4px}
 .content_card_item.pc2 .content_card_color{width:9px;height:9px}
 .content_card_item.pc2 .pc2-head{gap:6px}
 .content_card_item.pc2 .content_card_modelname{font-size:15.5px;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .content_card_item.pc2 .content_card_Capacity_wrap{padding:2px;border-radius:8px}
 .content_card_item.pc2 .content_card_Capacity_wrap>.content_card_Capacity{padding:3px 4px;border-radius:6px;font-size:10.5px}
 .content_card_item.pc2 .pc2-unit{display:none}
 .content_card_item.pc2 .pc2-cells{gap:1px 5px;font-size:11.5px;line-height:1.5;color:#4a5468}
 .content_card_item.pc2 .pc2-cell{flex:0 1 auto;flex-direction:row;flex-wrap:wrap;gap:0 4px;padding:0;border:0;border-radius:0}
 .content_card_item.pc2 .pc2-cell>span{display:none}
 .content_card_item.pc2 .pc2-cell>strong,.content_card_item.pc2 .pc2-cell>small{font-size:11.5px;font-weight:500;color:#4a5468}
 .content_card_item.pc2 .pc2-cell[data-card-field="carrier"]>strong{font-weight:800;color:#1b2436}
 .content_card_item.pc2 .pc2-cell-plan{flex-basis:100%}
 .content_card_item.pc2 .pc2-cell-plan i{color:#6b7588}
 .content_card_item.pc2 .pc2-price{gap:3px;padding:9px 10px;border-radius:10px}
 .content_card_item.pc2 .pc2-price-top{flex-direction:row-reverse;justify-content:flex-end;gap:6px;min-height:0}
 .content_card_item.pc2 .pc2-price-label{font-size:10.5px}
 .content_card_item.pc2 .pc2-rate{margin-left:0;padding:1px 6px;font-size:10.5px}
 .content_card_item.pc2 .pc2-price-value{font-size:19px}
 .content_card_item.pc2 .pc2-price-value small{font-size:12px}
 .content_card_item.pc2 .pc2-calc{gap:1px;padding-top:5px;font-size:10.5px;letter-spacing:-.03em}
 .content_card_item.pc2 .pc2-calc>div{gap:0 4px}
 .content_card_item.pc2 .pc2-calc>div>span:last-child{margin-left:auto}
 .content_card_item.pc2 .pc2-extra{gap:2px 8px;font-size:11.5px}
 .content_card_item.pc2 .pc2-bonus,.content_card_item.pc2 .pc2-delivery{padding:0;background:none}
 .content_card_item.pc2 .exn-card-action{min-height:44px;border-radius:10px;font-size:13px}
}

/* ── 홈 추천 카드 ─────────────────────────────────────── */
.home-phone-card.pc2h{gap:10px;padding:16px;border:1px solid #e4e8f0;border-radius:18px;color:#1b2436}
.home-phone-card.pc2h:hover{border-color:#c3cdf0}
.home-phone-card.pc2h .home-product-photo{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:150px;border-radius:12px;background:#f5f7fb}
.home-phone-card.pc2h .home-product-image{display:block;width:auto;height:136px;max-width:86%;margin:0;object-fit:contain;mix-blend-mode:multiply}
.home-phone-card.pc2h .home-marks{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.home-phone-card.pc2h .home-rank{position:static;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:30px;height:30px;padding:0 6px;border-radius:9px;background:#18266a;color:#fff;font-size:14px;font-weight:800;font-style:normal;line-height:1}
.home-phone-card.pc2h .home-product-carrier-logo{position:static;width:22px;height:22px;margin:0;padding:3px;border-radius:6px;background:#fff;box-sizing:content-box;object-fit:contain;object-position:center}
.home-phone-card.pc2h .home-card-code{margin:0;font-size:11px;line-height:1.4;color:#6b7588}
.home-phone-card.pc2h .home-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.home-phone-card.pc2h .home-title h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
.home-phone-card.pc2h .home-cap{padding:2px 7px;border-radius:7px;background:#f1f3f7;color:#1b2436;font-size:11px;font-weight:800;line-height:1.5}
.home-phone-card.pc2h .home-condition{display:flex;flex-wrap:wrap;gap:2px 6px;margin:0;font-size:12px;line-height:1.5;color:#4a5468}
.home-phone-card.pc2h .home-condition>span{margin-right:0}
.home-phone-card.pc2h .home-cond-carrier{font-weight:800;color:#1b2436}
.home-phone-card.pc2h .home-condition small{font-size:inherit;font-weight:700;color:#1b2436}
.home-phone-card.pc2h .home-card-colors{margin:0}
.home-phone-card.pc2h .home-price-panel{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid #d6dffb;border-radius:12px;background:#eef2ff;color:#18266a}
.home-phone-card.pc2h .home-amount{margin-top:0;gap:1px}
.home-phone-card.pc2h .home-amount>span{font-size:11px;font-weight:700;color:#3c4a75}
.home-phone-card.pc2h .home-amount strong{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:#18266a}
.home-phone-card.pc2h .home-prow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 6px;font-size:12px;line-height:1.5;color:#55607a}
.home-phone-card.pc2h .home-prow b{font-weight:500}
.home-phone-card.pc2h .home-prow.is-strong{font-size:12.5px}
.home-phone-card.pc2h .home-prow.is-strong b{font-weight:800;color:#18266a}
.home-phone-card.pc2h .home-rate{align-self:flex-start;padding:1px 7px;border-radius:999px;background:#d92d2d;color:#fff;font-size:11.5px;font-weight:800;line-height:1.5}
.home-phone-card.pc2h .home-plan{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 6px;margin:0;font-size:12px;line-height:1.5;color:#6b7588}
.home-phone-card.pc2h .home-plan p{margin:0}
.home-phone-card.pc2h .home-extra{font-size:11.5px}
.home-phone-card.pc2h .home-extra>span{padding:4px 9px}
.home-phone-card.pc2h .home-card-link{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:auto;padding:0 8px;border-top:0;border-radius:10px;background:#18266a;color:#fff;font-size:13px;font-weight:800;line-height:1.4}
.home-phone-card.pc2h:hover .home-card-link{background:#101b52}
@media (max-width:760px){
 .home-phone-card.pc2h{gap:8px;padding:13px}
 .home-phone-card.pc2h .home-product-photo{height:118px}
 .home-phone-card.pc2h .home-product-image{height:106px}
 .home-phone-card.pc2h .home-title h3{font-size:16px}
 .home-phone-card.pc2h .home-price-panel{padding:10px}
}

/* ── 가로형(한 줄 목록형) ─────────────────────────────────
   상품카드설정의 카드 형태가 가로형이면 card-display.js 가 <html> 에 pcl-list-h / pcl-home_support-h / pcl-home_price-h 를 붙인다.
   마크업은 세로형과 같고 배치만 바꾸므로, 설정이 바뀌면 다시 그리지 않고 바로 전환된다. */
.content_card_item.pc2 .pc2-long{display:inline}

/* 가로형은 사진이 작아 선택된 통신사 로고만 보여 준다 */
html.pcl-list-h .content_card_container>.pc2 .content_card_company_logo.grayscale{display:none}

/* 목록 · PC: 사진 | 이름·용량·혜택 | 조건 칸 | 가격 | 버튼 */
@media (min-width:760.01px){
 html.pcl-list-h .content_card_container{grid-template-columns:minmax(0,1fr);gap:14px}
 html.pcl-list-h .content_card_container>.content_card_item.pc2{display:grid;grid-template-columns:124px minmax(0,232px) minmax(0,1fr) minmax(0,376px) 128px;grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);grid-template-areas:"media . cells price action" "media head cells price action" "media extra cells price action" "media . cells price action";column-gap:18px;row-gap:0;align-items:center;padding:14px 18px 14px 14px;border-radius:18px}
 html.pcl-list-h .content_card_container>.content_card_item.pc2:hover{transform:none}
 html.pcl-list-h .content_card_container>.pc2 .pc2-media{grid-area:media;align-self:stretch;width:124px;height:auto;min-height:124px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-media>img{height:110px;max-height:110px;max-width:90%}
 html.pcl-list-h .content_card_container>.pc2 .content_card_company_logo_wrap{left:7px;top:7px;gap:3px;padding:4px 5px;border-radius:8px}
 html.pcl-list-h .content_card_container>.pc2 .content_card_company_logo_wrap img{width:19px;height:16px}
 html.pcl-list-h .content_card_container>.pc2 .content_card_color_wrap{bottom:7px;gap:5px}
 html.pcl-list-h .content_card_container>.pc2 .content_card_color{width:10px;height:10px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-head{grid-area:head}
 html.pcl-list-h .content_card_container>.pc2 .pc2-extra{grid-area:extra;margin-top:8px;font-size:11.5px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-extra>span{padding:4px 9px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-cells{grid-area:cells}
 html.pcl-list-h .content_card_container>.pc2 .pc2-price{grid-area:price;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"top calc" "value calc";column-gap:14px;row-gap:3px;align-items:center;padding:12px 14px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-price-top{grid-area:top;flex-direction:row-reverse;justify-content:flex-end;gap:6px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-rate{margin-left:0}
 html.pcl-list-h .content_card_container>.pc2 .pc2-price-value{grid-area:value;font-size:26px;white-space:nowrap}
 html.pcl-list-h .content_card_container>.pc2 .pc2-calc{grid-area:calc;gap:2px;padding:0 0 0 14px;border-top:0;border-left:1px solid #d6dffb;font-size:12px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-calc>div{flex-wrap:nowrap;white-space:nowrap}
 html.pcl-list-h .content_card_container>.pc2 .exn-card-action{grid-area:action;align-self:center;margin-top:0;font-size:14px}
}
/* 목록 · 좁은 PC(태블릿): 조건 칸을 이름 아래로 내린다 */
@media (min-width:760.01px) and (max-width:1240px){
 html.pcl-list-h .content_card_container>.content_card_item.pc2{grid-template-columns:110px minmax(0,1fr) minmax(0,292px) 112px;grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr);grid-template-areas:"media . price action" "media head price action" "media cells price action" "media extra price action" "media . price action";column-gap:14px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-media{width:110px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-cells{margin-top:8px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-price-value{font-size:23px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-price{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "value" "calc"}
 html.pcl-list-h .content_card_container>.pc2 .pc2-calc{margin-top:4px;padding:7px 0 0;border-left:0;border-top:1px solid #d6dffb}
}
/* 목록 · 모바일: 사진 | 이름·용량·조건, 아래에 가격 줄(버튼 포함) */
@media (max-width:760px){
 html.pcl-list-h .content_card_container{grid-template-columns:minmax(0,1fr);gap:10px}
 html.pcl-list-h .content_card_container>.content_card_item.pc2{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr) auto auto;grid-template-areas:"media ." "media head" "media cells" "media ." "price price" "extra extra";column-gap:12px;row-gap:0;align-items:start;padding:12px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-media{grid-area:media;align-self:stretch;width:88px;height:auto;min-height:96px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-media>img{height:80px;max-height:80px;max-width:92%}
 html.pcl-list-h .content_card_container>.pc2 .pc2-head{grid-area:head;gap:5px}
 html.pcl-list-h .content_card_container>.pc2 .content_card_modelname{font-size:16.5px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-unit{display:inline}
 html.pcl-list-h .content_card_container>.pc2 .pc2-cells{grid-area:cells;margin-top:5px;font-size:12px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-cell>strong,html.pcl-list-h .content_card_container>.pc2 .pc2-cell>small{font-size:12px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-cell-plan{flex-basis:auto}
 html.pcl-list-h .content_card_container>.pc2 .pc2-cell-plan em,html.pcl-list-h .content_card_container>.pc2 .pc2-cell-plan i{display:inline}
 html.pcl-list-h .content_card_container>.pc2 .pc2-cell-plan i{margin-left:4px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-price{grid-area:price;justify-content:center;gap:1px;min-height:44px;margin-top:10px;padding:9px 128px 9px 12px;border-radius:12px}
 html.pcl-list-h .content_card_container>.pc2 .pc2-price-value{font-size:21px;line-height:1.2}
 html.pcl-list-h .content_card_container>.pc2 .pc2-calc{flex-direction:row;flex-wrap:wrap;gap:0 8px;padding-top:0;border-top:0;font-size:11px;letter-spacing:0}
 html.pcl-list-h .content_card_container>.pc2 .pc2-calc>div{flex-wrap:nowrap;gap:0 4px;white-space:nowrap}
 html.pcl-list-h .content_card_container>.pc2 .pc2-calc>div>span:last-child{margin-left:0}
 /* 버튼은 가격 줄 안 오른쪽에 겹쳐 놓는다. 가격 줄이 숨겨지면(card-display.js 가 변수 지정) 한 줄을 다 쓴다. */
 html.pcl-list-h .content_card_container>.pc2 .exn-card-action{grid-row:5;grid-column:1/-1;z-index:1;justify-self:var(--pc2-action-justify,end);align-self:center;min-height:44px;margin:10px var(--pc2-action-mr,9px) 0 0;padding:0 14px;white-space:nowrap}
 html.pcl-list-h .content_card_container>.pc2 .pc2-extra{grid-area:extra;margin-top:8px}
}

/* 홈 추천 · 가로형(PC·모바일 공통): 사진 | 이름·조건·요금제, 아래에 가격 줄과 버튼 */
html.pcl-home_support-h .home-discovery .home-carousel .home-phone-slide[data-card-slide="home_support"],html.pcl-home_price-h .home-discovery .home-carousel .home-phone-slide[data-card-slide="home_price"]{width:330px;max-width:calc(100% - 28px)}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]){display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:minmax(0,1fr) repeat(6,auto) minmax(0,1fr) auto auto;column-gap:12px;row-gap:0;align-items:start;padding:14px}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"])>*{grid-column:2;margin-bottom:5px}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-product-photo{grid-column:1;grid-row:1/9;align-self:center;width:104px;height:124px;margin:0}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-product-image{height:96px}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-marks{left:6px;top:6px;gap:4px}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-rank{min-width:26px;height:26px;border-radius:8px;font-size:13px}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-product-carrier-logo{width:18px;height:18px}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-card-code{grid-row:2}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-title{grid-row:3}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-title h3{font-size:16.5px}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-condition{grid-row:4}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-card-colors{grid-row:5}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-plan{grid-row:6;justify-content:flex-start}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-extra{grid-row:7}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-price-panel{grid-column:1/-1;grid-row:9;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) repeat(4,auto) minmax(0,1fr);column-gap:12px;row-gap:0;align-items:center;margin:5px 0 0;padding:10px 12px}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-amount{grid-column:1;grid-row:1/7;align-self:stretch;justify-content:center;padding-right:12px;border-right:1px solid #d6dffb}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-amount strong{font-size:21px;white-space:nowrap}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-prow,.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-rate{grid-column:2}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-prow{font-size:11.5px;flex-wrap:nowrap;white-space:nowrap}
/* 금액 행은 있는 것만 가운데로 모이도록 자리를 정해 둔다 */
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-prow.is-strong{grid-row:2}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-prow[data-card-field="subsidy"]{grid-row:3}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-prow[data-card-field="full_price"]{grid-row:4}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-rate{grid-row:5;justify-self:end;margin-top:2px;font-size:11px}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-card-link{grid-column:1/-1;grid-row:10;min-height:42px;margin:10px 0 0}

/* ── 카드 오른쪽 위 자리(.pc2-corner: 배지 + 할인율) · 가로형 전용 ───────────
   세로형은 배지를 사진 위에, 할인율을 가격 칸 안에 보여 준다. 가로형은 사진이 작아 배지를 카드 오른쪽 위에 보여 주고,
   할인율은 배지가 있으면 그 아래, 없으면 배지 자리에 보여 준다.
   배지와 할인율은 두 곳에 모두 그려 두고(modelcard.js · home-card.js) 카드 형태에 맞는 쪽만 보이게 한다. 형태가 바뀌어도 다시 그리지 않는다.
   오른쪽 위 자리가 없는 이전 화면(새로고침 전)은 사진 위 배지·가격 칸 안 할인율을 그대로 둔다(~ 선택자). */
.pc2-corner{display:none;min-width:0;pointer-events:none}
html.pcl-list-h .content_card_container>.pc2>.pc2-corner,.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"])>.pc2-corner{display:flex;flex-direction:column;align-items:flex-end}
html.pcl-list-h .content_card_container>.pc2>.pc2-corner~.pc2-media .pb-layer,html.pcl-list-h .content_card_container>.pc2>.pc2-corner~.pc2-price .pc2-rate,.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"])>.pc2-corner~.home-product-photo .pb-layer,.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"])>.pc2-corner~.home-price-panel .home-rate{display:none}
.pc2-corner>.pc2-badge-slot{max-width:100%;min-width:0}
html.pcl-list-h .content_card_container>.pc2>.pc2-corner .pc2-rate{margin:0}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"])>.pc2-corner .home-rate{align-self:flex-end;margin:0 0 5px}
/* 배지는 한 줄로 오른쪽 정렬한다. 자리가 모자라면 문구를 말줄임한다. 아래 여백은 배지 아래에 오는 할인율과의 간격이다. */
.pc2-corner>.pc2-badge-slot .pb-layer{position:static;inset:auto;display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;margin-bottom:4px;overflow:visible;border-radius:0}
.pc2-corner>.pc2-badge-slot .pb-labels{position:static;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:5px;min-width:0}
.pc2-corner>.pc2-badge-slot .pb-layer .pb-label{flex:0 1 auto;min-width:0;padding:4px 8px;font-size:11.5px!important}
.pc2-corner>.pc2-badge-slot.pb-host .pb-layer .pb-graphic{position:static!important;flex:0 0 auto;width:auto!important;height:30px!important;max-width:none!important;max-height:none!important;translate:none}
/* 목록 · PC: 카드 오른쪽 위(가격 칸·버튼 위쪽 여백)에 띄운다 */
@media (min-width:760.01px){
 html.pcl-list-h .content_card_container>.content_card_item.pc2{position:relative}
 html.pcl-list-h .content_card_container>.pc2>.pc2-corner{position:absolute;top:7px;right:18px;max-width:520px}
}
@media (min-width:760.01px) and (max-width:1240px){
 html.pcl-list-h .content_card_container>.pc2>.pc2-corner{top:10px;max-width:400px}
}
/* 배지와 할인율이 두 줄로 쌓이면 가운데 놓인 버튼과 닿으므로 버튼을 조금 내린다. 배지나 할인율을 끄면 card-display.js 가 변수를 0 으로 둔다. */
@media (min-width:760.01px){
 html.pcl-list-h .content_card_container>.pc2:has(>.pc2-corner .pb-layer) .exn-card-action{margin-top:var(--pc2-corner-nudge,22px)}
}
/* 목록 · 모바일: 카드 맨 위 오른쪽에 한 줄을 둔다(배지·할인율이 없으면 높이 0). 이름·조건은 그 아래에서 사진과 가운데를 맞춘다. */
@media (max-width:760px){
 html.pcl-list-h .content_card_container>.content_card_item.pc2{grid-template-rows:auto minmax(0,1fr) auto auto minmax(0,1fr) auto auto;grid-template-areas:"media corner" "media ." "media head" "media cells" "media ." "price price" "extra extra"}
 html.pcl-list-h .content_card_container>.pc2>.pc2-corner{grid-area:corner;justify-self:end;max-width:100%}
 html.pcl-list-h .content_card_container>.pc2>.pc2-corner .pc2-rate{margin:0 0 5px}
 html.pcl-list-h .content_card_container>.pc2 .exn-card-action{grid-row:6}
}
/* 홈 추천 · 가로형: 카드 맨 위 오른쪽에 한 줄을 둔다(배지·할인율이 없으면 높이 0). 줄이 하나 늘어 아래 줄 번호를 하나씩 민다. */
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]){grid-template-rows:auto minmax(0,1fr) repeat(6,auto) minmax(0,1fr) auto auto}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"])>.pc2-corner{grid-column:2;grid-row:1;justify-self:end;max-width:100%;margin:0}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-product-photo{grid-row:1/10}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-card-code{grid-row:3}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-title{grid-row:4}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-condition{grid-row:5}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-card-colors{grid-row:6}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-plan{grid-row:7}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-extra{grid-row:8}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-price-panel{grid-row:10}
.home-phone-card.pc2h:is(html.pcl-home_support-h [data-card-profile="home_support"],html.pcl-home_price-h [data-card-profile="home_price"]) .home-card-link{grid-row:11}

/* ── 용량 선택(목록 카드) ─────────────────────────────────
   판매 중인 용량이 둘 이상이면 용량이 버튼으로 그려진다(modelcard.js). 누르면 구매 페이지로 가지 않고 카드 내용만 그 용량으로 바뀐다.
   「용량」 표시를 끄면 버튼도 함께 숨겨지고, 바꿔 둔 카드는 대표 용량으로 돌아간다. */
.content_card_item.pc2 .content_card_Capacity_wrap>button.content_card_Capacity{appearance:none;-webkit-appearance:none;margin:0;border:0;font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.content_card_item.pc2 .content_card_Capacity_wrap.is-selectable{cursor:default}
.content_card_item.pc2 .content_card_Capacity_wrap>button.content_card_Capacity.grayscale:hover{background:rgba(255,255,255,.65)!important;color:#1b2436!important}
.content_card_item.pc2 .content_card_Capacity_wrap>button.content_card_Capacity:focus-visible{outline:2px solid #7f95ee;outline-offset:1px}
/* 모바일: 손가락으로 누르기 쉽게 용량 칸 높이를 조금 키운다(고를 수 없는 카드도 같은 높이로 맞춘다) */
@media (max-width:760px){
 .content_card_item.pc2 .content_card_Capacity_wrap>.content_card_Capacity{display:flex;align-items:center;justify-content:center;min-height:28px}
}

/* ── 선택약정 「25% 요금할인」 줄의 위치(목록 · PC 세로형) ────────────────
   금액을 빼는 줄이 아니므로 PC 세로형에서는 가격 내역 맨 아래(추가지원금 아래)에 둔다. PC 가로형과 모바일은 지원금 줄 자리 그대로다. */
@media (min-width:760.01px){
 .content_card_item.pc2 .pc2-calc>.pc2-calc-note{order:1}
 html.pcl-list-h .content_card_container>.pc2 .pc2-calc>.pc2-calc-note{order:0}
}
