/* ikkeum.com — 공용 스타일
   팔레트는 이끔 로고에서 추출: ink #111D33 / paper #EBF0F3, 액센트는 ThinkCode #22C55E */

:root{
  --ink:#111D33;
  --ink-80:rgba(17,29,51,.80);
  --ink-66:rgba(17,29,51,.66);
  --ink-55:rgba(17,29,51,.55);
  --ink-40:rgba(17,29,51,.40);
  --ink-14:rgba(17,29,51,.14);
  --ink-08:rgba(17,29,51,.08);
  --paper:#EBF0F3;
  --surface:#FFFFFF;
  --accent:#22C55E;
  --accent-ink:#111D33;      /* 그린 위 글자는 반드시 ink (흰색은 대비 2.3:1 로 AA 미달) */
  --accent-soft:rgba(34,197,94,.12);
  --radius:12px;
  --maxw:1120px;
  --gutter:24px;
}
:root[data-theme="dark"]{
  --ink:#EBF0F3;
  --ink-80:rgba(235,240,243,.80);
  --ink-66:rgba(235,240,243,.66);
  --ink-55:rgba(235,240,243,.55);
  --ink-40:rgba(235,240,243,.40);
  --ink-14:rgba(235,240,243,.16);
  --ink-08:rgba(235,240,243,.09);
  --paper:#16203A;
  --surface:#0E1626;
  --accent:#2EE08A;
  --accent-ink:#06121F;
  --accent-soft:rgba(46,224,138,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","ss02","kern";
  line-height:1.6; word-break:keep-all; overflow-wrap:anywhere;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--gutter); top:10px; z-index:100; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:8px; font-weight:700}

/* ── 헤더 ───────────────────────────────── */
.hdr{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--surface) 88%, transparent);
     backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--ink-08)}
.hdr__in{display:flex; align-items:center; gap:24px; height:64px}
.hdr__logo img{height:19px; width:auto}
.hdr__nav{display:flex; gap:26px; font-size:13.5px; font-weight:600; color:var(--ink-66); margin-left:auto}
.hdr__nav a:hover,.hdr__nav a[aria-current]{color:var(--ink)}
.hdr__cta{display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--accent-ink);
          font-size:13px; font-weight:800; padding:9px 16px; border-radius:8px; white-space:nowrap}
.hdr__cta:hover{filter:brightness(1.05)}
.tgl{width:30px; height:30px; border-radius:8px; border:1px solid var(--ink-14); background:none; color:var(--ink-55);
     font-size:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.tgl:hover{color:var(--ink); border-color:var(--ink-40)}
.hdr__menu{display:none; width:34px; height:34px; border:1px solid var(--ink-14); border-radius:8px; background:none;
           color:var(--ink); cursor:pointer; font-size:17px; line-height:1}

/* ── 공통 조각 ──────────────────────────── */
.eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.2em; color:var(--ink-55); text-transform:uppercase}
.sec{padding:84px 0; border-top:1px solid var(--ink-08)}
.sec--paper{background:var(--paper)}
.sec__head{display:flex; flex-direction:column; gap:12px; margin-bottom:40px}
h2.t{font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.035em; line-height:1.22}
h3.t{font-size:clamp(20px,2.4vw,25px); font-weight:800; letter-spacing:-.025em; line-height:1.3}
.lead{font-size:16.5px; line-height:1.78; color:var(--ink-66); max-width:66ch}
.muted{color:var(--ink-55)}

.btn{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14.5px;
     padding:13px 22px; border-radius:10px; border:1px solid transparent; cursor:pointer}
.btn--fill{background:var(--accent); color:var(--accent-ink)}
.btn--fill:hover{filter:brightness(1.05)}
.btn--line{border-color:var(--ink-14); color:var(--ink)}
.btn--line:hover{border-color:var(--ink-40)}
.btns{display:flex; flex-wrap:wrap; gap:12px}

/* ── 히어로 ─────────────────────────────── */
.hero{background:var(--paper); border-bottom:1px solid var(--ink-08); padding:88px 0 72px}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center}
.hero h1{font-size:clamp(32px,5.2vw,52px); font-weight:800; letter-spacing:-.04em; line-height:1.16}
.hero .lead{font-size:17px}
.hero__col{display:flex; flex-direction:column; gap:22px}

/* 지표 스트립 */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--ink-08);
       border:1px solid var(--ink-08); border-radius:var(--radius); overflow:hidden}
.stat{background:var(--surface); padding:22px 20px; display:flex; flex-direction:column; gap:5px}
.stat__n{font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.03em; line-height:1}
.stat__n sup{font-size:.5em; vertical-align:super; color:var(--accent); font-weight:800}
.stat__l{font-size:12.5px; font-weight:600; color:var(--ink-55)}

/* 카드 */
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.card{background:var(--surface); border:1px solid var(--ink-14); border-radius:var(--radius); overflow:hidden;
      display:flex; flex-direction:column; transition:border-color .18s, transform .18s}
.card:hover{border-color:var(--ink-40); transform:translateY(-2px)}
.card__shot{aspect-ratio:16/10; background:var(--paper); overflow:hidden; border-bottom:1px solid var(--ink-08)}
.card__shot img{width:100%; height:100%; object-fit:cover; object-position:top}
.card__body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px}
.card__tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:2px}
.tag{font-size:11px; font-weight:800; letter-spacing:.08em; padding:4px 9px; border-radius:999px;
     background:var(--accent-soft); color:var(--ink-80)}
.card__t{font-size:17px; font-weight:800; letter-spacing:-.02em}
.card__d{font-size:14px; line-height:1.7; color:var(--ink-66)}
.card__meta{font-size:12px; font-weight:700; color:var(--ink-40); margin-top:2px}

/* 나열형 리스트 */
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{font-size:13px; font-weight:600; color:var(--ink-66); border:1px solid var(--ink-14);
      padding:8px 14px; border-radius:999px}

/* 2트랙 / 단계 */
.track{background:var(--surface); border:1px solid var(--ink-14); border-radius:var(--radius); padding:30px 28px;
       display:flex; flex-direction:column; gap:14px}
.track__k{font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--accent)}
.track ul{margin:6px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.track li{position:relative; padding-left:18px; font-size:14px; color:var(--ink-66); line-height:1.65}
.track li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:2px; background:var(--accent)}
.track__go{margin-top:auto; padding-top:8px; font-weight:800; font-size:14px; color:var(--ink)}

.qa{background:var(--surface); border:1px solid var(--ink-14); border-radius:var(--radius); padding:26px 24px;
    display:flex; flex-direction:column; gap:14px}
.qa__q{font-size:16px; font-weight:700; line-height:1.55; letter-spacing:-.02em}
.qa__a{font-size:14px; line-height:1.72; color:var(--ink-66); padding-top:14px; border-top:1px dashed var(--ink-14)}
.qa__badge{align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--accent-ink);
           background:var(--accent); padding:3px 9px; border-radius:5px}

.step{display:flex; flex-direction:column; gap:9px; padding:24px 22px; background:var(--surface);
      border:1px solid var(--ink-14); border-radius:var(--radius)}
.step__n{font-size:11.5px; font-weight:800; letter-spacing:.16em; color:var(--accent)}
.step__t{font-size:16px; font-weight:800; letter-spacing:-.02em}
.step__d{font-size:13.5px; line-height:1.7; color:var(--ink-66)}

/* 문의 */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:44px; align-items:center}
.contact__links{display:flex; flex-direction:column; gap:12px}
.clink{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px;
       border:1px solid var(--ink-14); border-radius:var(--radius); background:var(--surface);
       font-size:19px; font-weight:800; letter-spacing:-.02em; transition:border-color .18s, background .18s}
.clink:hover{border-color:var(--accent); background:var(--accent-soft)}
.clink span:last-child{color:var(--accent); font-size:17px}

/* 푸터 */
.ftr{border-top:1px solid var(--ink-08); padding:40px 0 56px; background:var(--paper)}
.ftr__in{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12.5px; color:var(--ink-55); line-height:1.9}
.ftr__in strong{color:var(--ink-80); font-weight:700}
.ftr__sep{color:var(--ink-40)}

/* reveal — JS 없으면 그냥 보인다 (opacity:0 고착 방지) */
html.js .rv{opacity:0; transform:translateY(14px)}
html.js .rv.on{opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease}

@media (max-width:900px){
  .hero{padding:64px 0 52px}
  .hero__grid,.contact{grid-template-columns:1fr; gap:32px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec{padding:64px 0}
  .hdr__nav{display:none}
  .hdr__menu{display:inline-flex; align-items:center; justify-content:center; margin-left:auto}
  .hdr__in{gap:12px}
  .hdr.open .hdr__nav{display:flex; position:absolute; left:0; right:0; top:64px; flex-direction:column; gap:0;
    background:var(--surface); border-bottom:1px solid var(--ink-14); padding:8px var(--gutter) 16px}
  .hdr.open .hdr__nav a{padding:12px 0; border-bottom:1px solid var(--ink-08); font-size:15px}
}
@media (max-width:620px){
  :root{--gutter:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .hdr__cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1 !important; transform:none !important; transition:none !important}
  .card:hover{transform:none}
  *{scroll-behavior:auto !important}
}

/* ── 히어로 콜라주 (겹친 스크린샷 3장) ────── */
.collage{position:relative; height:400px}
.collage figure{position:absolute; margin:0; border:1px solid var(--ink-14); border-radius:10px; overflow:hidden;
                background:var(--surface); box-shadow:0 20px 44px -22px rgba(17,29,51,.45)}
:root[data-theme="dark"] .collage figure{box-shadow:0 20px 44px -20px rgba(0,0,0,.7)}
.collage figure img{aspect-ratio:16/10; object-fit:cover; object-position:top; width:100%; height:auto}
.collage figure:nth-child(1){right:0; top:0; width:74%}
.collage figure:nth-child(2){left:0; top:132px; width:62%}
.collage figure:nth-child(3){right:34px; bottom:0; width:52%}

/* ── 지표 밴드 (다크) ──────────────────── */
.stats{background:var(--ink); color:var(--surface); border:0; border-radius:0; display:block}
:root[data-theme="dark"] .stats{background:#0A1220; color:var(--ink)}
.stats__in{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.stats .stat{background:transparent; padding:34px 24px 34px 0}
.stats .stat__n{color:inherit}
.stats .stat__l{color:color-mix(in srgb, currentColor 58%, transparent); font-size:12.5px}

@media (max-width:900px){
  .collage{height:300px}
  .stats__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .stat{padding:24px 16px 24px 0}
}
@media (max-width:620px){
  .collage{height:auto; display:grid; gap:14px}
  .collage figure{position:static; width:100% !important}
  .collage figure:nth-child(3){display:none}
}

/* 로고는 네이비 단색이라 다크 배경에서 묻힌다 → 반전해 paper 톤으로 */
:root[data-theme="dark"] .hdr__logo img{filter:brightness(0) invert(1) opacity(.93)}

/* 실제 운영 화면 갤러리 */
.shots{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.shot{margin:0; border:1px solid var(--ink-14); border-radius:10px; overflow:hidden; background:var(--surface)}
.shot img{width:100%; height:auto; display:block}
.shot figcaption{padding:12px 14px; font-size:12.5px; font-weight:700; color:var(--ink-66); border-top:1px solid var(--ink-08)}
@media (max-width:900px){ .shots{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .shots{grid-template-columns:1fr} }