/* Sizes and spacing aligned to the designer's "국내 선불폰 충전" screens (360px frame, 16px gutters).
   Colors and the brand font are unchanged. Loaded last so it only overrides geometry and type scale. */

/* 16px gutters */
.topbar{padding:0 16px}
.hero{margin:0 16px}
.product-panel{padding:0 16px}
.bundle-intro{padding-left:0;padding-right:0}
.product-tabs{padding:0 16px}
.lower-content{padding:24px 16px 0}
.page-content{padding:0 16px 24px}

/* Page title block: Title 22 B / Body 15 R */
.page-title{padding:12px 0 24px}
.page-title h1{font-size:22px;line-height:1.3;letter-spacing:0;font-weight:700}
.page-title p{font-size:15px;line-height:1.3;letter-spacing:-.02em;margin-top:8px}

/* Fields: label Caption 13 R, value 16 R (also the size iOS needs to avoid zooming on focus), hint Caption 12 R */
.field{margin:0 0 24px}
.field>label{font-size:13px;font-weight:400;line-height:1.3;letter-spacing:-.02em;margin-bottom:8px}
.field input,.field select{height:54px;padding:0 16px;font-size:16px;line-height:1.3;letter-spacing:-.02em}
/* An unanswered required select shows its prompt in placeholder grey, not as an answer */
.field select:invalid{color:#a0a8b5}.field select option{color:var(--ink)}
.select-wrap select{padding-right:44px}
.select-wrap>.icon{top:18px;right:16px}
.field-hint{font-size:12px;line-height:1.3;letter-spacing:-.02em;margin-top:8px}
.optional{font-size:12px}

/* Main button: big fill, 54px, radius 16, Title 16 B */
.button{min-height:54px;border-radius:16px;padding:16.5px 20px;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.02em}
.card-actions .button,.device-product .button,.conversion-bar .button,.sheet-actions .button{min-height:54px;padding:16.5px 16px;font-size:16px}

/* Floating CTA area: 16px sides, 24px from the bottom */
.bottom-bar{padding:12px 16px max(24px,env(safe-area-inset-bottom))}

/* Card actions: medium button, 38px, radius 10, Title 15 SB */
.sim-list .card-actions{gap:8px}
.sim-list .card-actions .button{min-height:38px;padding:9.5px 16px;border-radius:10px;font-size:15px;font-weight:600}
.sim-list .detail-link{min-height:38px;padding:9.5px 12px;border-radius:10px;font-size:13px;font-weight:700;line-height:1.3}
/* Longer scripts keep the 38px height by stepping down to Caption 13 / 12 */
:lang(ru) .sim-list .card-actions .button,:lang(mn) .sim-list .card-actions .button,:lang(my) .sim-list .card-actions .button,:lang(km) .sim-list .card-actions .button,:lang(si) .sim-list .card-actions .button,:lang(lo) .sim-list .card-actions .button,:lang(ne) .sim-list .card-actions .button{font-size:13px;padding-left:10px;padding-right:10px}
:lang(ru) .sim-list .detail-link,:lang(mn) .sim-list .detail-link,:lang(my) .sim-list .detail-link,:lang(km) .sim-list .detail-link,:lang(si) .sim-list .detail-link,:lang(lo) .sim-list .detail-link,:lang(ne) .sim-list .detail-link{font-size:12px;padding-left:8px;padding-right:8px}
:lang(ru) .sim-list .card-actions .icon,:lang(mn) .sim-list .card-actions .icon,:lang(my) .sim-list .card-actions .icon,:lang(km) .sim-list .card-actions .icon,:lang(si) .sim-list .card-actions .icon,:lang(lo) .sim-list .card-actions .icon,:lang(ne) .sim-list .card-actions .icon{display:none}

/* Chips: medium button size */
.intake-option span{min-height:38px;padding:9.5px 16px;border-radius:10px;font-size:15px;font-weight:600;line-height:1.3}

/* Tabs: Title 16 B */
.filter-tabs button{font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.02em;padding:12px 12px 14px}
.tab-heading strong{font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.02em}

/* Info cards: radius 12, padding 14/12/14/16 */
.condition-block,.demo-note,.intake-note,.save-number,.selected-plan{border-radius:12px;padding:14px 12px 14px 16px}

/* Type scale: 22 page title · 18 section, card and sheet title · 16 input, plan name, main button
   · 15 body, questions, choices · 13 labels and secondary text · 12 captions (the minimum).
   Hero headlines and the large price/data numbers keep their display sizes. */
.demo-strip,.product-tab small,.product-number,.sim-list .product-number,.sim-list .speed-note,.sim-list .allowances>span,.offer-original>span,.offer-timing,.offer-saving,.tags span,.sim-list .tags span:not(.carrier),.bundle-option-top .tags>span:not(.carrier),.offer-price-label,.price>span,.sim-offer .price>span,.catalog-note,.support span,.offer-benefit,.eyebrow,.bundle-intro .eyebrow,.device-maker,.device-specs span,.image-caption,.bundle-offer-conditions,.device-model-badge,.device-retail,.device-offer-terms,.language-option small,.steps li,.steps li>span,.metrics small,.metrics>div>span,.price-context,.detail-card .price-context,.sticky-summary>span,.sticky-summary strong>small,.conversion-bar[data-type=bundle] .sticky-summary strong>small,.selected-plan span,.receipt-card>span,.demo-note,.status-badge,.status-plan>span,.timeline time,.youth-data,.sim-list .youth-data,.journey li>span,footer,footer span{font-size:12px}
.quote-box p,.bundle-intro>p,.opinion-copy>strong,.opinion-copy>p,.opinion-copy>p+p,.opinion-copy>button,.sheet-description,.text-button,.review-summary>div,.receipt-card dl>div,.next-notice,.hp-consult-row>span,.selected-plan small{font-size:13px}.complete-description,.status-link,.accordions summary,.lower-content>.accordions summary,.faq summary,.support strong,.support>a,.language-option strong,.consent-subhead,.fraud-block h3,.check-row{font-size:15px}
.selected-plan strong,.receipt-card>strong,.status-plan>strong{font-size:16px}
.form-section-head h2,.sheet-header h2{font-size:18px}
.sticky-summary>strong{font-size:20px}
.complete-page h1,.status-title,.device-title-row h3{font-size:22px}