/* Airy editorial layout, warm yellow highlights, clear black typography. */
:root {
  --ink:#202020; --muted:#626262; --coral:#202020; --paper:#fff;
  --line:#deded8; --lilac:#f7f6ef; --studio-dark:#202020;
  --editorial-paper:#faf8ef; --editorial-ink:#202020; --editorial-deep:#202020;
  --editorial-mint:#fff6c2; --editorial-rule:#deded8;
  --accent-yellow:#f6dc35; --studio-shadow:none;
}
body { background:#fff; color:var(--ink); letter-spacing:-.035em; }
h1,h2,h3 { color:#202020; letter-spacing:-.055em; }
.wrap { width:min(1200px,calc(100% - 64px)); }
header { background:#fff; border-bottom:1px solid #e9e9e3; }
header > nav.wrap { height:88px; }
header .brand { padding:0; }
header .brand .brand-logo { width:94px; max-height:58px; }
header .smallbtn { background:#202020; color:#fff; border-radius:999px; padding-inline:22px; }
header .navlink[aria-current=page], header .membership-trigger:is(.is-current,[aria-expanded=true]) { color:#202020; text-decoration:underline; text-decoration-color:#e4c912; text-decoration-thickness:4px; text-underline-offset:7px; }
.membership-menu { border-radius:4px; box-shadow:0 14px 30px #0000000c; }
.membership-menu a:is(:hover,:focus-visible,[aria-current=page]) { background:#fff6c2; color:#202020; }
.btn { border-radius:999px; }
.home-opening { display:block; margin-top:28px; }
.home-opening .home-banner { border:1px solid #e4e0cd; border-radius:0; box-shadow:none; background:#f7f4df; }
.home-opening .home-banner-slide,
.home-opening .activation-banner,
.home-opening .consultation-banner,
.home-opening .membership-k-banner {
  background:radial-gradient(ellipse at 85% 20%,#f1e7aa70,transparent 65%),#f7f4df;
  color:#202020; min-height:490px;
}
.home-opening .activation-banner.activation-text-only { padding:62px 76px 76px; }
.home-opening .activation-text-only .activation-banner-copy { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); column-gap:70px; row-gap:22px; }
.home-opening .activation-text-only .activation-banner-copy h1 { font-size:clamp(34px,4.3vw,57px); line-height:1.2; font-weight:900; }
.home-opening .home-banner-slide :is(h1,h2,h3),
.home-opening .home-banner-slide :is(h1,h2) em { color:#202020; }
.home-opening .activation-banner-copy h1 em { background:linear-gradient(transparent 61%,#f6dc35 61%,#f6dc35 94%,transparent 94%); }
.home-opening .activation-banner-tag { background:#f6dc35; color:#202020; padding:8px 12px; border-radius:0; font-weight:800; }
.home-opening .activation-text-only .activation-banner-features { border-left:1px solid #bdb8a0; padding-left:30px; font-size:15px; }
.home-opening .activation-banner-features,
.home-opening .home-banner-slide p,
.home-opening .activation-banner-features strong,
.home-opening .activation-text-only .activation-banner-features strong { color:#35352f; }
.home-opening .activation-text-only .activation-banner-features > span,
.home-opening .activation-text-only .activation-banner-feature-pair > span { border-bottom-color:#d4d0bb; padding-block:16px; }
.home-opening .activation-banner-buttons { gap:10px; }
.home-opening .activation-banner-buttons .activation-banner-cta { border-radius:999px; min-height:46px; padding:12px 20px; }
.home-opening .activation-banner-buttons .activation-banner-channel { background:#202020; color:#fff; }
.home-opening .activation-banner-buttons .activation-banner-channel:hover { background:#454545; }
.home-opening .home-banner-arrow { background:#ffffffa6; color:#202020; border:1px solid #c8c5b7; width:30px; height:30px; border-radius:50%; font-size:20px; }
.home-opening .home-banner-dots { background:transparent; }
.home-opening .home-banner-dots button span { background:#bbb8a9; }
.home-opening .home-banner-dots button[aria-current=true] span { background:#202020; }
.home-opening .quick { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto; gap:0; margin-top:0; border:1px solid #deded8; border-top:0; }
.home-opening .quick a,
.home-opening .quick a:nth-child(2),
.home-opening .quick a:nth-child(3) { display:grid; grid-template-columns:32px 1fr auto; gap:8px 14px; align-items:center; padding:25px 22px; border:0; border-right:1px solid #deded8; border-radius:0; background:#fff; color:#202020; }
.home-opening .quick a:last-child { border-right:0; }
.home-opening .quick a:hover { background:#fffbed; }
.home-opening .quick .ico { grid-column:1; grid-row:1 / span 2; margin:0; font-size:28px; }
.home-opening .quick b { grid-column:2; font-size:15px; }
.home-opening .quick small { grid-column:2; color:#626262; font-size:12px; }
.home-opening .quick .arrow { grid-column:3; grid-row:1 / span 2; }
:is(#plans,#how) { padding-top:90px; padding-bottom:90px; }
:is(#plans,#how) h2 { font-size:clamp(28px,3.3vw,42px); font-weight:850; }
#plans .section-top { display:block; text-align:center; margin-bottom:34px; }
#plans .section-top :is(h2,p) { max-width:none; }
#plans .section-top p { margin:16px 0 0; color:#626262; }
:is(#plans,#how) .tabs { justify-content:center; gap:14px; border:0; margin-bottom:34px; }
:is(#plans,#how) .tabs .tab { border:1px solid #d7d7d1; background:#fff; color:#535353; border-radius:999px; padding:12px 24px; }
:is(#plans,#how) .tabs .tab[aria-selected=true] { background:#202020; border-color:#202020; color:#fff; box-shadow:0 4px 0 #f6dc35; }
:is(#plans,#how) .plans .plan { border:1px solid #deded8; border-top:4px solid #f6dc35; border-radius:8px; box-shadow:none; background:#fff; }
:is(#plans,#how) .plans .plan :is(.badge,.plan-ribbon) { background:#fff6c2; color:#39331b; border-color:#e9dfaa; }
:is(#plans,#how) .plans .plan .btn { background:#202020; border-color:#202020; color:#fff; }
:is(#plans,#how) .plans .plan .btn:hover { background:#454545; border-color:#454545; }
:is(#plans,#how) .plans .plan .plan-price { background:#f7f6ef; }
:is(#plans,#how) .plans .plan .plan-price strong, .esim-benefit h3 em { color:#202020; }
:is(#plans,#how) .plans .esim-benefit .esim-benefit-visual { background:#f8f6e8; }
#how { background-color:#faf9f4; background-image:linear-gradient(#d8d6cb16 1px,transparent 1px),linear-gradient(90deg,#d8d6cb16 1px,transparent 1px); background-size:8px 8px; }
#how > .wrap > h2 { text-align:center; margin:0 0 36px; }
.home-opening :is(.consultation-channeltalk,.membership-banner-link) { background:#202020; color:#fff; }
.home-opening :is(.consultation-channeltalk,.membership-banner-link):hover { background:#454545; }
.home-opening .consultation-banner-card { background:#ffffffbf; border:1px solid #d8d4c0; border-radius:6px; }
.home-opening .membership-network-label { background:#f6dc35; color:#202020; border-color:#f6dc35; }
body .page-intro,
body .pricing-page .page-intro,
body :is(.guide-activation,.guide-usim,.guide-faq,.guide-membership) .page-intro { background:#f7f4df; border:0; border-bottom:4px solid #f6dc35; border-left:0; border-radius:0; padding:48px; margin-top:26px; }
body .page-intro :is(h1,p),
body .pricing-page .page-intro :is(h1,p),
body :is(.guide-activation,.guide-usim,.guide-faq,.guide-membership) .page-intro :is(h1,p) { color:#202020; }
body .page-intro p { color:#53534b; }
.page-intro .title-consult-actions .title-channel { background:#202020; color:#fff; border-color:#202020; }
.page-intro .title-consult-actions .title-channel:hover { background:#454545; }
.page-intro .title-consult-actions .btn { border-radius:999px; }
body .page-body .detail-block { margin-top:50px; }
:is(.step,.activation-channel-card,.membership-store-card,.membership-app-step,.detail-note,.table-scroll) { border-radius:6px; box-shadow:none; }
.faq details { border-radius:4px; border-color:#deded8; background:#fff; }
.faq details[open] { border-left:4px solid #e5cc2b; }
.info-table th { background:#f7f6ef; }
.detail-note { background:#faf8ef; border-left:3px solid #e5cc2b; }
.how,.membership-app-stage { background-color:#faf9f4; }
#contact .contact:has(> .membership-help-actions) { background:#f7f4df; border:0; border-top:3px solid #f6dc35; border-radius:0; padding:48px; margin-block:20px 55px; color:#202020; }
#contact .contact:has(> .membership-help-actions) p { color:#3f3b28; }
#contact .contact > .membership-help-actions .btn { border:1px solid #202020; border-radius:999px; background:#202020; color:#fff; min-height:68px; }
#contact .contact > .membership-help-actions .kakao-contact { background:#202020; border-color:#202020; color:#fff; }
#contact .contact > .membership-help-actions .membership-help-channel { background:#202020; border-color:#202020; color:#fff; }
#contact .contact > .membership-help-actions .btn:hover { background:#454545; color:#fff; border-color:#454545; box-shadow:none; }
footer.business-footer { background:#202020; color:#d4d4d0; border-color:#202020; }
header .mobile-nav-toggle { background:#fff; border-color:#d7d7d1; color:#202020; }
header .mobile-menu-dialog { border-color:#deded8; color:#202020; background:#fff; }
.mobile-menu-heading { background:#faf8ef; }
.mobilebar { background:#fffffffa; border-color:#deded8; }
@media(min-width:1001px) {
 .pricing-page #plans .section-top { text-align:left; }
}
@media(max-width:1100px) { header > nav.wrap { height:70px; } }
@media(max-width:800px) {
 .wrap { width:calc(100% - 32px); }
 .home-opening .home-banner-slide { min-height:420px; }
 .home-opening .activation-banner.activation-text-only { padding:35px 40px 64px; }
 .home-opening .activation-text-only .activation-banner-copy { column-gap:30px; }
 .home-opening .activation-text-only .activation-banner-copy h1 { font-size:35px; }
 .home-opening .quick a,.home-opening .quick a:nth-child(2),.home-opening .quick a:nth-child(3) { padding:18px 12px; grid-template-columns:1fr auto; gap:7px; }
 .home-opening .quick .ico { grid-row:auto; grid-column:1; font-size:22px; }
 .home-opening .quick :is(b,small) { grid-column:1; }
 .home-opening .quick .arrow { grid-column:2; }
 :is(#plans,#how) { padding-block:55px; }
 #plans .section-top { text-align:left; }
 #plans .section-top p { font-size:14px; }
 #contact .contact:has(> .membership-help-actions) { padding:30px 22px; }
 body .page-intro,body .pricing-page .page-intro,body :is(.guide-activation,.guide-usim,.guide-faq,.guide-membership) .page-intro { padding:30px 24px; }
}
@media(max-width:650px) {
 .home-opening { margin-top:16px; }
 .home-opening .activation-text-only .activation-banner-copy h1 { font-size:32px; }
 .home-opening .activation-text-only .activation-banner-features { border-left:0; padding-left:0; font-size:13px; }
 .home-opening .activation-text-only .activation-banner-features > span,.home-opening .activation-text-only .activation-banner-feature-pair > span { padding-block:10px; }
 .home-opening .activation-banner-buttons .activation-banner-cta { font-size:12px; padding:10px 14px; }
 :is(#plans,#how) .tabs { gap:8px; justify-content:flex-start; }
 :is(#plans,#how) .tabs .tab { padding:10px 12px; font-size:12px; }
 .home-opening .quick b { font-size:13px; line-height:1.5; }
 .home-opening .quick small { font-size:11px; line-height:1.6; }
 #contact .contact > .membership-help-actions .btn { min-height:58px; }
}
/* Carry the same neutral surfaces through the service pages. */
.guide-usim #usim,
.guide-usim .usim-options-frame,
.guide-membership .membership-usim-card,
.membership-help { background:#faf8ef; border-color:#deded8; }
.guide-usim #usim :is(p,.pin),
.guide-usim .usim-frame figcaption,
.guide-usim .usim-ready-actions .btn,
.guide-membership .membership-usim-card h2 { color:#202020; }
.guide-usim #usim .usim-guide-button,
.guide-membership .membership-usim-card .membership-usim-link { background:#202020; color:#fff; border-color:#202020; }
.guide-usim .usim-frame figcaption,
.guide-usim .usim-ready-actions .btn,
.guide-usim .usim-ready-actions .btn:nth-child(2),
.guide-faq details[open] { background:#f7f6ef; border-color:#deded8; }
.guide-usim .usim-ready-actions .btn:hover { background:#fff6c2; }
.activation-channel-card .btn[href="https://ntelecom.channel.io/home"],
.membership-help-channel { background:#202020; border-color:#202020; color:#fff; }
.activation-channel-card .btn[href="https://ntelecom.channel.io/home"]:hover,
.membership-help-channel:hover { background:#454545; border-color:#454545; color:#fff; }
.guide-activation .activation-comparison { border-color:#deded8; border-radius:6px; }
.guide-activation .activation-comparison-note { background:#faf8ef; border-color:#deded8; }
.guide-usim .wrap.usim-image-guides { background:#faf8ef; border-color:#deded8; border-radius:6px; }
.guide-usim .usim-image-guides .usim-frame { border-color:#deded8; border-radius:4px; }
.guide-usim .usim-image-guides .usim-frame figcaption { background:#f7f6ef; color:#202020; border-color:#deded8; }
@media(max-width:650px) {
 .home-opening .activation-text-only .activation-banner-copy { grid-template-columns:minmax(0,1fr); gap:18px; }
 .home-opening .activation-text-only .activation-banner-features { grid-column:1; grid-row:3; }
 .home-opening .activation-text-only .activation-banner-buttons { grid-column:1; grid-row:4; }
}
/* Separate shortcut cards beside the desktop banner. */
.home-opening .quick { border:0; gap:14px; }
.home-opening .quick a,
.home-opening .quick a:nth-child(2),
.home-opening .quick a:nth-child(3) { border:1px solid #deded8; border-radius:6px; background:#fff; }
@media(min-width:1001px) {
 .home-opening { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; align-items:stretch; }
 .home-opening .quick { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); margin:0; }
 .home-opening .quick a,
 .home-opening .quick a:nth-child(2),
 .home-opening .quick a:nth-child(3) { grid-template-columns:30px minmax(0,1fr) auto; padding:22px 18px; gap:9px 12px; align-content:center; }
 .home-opening .quick b { font-size:15px; line-height:1.5; }
 .home-opening .quick small { font-size:12px; line-height:1.65; }
 .home-opening .activation-banner.activation-text-only { padding:40px 44px 66px; }
 .home-opening .activation-text-only .activation-banner-copy { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); column-gap:26px; }
 .home-opening .activation-text-only .activation-banner-copy h1 { font-size:clamp(30px,3.1vw,43px); }
 .home-opening .activation-text-only .activation-banner-features { padding-left:22px; font-size:13px; }
 .home-opening .activation-banner-buttons .activation-banner-cta { padding:10px 12px; font-size:12px; }
 .home-opening .home-banner-slide { min-height:490px; }
}
@media(max-width:650px) { .home-opening .quick { gap:8px; margin-top:10px; } }
/* Apply the same highlight to every shortcut, including keyboard focus. */
.home-opening .quick > a:is(:hover, :focus-visible) {
  background:#fffbed;
  border-color:#e4cf66;
  color:#202020;
}
/* Give each mobile shortcut the same icon row, independent of text wrapping. */
@media(max-width:800px) {
 .home-opening .quick a,
 .home-opening .quick a:nth-child(2),
 .home-opening .quick a:nth-child(3) {
   grid-template-rows:26px auto;
   align-content:start;
   align-items:start;
 }
 .home-opening .quick a > .ico {
   grid-column:1; grid-row:1;
   display:flex; align-items:center;
   height:26px; margin:0; line-height:1;
 }
 .home-opening .quick a > .arrow {
   grid-column:2; grid-row:1;
   align-self:center; line-height:1;
 }
 .home-opening .quick a > span:not(.ico):not(.arrow) {
   grid-column:1 / -1; grid-row:2;
 }
}
/* Stack the mobile shortcuts and keep each title and description together. */
@media(max-width:800px) {
 .home-opening .quick {
   grid-template-columns:minmax(0,1fr);
   grid-template-rows:auto;
   gap:10px;
   margin-top:12px;
 }
 .home-opening .quick a,
 .home-opening .quick a:nth-child(2),
 .home-opening .quick a:nth-child(3) {
   grid-template-columns:26px minmax(0,1fr) 16px;
   grid-template-rows:auto;
   align-items:center;
   align-content:center;
   gap:12px;
   padding:18px 16px;
 }
 .home-opening .quick a > .ico {
   grid-column:1; grid-row:1;
   align-self:center;
   font-size:22px;
 }
 .home-opening .quick a > span:not(.ico):not(.arrow) {
   grid-column:2; grid-row:1;
   line-height:1.8;
 }
 .home-opening .quick a > span > b {
   display:block;
   font-size:14px;
   line-height:inherit;
 }
 .home-opening .quick a > span > small {
   display:block;
   margin:4px 0 0;
   font-size:12px;
   line-height:inherit;
 }
 .home-opening .quick a > .arrow {
   grid-column:3; grid-row:1;
   align-self:center;
 }
}
/* Keep the consultation introduction together above its channel cards. */
.guide-activation .activation-channels > .section-top {
 display:block;
}
.guide-activation .activation-channels > .section-top p {
 max-width:none;
 margin:14px 0 0;
}
@media(min-width:1001px) {
 .guide-activation .activation-channels #channel-title,
 .guide-activation .activation-channels > .section-top p { white-space:nowrap; }
}
/* Stack the three activation comparison items on desktop as well. */
@media(min-width:801px) {
 .guide-activation .activation-comparison-options {
   grid-template-columns:minmax(0,1fr);
 }
 .guide-activation .activation-comparison-options article + article {
   border-left:0;
   border-top:1px solid #deded8;
 }
}
/* Compact vertical spacing inside the three comparison items. */
.guide-activation .activation-comparison-options article,
.guide-activation .activation-comparison-note {
 padding-top:18px;
 padding-bottom:18px;
}