/* ═══════════════════════════════════════════════════════
   jisoar., editorial system for subpages (v1)
   ivory · ink monochrome · Clash Display (latin) + Pretendard
   dynamics: sticky split + rounded cards + chips  (ref: wepick)
   ═══════════════════════════════════════════════════════ */
:root{
  --bg:#f4f8fd; --ink:#16222e; --mut:#5d6b7a; --faint:#9aa9b8;
  --line:#dde7f1; --card:#ffffff; --accent:#3b87f0;
  --sans:'Pretendard Variable', Pretendard, -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif;
  --disp:'Clash Display', 'Pretendard Variable', Pretendard, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden;
  word-break:keep-all; overflow-wrap:break-word}
::selection{background:var(--ink); color:#fff}
a{color:inherit; text-decoration:none}
.wrap{max-width:1520px; margin:0 auto; padding:0 clamp(20px,3.4vw,52px)}

/* ── top bar (ink variant for photo-less pages) ── */
.bar{position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,3.4vw,52px); color:var(--ink);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease}
.bar.scrolled{background:rgba(244,248,253,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  padding:14px clamp(20px,3.4vw,52px); box-shadow:0 1px 0 var(--line)}
.bar .brand{font-family:var(--disp); font-weight:600; font-size:18px; letter-spacing:-.01em}
.bar .brand sup{font-size:9px; vertical-align:super; margin-left:1px; opacity:.6}
.bar nav{display:flex; gap:clamp(14px,2.4vw,36px)}
.bar nav a{font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  opacity:.62; transition:opacity .25s ease; position:relative}
.bar nav a:hover, .bar nav a.on{opacity:1}
.bar nav a.on::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--accent)}
@media(max-width:720px){.bar nav a:nth-child(1),.bar nav a:nth-child(4){display:none}}
.bar nav a{padding:12px 6px; margin:-12px -6px}
.bar nav a.on::after{bottom:5px}
.bar nav a.cta{opacity:1; margin:-8px 0 -8px 4px; padding:8px 14px; border:1px solid var(--ink); border-radius:999px;
  transition:background .25s ease, color .25s ease, border-color .25s ease}
.bar nav a.cta::after{display:none}
.bar nav a.cta:hover, .bar nav a.cta.on{background:var(--ink); color:#fff}
footer a{display:inline-block; padding:10px 2px; margin:-10px -2px}

/* ── page hero ── */
.phero{padding:clamp(150px,20vh,220px) 0 clamp(40px,6vw,80px)}
.phero .eyebrow{font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mut); margin-bottom:22px}
.phero .eyebrow i{font-style:normal; margin-right:10px}
.phero h1{font-weight:800; font-size:clamp(38px,6.4vw,96px); letter-spacing:-.04em; line-height:1.12}
.phero h1 .en{font-family:var(--disp); font-weight:600; letter-spacing:-.02em}
.phero p{margin-top:26px; color:var(--mut); font-size:clamp(15px,1.7vw,18px); line-height:1.8; max-width:560px}
.phero p b{color:var(--ink); font-weight:700}

/* ── section chrome ── */
.sect{padding:clamp(70px,9vw,140px) 0}
.shead{display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:clamp(36px,5vw,64px)}
.shead .t{white-space:nowrap; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}
.shead .t i{font-style:normal; margin-right:10px}
.shead .n{font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--faint)}

/* ── sticky split (wepick grammar) ── */
.split{display:grid; gap:clamp(28px,4vw,72px)}
@media(min-width:920px){.split{grid-template-columns:minmax(220px,1fr) 2.2fr; align-items:start}}
.split .side{position:sticky; top:120px}
.split .side .lbl{font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.split .side h2{margin-top:12px; font-weight:800; font-size:clamp(26px,2.8vw,40px); letter-spacing:-.03em; line-height:1.25}
.split .side p{margin-top:16px; color:var(--mut); font-size:14.5px; line-height:1.8; max-width:300px}
@media(max-width:919px){.split .side{position:static}}

/* ── chips ── */
.chip{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:6px 13px; border:1px solid var(--line); border-radius:999px; color:var(--mut);
  background:var(--card)}
.chip.dark{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ── project cards ── */
.pcard{display:block; position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:22px; padding:clamp(26px,3vw,40px); margin-bottom:18px;
  transition:transform .45s var(--ease), box-shadow .45s ease}
.pcard .chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:clamp(20px,2.6vw,34px)}
.pcard .chips .chip{background:var(--bg)}
.pcard .chips .chip.dark{background:var(--accent); border-color:var(--accent); color:#fff}
.pcard h3{font-weight:800; font-size:clamp(24px,2.8vw,42px); letter-spacing:-.03em; line-height:1.15}
.pcard h3.en{font-family:var(--disp); font-weight:600; letter-spacing:-.015em}
.pcard .desc{margin-top:12px; color:var(--mut); font-size:14.5px; line-height:1.8; max-width:520px}
.pcard .meta{margin-top:clamp(18px,2.4vw,30px); display:flex; justify-content:space-between; align-items:flex-end}
.pcard .meta .yr{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--faint)}
.pcard .arr{width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink);
  transition:background .3s ease, color .3s ease, transform .45s var(--ease)}
a.pcard:hover{transform:translateY(-5px); box-shadow:0 22px 48px rgba(23,55,102,.10)}
a.pcard:hover .arr{background:var(--accent); border-color:var(--accent); color:#fff; transform:rotate(45deg)}

/* ── project grid + screenshots ── */
.phead{margin-bottom:clamp(22px,3vw,40px)}
.phead .lbl{font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.phead h2{margin-top:12px; font-weight:800; font-size:clamp(26px,2.8vw,40px); letter-spacing:-.03em; line-height:1.25}
.phead p{margin-top:14px; color:var(--mut); font-size:14.5px; line-height:1.8; max-width:520px}
.pgrid{display:grid; gap:18px}
@media(min-width:860px){.pgrid{grid-template-columns:1fr 1fr}}
.pgrid .pcard{margin-bottom:0; padding:0; overflow:hidden; display:flex; flex-direction:column}
.pgrid .pcard .body{padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; flex:1}
.pgrid .pcard .meta{margin-top:auto; padding-top:clamp(18px,2.4vw,26px)}
.pgrid .pcard h3{font-size:clamp(22px,2.2vw,30px)}
.pgrid .pcard .desc{font-size:14px}
.shot{position:relative; aspect-ratio:16/10; background:#e6edf6; overflow:hidden; border-bottom:1px solid var(--line)}
.shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block;
  transition:transform .8s var(--ease)}
a.pcard:hover .shot img{transform:scale(1.03)}
.shot.mobile{background:#efe9df}
.shot.mobile img{width:46%; height:auto; min-height:100%; margin:0 auto; object-fit:cover; object-position:top;
  box-shadow:0 18px 40px rgba(20,30,50,.18)}
.shot.mobile::before{content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,#f6f0e6,#e9e1d3)}
.shot.mobile img{position:relative; margin-top:clamp(18px,3vw,34px); border-radius:18px 18px 0 0}
.shot.blur::after{content:"비공개 · 블러 처리"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:11.5px; font-weight:700; letter-spacing:.14em; color:#fff; padding:8px 14px; border-radius:999px;
  background:rgba(10,20,40,.55); backdrop-filter:blur(4px)}
.shot.tile{display:flex; align-items:center; justify-content:center; background:var(--ink); color:#fff}
.shot.tile span{font-family:var(--disp); font-weight:600; font-size:clamp(34px,4.4vw,56px); letter-spacing:-.02em; opacity:.92}
.shot.tile small{position:absolute; left:18px; bottom:14px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.5}

/* ── check list inside cards ── */
.plist{list-style:none; margin-top:clamp(18px,2.4vw,28px); display:grid; gap:11px}
.plist li{position:relative; padding-left:26px; font-size:14.5px; color:var(--mut); line-height:1.7}
.plist li::before{content:"✓"; position:absolute; left:0; font-weight:800; color:var(--accent)}
.plist li b{color:var(--ink); font-weight:700}

/* ── mini cards (3-col) ── */
.mini-grid{display:grid; gap:16px}
@media(min-width:860px){.mini-grid{grid-template-columns:repeat(3,1fr)}}
.mini-grid.four{gap:16px}
@media(min-width:860px){.mini-grid.four{grid-template-columns:repeat(4,1fr)}}
.mini{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 24px}
.mini .no{font-size:11.5px; font-weight:800; letter-spacing:.12em; color:var(--accent); margin-bottom:16px}
.mini h3{font-size:17.5px; font-weight:800; letter-spacing:-.02em; margin-bottom:8px}
.mini p{font-size:13.5px; color:var(--mut); line-height:1.75}

/* ── contact channel cards ── */
.chan-grid{display:grid; gap:16px}
@media(min-width:760px){.chan-grid{grid-template-columns:1fr 1fr}}
.chan{display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:28px 26px; transition:transform .4s var(--ease), box-shadow .4s ease}
.chan:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(23,55,102,.10)}
.chan .ico{width:52px; height:52px; border-radius:15px; flex-shrink:0; background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:22px}
.chan .t{font-size:18px; font-weight:800; letter-spacing:-.02em; margin-bottom:3px}
.chan .d{font-size:13.5px; color:var(--mut)}

/* ── FAQ ── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:22px 0; font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:22px; font-weight:400; color:var(--accent); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px; color:var(--mut); font-size:14.5px; line-height:1.8; max-width:640px}

/* ── dark rounded CTA card (wepick hero echo) ── */
.darkcard{background:#10233a; color:#fff; border-radius:28px;
  padding:clamp(56px,8vw,110px) clamp(28px,5vw,80px); text-align:center; position:relative; overflow:hidden}
.darkcard .small{font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:22px}
.darkcard .big{font-weight:800; font-size:clamp(30px,5vw,68px); letter-spacing:-.04em; line-height:1.2}
.darkcard .btn{display:inline-flex; align-items:center; gap:10px; margin-top:36px;
  background:#fff; color:var(--ink); font-weight:700; font-size:15px;
  padding:16px 30px; border-radius:999px; transition:transform .3s var(--ease)}
.darkcard .btn:hover{transform:translateY(-2px)}
.darkcard .btn .a{transition:transform .3s var(--ease)}
.darkcard .btn:hover .a{transform:translateX(4px)}

/* ── footer ── */
footer{border-top:1px solid var(--line); margin-top:clamp(70px,9vw,140px);
  padding:34px 0 40px; font-size:12.5px; color:var(--faint)}
footer .row{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700}
footer a:hover{color:var(--ink)}

/* ── reveal (gated on .js so content stays visible without JS) ── */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .rv{opacity:1 !important; transform:none !important}
}

/* ── Korean line balance ── */
.nb{white-space:nowrap}
h1,h2,h3,.statement,.big,.lead,.side p,.phead p,.hero-sub{text-wrap:balance}
p,.desc,li{text-wrap:pretty}

@media(max-width:560px){.shead .n{display:none}}

/* ── case study pages (/products/*) ── */
.phero .chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.case-shot{border-radius:22px; overflow:hidden; border:1px solid var(--line); background:var(--card)}
.case-shot .shot{border-bottom:0; aspect-ratio:16/9}
.case-shot .shot.tile span{font-size:clamp(40px,6vw,84px)}
.case-shot .shot.mobile img{width:clamp(180px,28%,300px)}
.pcard .body-text{color:var(--mut); font-size:clamp(15px,1.4vw,17px); line-height:1.85; max-width:680px}
.pcard .body-text b{color:var(--ink); font-weight:700}
.pcard .body-text a{color:var(--accent); font-weight:700}
.spec{border-top:1px solid var(--line)}
.spec .row{display:grid; grid-template-columns:110px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.6}
.spec .k{color:var(--faint); font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; padding-top:3px}
.spec .v{color:var(--ink)}
.links{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
.links a{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border:1px solid var(--ink); border-radius:999px;
  font-size:13.5px; font-weight:700; transition:background .25s ease, color .25s ease}
.links a:hover{background:var(--ink); color:#fff}
.links a.ghost{border-color:var(--line); color:var(--mut)}
.links a.ghost:hover{background:var(--card); color:var(--ink); border-color:var(--ink)}
.note{margin-top:18px; font-size:13px; color:var(--faint); line-height:1.7}
@media(max-width:560px){.spec .row{grid-template-columns:1fr; gap:4px}}

/* desktop-only line breaks in copy */
@media(max-width:720px){br.d{display:none}}
@media(max-width:1100px){.mini p br.d{display:none}}