/* OTIFY v3 — design tokens per 01_CLAUDE_MASTER_PROMPT §6 */
:root{
  --bg:#F7F5EF; --bg-2:#EFECE3; --paper:#FFFFFF; --ink:#1C1D20; --ink-2:#4A4B50; --ink-3:#777970;
  --line:#DDDCD4; --line-2:#C9C7BD; --orange:#FF6A00; --orange-2:#E84B00; --orange-3:#FFAA00; --orange-pale:#FFE9D9;
  --leaf:#28714C; --blue:#8EB6CA; --green:#B9C8A5; --dark:#1C1D20;
  --font:"Archivo","Noto Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"Space Mono","SFMono-Regular",Menlo,monospace;
  --max:1360px; --gut:56px; --px:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.65;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);word-break:keep-all;overflow-wrap:anywhere}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
main{flex:1}

/* type */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.02em;line-height:1.12}
h1{font-size:clamp(40px,5.6vw,76px);line-height:1.06;letter-spacing:-.03em}
h2{font-size:clamp(30px,3.6vw,52px)}
h3{font-size:clamp(22px,2vw,28px)}
.lead{font-size:clamp(18px,1.4vw,22px);line-height:1.6;color:var(--ink-2);max-width:40em}
p{max-width:40em}
.lbl{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.lbl.o{color:var(--orange)}
.lbl .dot{width:8px;height:8px;background:var(--orange);flex:none}
.muted{color:var(--ink-3)}
.small{font-size:15px;line-height:1.55}
.mono{font-family:var(--mono);font-size:13px}
b,strong{font-weight:600}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(247,245,239,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;height:60px;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;letter-spacing:.02em}
.brand:hover{text-decoration:none}
.brand svg{width:22px;height:22px}
.nav{display:flex;align-items:center;gap:4px;flex:1}
.nav>li{position:relative}
.nav>li>a,.nav>li>button{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:16px;color:var(--ink-2);white-space:nowrap}
.nav>li>a:hover,.nav>li>button:hover,.nav>li>button[aria-expanded="true"]{color:var(--ink);text-decoration:none}
.nav>li[data-current]>a,.nav>li[data-current]>button{color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange)}
.nav>li>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.dd{position:absolute;top:100%;left:0;min-width:260px;background:var(--paper);border:1px solid var(--line);padding:8px 0;display:none;box-shadow:0 8px 24px rgba(28,29,32,.06);margin-top:10px}
.dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav>li.open .dd{display:block}
.dd a{display:grid;gap:2px;padding:10px 18px;font-size:16px;color:var(--ink)}
.dd a:hover{background:var(--bg);text-decoration:none}
.dd a[aria-current]{box-shadow:inset 3px 0 0 var(--orange)}
.dd .en{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.hdr .cta{margin-left:auto}
.menu-btn{display:none;margin-left:auto;padding:8px 10px;font-size:15px;border:1px solid var(--line-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;font-size:15px;font-weight:500;border:1px solid var(--ink);color:var(--ink);background:transparent;line-height:1;white-space:nowrap}
.btn:hover{background:var(--ink);color:#fff;text-decoration:none}
.btn.p{background:var(--ink);color:#fff}
.btn.p:hover{background:var(--orange);border-color:var(--orange)}
.btn.o{border-color:var(--orange);color:var(--orange)}
.btn.o:hover{background:var(--orange);color:#fff}
.btn .ar{width:12px;height:12px;flex:none}
.btn.s{padding:9px 14px;font-size:14px}
.lk{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.lk .ar{width:11px;height:11px}
.lk:hover{color:var(--orange)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* badges */
.bd{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper);white-space:nowrap}
.bd.o{border-color:var(--orange);color:var(--orange-2)}
.bd.g{border-color:var(--leaf);color:var(--leaf)}
.bd.b{border-color:#6F97AB;color:#4F7A8E}
.bd.k{background:var(--ink);color:#fff;border-color:var(--ink)}
.bds{display:flex;flex-wrap:wrap;gap:8px}

/* layout blocks */
.sec{padding:112px 0}
.sec.tight{padding:72px 0}
.sec.top{padding-top:72px}
.sec+.sec{padding-top:0}
.sec.band{background:var(--bg-2)}
.sec.band+.sec,.sec.dark+.sec{padding-top:112px}
.sec.dark{background:var(--dark);color:#F2F0E8}
.sec.dark .lbl{color:#B8B6AC}.sec.dark .lead,.sec.dark .muted{color:#C9C7BD}.sec.dark .line{border-color:#3A3B40}
.sec.band .sec-h,.sec.dark .sec-h{padding-top:112px}
.sec.band,.sec.dark{padding-top:0}
.sec-h{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:48px;max-width:900px}
.sec-h .lbl{margin-bottom:4px}
.sec-h.row{grid-template-columns:1fr auto;align-items:end;max-width:none}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.line{border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start}
.split.eq{grid-template-columns:1fr 1fr}
.split.rev{grid-template-columns:6fr 5fr}
.split>*{min-width:0}
.sticky{position:sticky;top:88px}
.stack{display:grid;gap:20px}
.stack.l{gap:32px}

/* hero */
.hero{padding:88px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero .txt{display:grid;gap:24px;align-content:center}
.hero .txt .btns{margin-top:8px}
.hero.one .wrap{grid-template-columns:1fr}
.hero.one .txt{max-width:980px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.hero .meta b{color:var(--ink);font-weight:500}
.hero .meta span{display:inline-flex;align-items:center;gap:8px}
.hero.one .txt h1{max-width:18em}

/* figures / diagrams */
.fig{display:grid;gap:12px}
.fig figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);display:flex;gap:12px;flex-wrap:wrap}
.fig figcaption b{color:var(--ink-2);font-weight:400}
.dg{position:relative;background:var(--paper);border:1px solid var(--line);overflow:hidden;container-type:inline-size}
.dg svg{width:100%;height:auto;shape-rendering:crispEdges}
.dg .lab{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:clamp(8px,1.5cqw,13px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap;pointer-events:none;line-height:1}
.dg .lab.w{color:#F7F5EF}.dg .lab.o{color:var(--orange-2)}.dg .lab.m{color:var(--ink-3);font-size:clamp(8px,1.4cqw,12px)}
.dg .lab.big{font-size:clamp(10px,2cqw,16px);font-weight:600;letter-spacing:.02em}
.dg .lab.kr{font-family:var(--font);text-transform:none;letter-spacing:0;font-size:clamp(9px,1.6cqw,14px)}
.dg.dk{background:var(--dark);border-color:#2A2B30}
.photo{background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.r21{aspect-ratio:2/1}.photo.r169{aspect-ratio:16/9}.photo.r43{aspect-ratio:4/3}.photo.r45{aspect-ratio:4/5}.photo.r1610{aspect-ratio:16/10}
.shot{border:1px solid var(--line);background:#111;overflow:hidden}
.shot img{width:100%;height:auto}
.shot.z{cursor:zoom-in}
.cap{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);margin-top:10px;display:flex;gap:12px;flex-wrap:wrap}
.cap b{font-weight:400;color:var(--ink-2)}

/* motion (one per page) */
@keyframes cyc4{0%,22%{opacity:1}25%,100%{opacity:.18}}
.dg .n{animation:cyc4 6s linear infinite}
.dg .n2{animation-delay:1.5s}.dg .n3{animation-delay:3s}.dg .n4{animation-delay:4.5s}
@keyframes sig{0%{transform:translateX(0)}100%{transform:translateX(var(--dx,0px))}}
.dg .sig{animation:sig 5s linear infinite}
@keyframes pulse{0%,60%{opacity:1}70%,100%{opacity:.25}}
.dg .pu{animation:pulse 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.dg .n,.dg .sig,.dg .pu{animation:none!important;opacity:1}}

/* lists / grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{background:var(--bg);padding:28px 26px;display:grid;gap:12px;align-content:start;min-width:0}
.cell.pa{background:var(--paper)}
.cell .lbl{margin-bottom:2px}
.cell h3{font-size:21px}
.cell p{font-size:16px;color:var(--ink-2)}
.cell ul{display:grid;gap:6px;font-size:15px;color:var(--ink-2)}
.cell ul li{padding-left:14px;position:relative}
.cell ul li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;background:var(--orange)}
.cell .num{font-family:var(--mono);font-size:12px;color:var(--orange)}
a.cell:hover{background:var(--paper);text-decoration:none}
a.cell .lk{margin-top:auto}
.sec.dark .g2,.sec.dark .g3,.sec.dark .g4{background:#3A3B40;border-color:#3A3B40}
.sec.dark .cell{background:var(--dark)}.sec.dark .cell p,.sec.dark .cell ul{color:#C9C7BD}

/* definition rows */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--line)}
.row .k{font-weight:500}
.row .k .lbl{margin-top:6px}
.row p{color:var(--ink-2)}
.row.n{grid-template-columns:72px 240px 1fr}
.row.n .num{font-family:var(--mono);font-size:14px;color:var(--orange);padding-top:4px}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--line)}
.tbl th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:400;border-bottom:1px solid var(--ink)}
.tbl td:first-child{font-weight:500}
.tbl td{color:var(--ink-2)}
.tbl-wrap{overflow-x:auto}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:s}
.steps>div{background:var(--bg);padding:24px 22px;display:grid;gap:10px;align-content:start;min-width:0}
.steps .num{font-family:var(--mono);font-size:12px;color:var(--orange)}
.steps h3{font-size:18px}
.steps p{font-size:15px;color:var(--ink-2)}
.steps .out{font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px}

/* big statement */
.big{font-size:clamp(28px,3.4vw,46px);line-height:1.25;letter-spacing:-.02em;font-weight:500;max-width:22em}
.big em{font-style:normal;color:var(--orange-2)}

/* tabs */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{padding:14px 18px;font-size:16px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--orange)}
.tabp{display:none;padding-top:40px}
.tabp.on{display:block}

/* case / platform cards */
.card{display:grid;gap:16px;background:var(--bg);min-width:0}
.card .img{border:1px solid var(--line);background:var(--bg-2);overflow:hidden;aspect-ratio:4/3}
.card .img:has(.fig){aspect-ratio:5/3}.card .img .fig{height:100%}
.card .img img,.card .img .dg{width:100%;height:100%;object-fit:cover}
.card .img .dg{border:0}
.card h3{font-size:24px}
.card p{font-size:16px;color:var(--ink-2)}
.card .meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
.card .meta b{font-weight:500;color:var(--ink);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:48px 40px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.feature{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end}
.feature .img{aspect-ratio:16/9}

/* filters */
.filters{display:grid;gap:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 12px;border:1px solid var(--line-2);font-size:14px;display:inline-flex;align-items:center;gap:8px;background:var(--paper)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip .sq{width:8px;height:8px;background:var(--orange);flex:none}
.count{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.empty{border:1px dashed var(--line-2);padding:40px;text-align:center;color:var(--ink-3);display:none}
.empty.on{display:block}

/* cta band */
.cta{padding:96px 0;border-top:1px solid var(--line)}
.cta .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.cta h2{max-width:16em}

/* footer */
.ftr{border-top:1px solid var(--line);background:var(--bg);margin-top:0}
.ftr .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;padding:64px 0 48px}
.ftr .col b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;font-weight:400}
.ftr .col a{display:block;font-size:15px;padding:4px 0;color:var(--ink-2)}
.ftr .col a:hover{color:var(--ink)}
.ftr .sign{display:grid;gap:16px}
.ftr .sign .brand{font-size:20px}
.ftr .sign p{font-size:15px;color:var(--ink-2);max-width:26em}
.ftr .bot{border-top:1px solid var(--line);padding:22px 0 32px;display:flex;flex-wrap:wrap;gap:12px 28px;font-family:var(--mono);font-size:12px;color:var(--ink-3);align-items:center}
.ftr .bot .sq{display:inline-flex;gap:3px}
.ftr .bot .sq i{width:6px;height:6px;background:var(--line-2);display:block}
.ftr .bot .sq i.o{background:var(--orange)}

/* forms */
.form{display:grid;gap:18px;max-width:640px}
.form label{display:grid;gap:8px;font-size:15px;font-weight:500}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);width:100%}
.form textarea{min-height:160px;resize:vertical}
.form .note{font-size:14px;color:var(--ink-3)}
.form .ok{display:none;border:1px solid var(--orange);background:var(--orange-pale);padding:18px;font-size:15px}
.form .ok.on{display:block}
.form .ok a{text-decoration:underline}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(28,29,32,.9);display:none;align-items:center;justify-content:center;padding:32px;z-index:100}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;border:1px solid #444}
.lb button{position:absolute;top:16px;right:16px;color:#fff;font-family:var(--mono);font-size:13px;padding:8px 12px;border:1px solid #666}

/* draft banner */
.draft{background:var(--orange-pale);border-bottom:1px solid var(--orange);font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:10px 0;text-transform:uppercase;color:var(--orange-2)}

details.cond{border:1px solid var(--line);background:var(--paper)}
details.cond summary{padding:18px 22px;cursor:pointer;font-weight:500;display:flex;gap:12px;align-items:center}
details.cond summary::marker{content:""}
details.cond summary::before{content:"+";font-family:var(--mono);color:var(--orange)}
details.cond[open] summary::before{content:"–"}
details.cond .in{padding:0 22px 22px;display:grid;gap:14px;font-size:15px;color:var(--ink-2)}
details.cond .in .mono{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
details.cond .in .mono span{border:1px solid var(--line);padding:10px;font-size:12px;background:var(--bg)}

/* responsive */
@media (max-width:1180px){
  :root{--gut:40px}
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .split,.split.rev,.split.eq{grid-template-columns:1fr!important;gap:40px}
  .sticky{position:static}
  .g4,.g5,.steps{grid-template-columns:1fr 1fr}
  .cards3{grid-template-columns:1fr 1fr}
  .ftr .top{grid-template-columns:1fr 1fr 1fr}
  .ftr .sign{grid-column:1/-1}
}
@media (max-width:1100px){
  .nav{display:none;position:absolute;left:0;right:0;top:60px;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px;max-height:calc(100vh - 60px);overflow:auto}
  .hdr.open .nav{display:flex}
  .nav>li{border-top:1px solid var(--line)}
  .nav>li>a,.nav>li>button{width:100%;justify-content:space-between;padding:14px var(--gut);font-size:17px}
  .nav>li>button::after{transform:translateY(-2px) rotate(45deg)}
  .nav>li.open>button::after{transform:translateY(2px) rotate(-135deg)}
  .dd{position:static;border:0;box-shadow:none;background:var(--bg-2);padding:4px 0 8px;min-width:0}
  .dd a{padding:10px calc(var(--gut) + 14px)}
  .hdr .cta{display:none}
  .menu-btn{display:inline-flex}
  .hdr .wrap{gap:16px}
}
@media (max-width:720px){
  :root{--gut:20px}
  html{font-size:17px}
  h1{font-size:clamp(34px,9vw,44px)}
  h2{font-size:clamp(26px,7vw,32px)}
  .hero{padding:48px 0 40px}
  .sec{padding:64px 0}.sec.band+.sec,.sec.dark+.sec{padding-top:64px}.sec.band .sec-h,.sec.dark .sec-h{padding-top:64px}
  .sec-h{margin-bottom:32px}.sec-h.row{grid-template-columns:1fr}
  .g2,.g3,.g4,.g5,.steps,.cards2,.cards3{grid-template-columns:1fr}
  .row,.row.n{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .feature{grid-template-columns:1fr}
  .cta .wrap{grid-template-columns:1fr}
  .cta{padding:64px 0}
  .ftr .top{grid-template-columns:1fr 1fr;padding:48px 0 32px}
  .cell{padding:22px 20px}
  .tbl{font-size:15px}.tbl th,.tbl td{padding:12px 10px}
  .card .meta{grid-template-columns:1fr}
  .photo.r21{aspect-ratio:4/3}
}