:root{
  /* brand */
  --primary:#11254c;        /* 로고 엠블럼 네이비 */
  --primary-deep:#0a1838;   /* pressed */
  --primary-soft:#e9edf5;
  /* surface */
  --canvas:#ffffff;
  --surface-soft:#f3f5f8;
  --hairline:#d4d9e0;
  --hairline-soft:#e6e9ee;
  /* text */
  --ink-deep:#1a1716;       /* 로고 워드마크 계열 */
  --ink:#2c2826;
  --charcoal:#47423f;
  --steel:#6b6662;
  --stone:#99938e;
  --ink-button:#1a1716;
  --on-ink:#ffffff;

  --r-lg:8px; --r-xl:16px; --r-xxl:24px; --r-xxxl:32px; --r-full:100px;
  --s-xs:8px; --s-md:12px; --s-base:16px; --s-lg:20px; --s-xl:24px; --s-xxl:32px; --s-xxxl:40px;
  --s-section-sm:48px; --s-section:64px; --s-section-lg:80px; --s-hero:120px;
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px;line-height:1.5;letter-spacing:-0.16px;color:var(--ink);background:var(--canvas);
  word-break:keep-all;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-xxl)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* type scale */
.t-hero{font-size:64px;font-weight:500;line-height:1.16;letter-spacing:-0.02em;color:var(--ink-deep)}
.t-display{font-size:48px;font-weight:500;line-height:1.17;letter-spacing:-0.02em;color:var(--ink-deep)}
.t-heading-lg{font-size:36px;font-weight:500;line-height:1.28;letter-spacing:-0.02em;color:var(--ink-deep)}
.t-heading-md{font-size:28px;font-weight:300;line-height:1.36;color:var(--ink-deep)}
.t-heading-sm{font-size:24px;font-weight:500;line-height:1.25;color:var(--ink-deep)}
.t-subtitle-lg{font-size:18px;font-weight:700;line-height:1.44;color:var(--ink-deep)}
.t-subtitle-md{font-size:18px;font-weight:400;line-height:1.6;color:var(--charcoal)}
.t-body-sm{font-size:14px;line-height:1.6;letter-spacing:-0.14px;color:var(--charcoal)}
.t-caption-bold{font-size:12px;font-weight:700;line-height:1.33;letter-spacing:.04em}

/* buttons — pill, no hover, pressed only */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;border-radius:var(--r-full);font-size:14px;font-weight:700;letter-spacing:-0.14px;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--ink-button);color:var(--on-ink)}
.btn-primary:active{background:var(--charcoal)}
.btn-secondary{border:2px solid var(--ink-deep);color:var(--ink-deep);padding:0 26px}
.btn-secondary:active{background:var(--surface-soft)}
.btn-ghost{border:2px solid rgba(26,23,22,.12);color:var(--ink-deep);height:40px;padding:0 18px}
.btn-ghost:active{background:var(--surface-soft)}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 16px;border:1px solid var(--hairline);border-radius:var(--r-full);font-size:14px;font-weight:500;color:var(--ink);background:var(--canvas)}

/* header */
.hd{position:sticky;top:0;z-index:10;background:var(--canvas);border-bottom:1px solid var(--hairline-soft)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.hd-logo img{height:30px;width:auto}
.hd-act{display:flex;gap:var(--s-xs)}
.hd-act .btn{height:40px;padding:0 18px}

/* hero */
.hero{padding:var(--s-hero) 0 var(--s-section)}
.hero .t-caption-bold{color:var(--primary);display:block;margin-bottom:var(--s-xl)}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero h1{font-size:inherit;font-weight:inherit}
.hero h1 .t-hero{display:block}
.hero .t-subtitle-md{max-width:640px;margin-top:var(--s-xl)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-md);margin-top:var(--s-xxxl)}
.hero-chips{display:flex;flex-wrap:wrap;gap:var(--s-xs);margin-top:var(--s-xxl)}

/* hub cards */
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xl)}
.card-hub{display:flex;flex-direction:column;justify-content:space-between;min-height:320px;padding:var(--s-section-sm);border-radius:var(--r-xxxl)}
.card-hub.dark{background:var(--primary);color:var(--canvas)}
.card-hub.dark:active{background:var(--primary-deep)}
.card-hub.light{background:var(--surface-soft);color:var(--ink-deep)}
.card-hub.light:active{background:#e9ecf1}
.card-hub .kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.card-hub h2{margin:var(--s-md) 0 var(--s-md)}
.card-hub.dark h2{color:var(--canvas)}
.card-hub p{font-size:16px;line-height:1.6;max-width:400px;opacity:.85}
.card-hub .foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-xxxl)}
.card-hub .url{font-size:14px;font-weight:500;opacity:0;user-select:none}
.card-hub .pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--r-full);font-size:14px;font-weight:700}
.card-hub.dark .pill{background:var(--canvas);color:var(--primary)}
.card-hub.light .pill{background:var(--ink-button);color:var(--on-ink)}
.card-hub .pill svg{width:16px;height:16px}

/* quick links — icon feature cards */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-md);margin-top:var(--s-xl)}
.quick a{display:flex;align-items:center;gap:var(--s-base);padding:var(--s-xl);background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl)}
.quick a:active{background:var(--surface-soft)}
.quick .ic{width:40px;height:40px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}
.quick .ic svg{width:18px;height:18px}
.quick b{display:block;font-size:16px;font-weight:700;color:var(--ink-deep)}
.quick small{display:block;font-size:13px;color:var(--steel);margin-top:2px}

/* sections */
.sec{padding-top:var(--s-section-lg)}
.sec-hd{margin-bottom:var(--s-xxxl)}
.sec-hd .t-caption-bold{color:var(--primary);display:block;margin-bottom:var(--s-md)}
.sec-hd .t-heading-md{margin-top:var(--s-xs)}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xl)}
.tile{padding:var(--s-xxl) var(--s-xl);border:1px solid var(--hairline-soft);border-radius:var(--r-xl)}
.tile .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-size:13px;font-weight:700}
.tile h3{margin:var(--s-lg) 0 var(--s-xs)}

.doc{margin-top:var(--s-xl);display:grid;grid-template-columns:auto 1fr;gap:var(--s-xxxl);align-items:center;padding:var(--s-xxl) var(--s-xxl);background:var(--surface-soft);border-radius:var(--r-xxl)}
.doc .role{font-size:14px;color:var(--steel)}
.doc .name{font-size:24px;font-weight:500;color:var(--ink-deep);margin-top:4px}
.doc ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-xs)}
.doc li{font-size:14px;font-weight:500;color:var(--ink);background:var(--canvas);border-radius:var(--r-full);padding:8px 16px}

/* faq */
.faq{display:flex;flex-direction:column;gap:var(--s-md)}
.faq details{border:1px solid var(--hairline-soft);border-radius:var(--r-xl);background:var(--canvas);transition:background-color .3s ease-in-out,border-color .3s ease-in-out}
.faq details.is-open{background:var(--surface-soft);border-color:var(--surface-soft)}
.faq .a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1)}
.faq details.is-open .a-wrap{grid-template-rows:1fr}
.faq .a-inner{overflow:hidden;min-height:0}
.faq .a{opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .35s cubic-bezier(.4,0,.2,1)}
.faq details.is-open .a{opacity:1;transform:none}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-base);padding:var(--s-xl) var(--s-xxl)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:none;width:20px;height:20px;color:var(--steel);transition:transform .3s ease-in-out}
.faq details.is-open .chev{transform:rotate(180deg)}
.faq .a{padding:0 var(--s-xxl) var(--s-xl);font-size:16px;line-height:1.7;color:var(--charcoal)}

/* ── 네이버 케러셀 노출용 글 목록 ─────────────────────────────
   display:none / visibility:hidden 을 쓰지 않고 1px 영역으로 잘라내
   화면에서만 보이지 않게 처리. 내부 그리드는 실제 크기(3*2)로
   레이아웃되므로 썸네일 이미지와 링크가 정상적으로 렌더·수집됨. */
.feed-seo{
  position:absolute;left:0;top:auto;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  pointer-events:none;
}
.feed-seo .wrap{max-width:none;padding:0;width:948px}
.feed-grid{list-style:none;display:grid;grid-template-columns:repeat(3,300px);gap:var(--s-xl);width:948px}
.feed-card{width:300px}
.feed-card a{display:block}
.feed-thumb{width:300px;height:300px;object-fit:cover;border-radius:var(--r-xl)}
.feed-title{display:block;margin-top:var(--s-md);font-size:16px;font-weight:500;line-height:1.5;color:var(--ink-deep)}

/* footer */
.ft{margin-top:var(--s-section-lg);border-top:1px solid var(--hairline-soft);padding:var(--s-section) 0 var(--s-xxl)}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-xxl)}
.ft img{height:26px;width:auto;margin-bottom:var(--s-lg)}
.ft h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:var(--s-md)}
.ft address,.ft ul{font-style:normal;list-style:none;font-size:14px;line-height:1.9;color:var(--steel)}
.ft-info p{margin:0}
.ft-info .kv{font-style:normal;white-space:nowrap}
@media (min-width:1024px){.ft-top{grid-template-columns:2fr 1fr 1fr}}
@media (max-width:767px){.ft .ft-info i{display:none}.ft .ft-info .kv{display:block}}
.ft-info span{color:var(--ink);font-weight:500;margin-right:8px}
.ft-info i{display:inline-block;width:1px;height:11px;background:var(--hairline);margin:0 12px;vertical-align:middle}
.ft-bottom{margin-top:var(--s-section-sm);padding-top:var(--s-xl);border-top:1px solid var(--hairline-soft);font-size:12px;color:var(--stone)}

.mbar{display:none}

/* responsive */
@media (max-width:1023px){
  .tiles{grid-template-columns:1fr 1fr}
  .quick{grid-template-columns:1fr 1fr}
  .doc{grid-template-columns:1fr;gap:var(--s-lg)}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .wrap{padding:0 16px}
  .t-hero{font-size:36px;line-height:1.25}
  .t-heading-lg{font-size:28px}
  .t-heading-md{font-size:22px}
  .t-subtitle-md{font-size:16px}
  .hero{padding:var(--s-section) 0 var(--s-section-sm)}
  .hd-act .btn-primary{display:none}
  .hd-logo img{height:22px}
  .hd-act .btn-ghost{width:40px;padding:0;font-size:0;gap:0;border:0}
  .hd-act .btn-ghost svg{width:24px;height:24px;stroke-width:1.6}
  .hub-grid,.tiles{grid-template-columns:1fr}
  .card-hub{min-height:0;padding:var(--s-xxl) var(--s-xl);border-radius:var(--r-xxl)}
  .card-hub .foot{margin-top:var(--s-xxl)}
  .t-display{font-size:32px}
  .tile{padding:var(--s-xl)}
  .sec{padding-top:var(--s-section)}
  .faq summary{padding:var(--s-lg)}
  .faq .a{padding:0 var(--s-lg) var(--s-lg)}
  .ft-top{grid-template-columns:1fr}
  .ft{padding-bottom:110px}
  .mbar{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xs);position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--canvas);
    box-shadow:rgba(20,22,26,.3) 0 1px 4px 0;
  }
  .mbar .btn{height:48px;padding:0}
}
@media (max-width:479px){
  .t-hero{font-size:30px}
  .quick{grid-template-columns:1fr 1fr}
  .quick a{flex-direction:column;align-items:flex-start;gap:var(--s-md);padding:var(--s-lg)}
  .hero-cta .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* hover — 텍스트·배경색 전환만 (그림자·이동 없음) */
.btn,.card-hub,.card-hub .pill,.quick a,.quick .ic,.faq summary,.ft a{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
@media (hover:hover){
  .btn-primary:hover{background:#3a3532}
  .btn-secondary:hover{background:var(--ink-deep);color:var(--on-ink)}
  .btn-ghost:hover{background:var(--surface-soft);border-color:var(--hairline)}
  .card-hub.dark:hover{background:#1b3466}
  .card-hub.dark:hover .pill{background:var(--primary-soft)}
  .card-hub.light:hover{background:#e9ecf1}
  .card-hub.light:hover .pill{background:#3a3532}
  .quick a:hover{background:var(--surface-soft);border-color:var(--hairline)}
  .quick a:hover .ic{background:var(--primary);color:var(--canvas)}
  .faq summary:hover .t-subtitle-lg{color:var(--primary)}
  .faq summary .t-subtitle-lg{transition:color .2s ease}
  .ft a:hover{color:var(--ink-deep);text-decoration:underline;text-underline-offset:3px}
}