/* ONEgame smartpass — 입점 안내
   컨셉: 종이 티켓. 구멍(perforation)·스텁·번호가 반복 모티프. ONE 그라데이션은 히어로 면·섹션 전환선·스텁에 사용. */
:root{
  --paper:#F8F8FA; --paper-2:#EDEEF3; --ink:#2D2828; --muted:#58555E; --line:#D8D9E0;
  --orange:#f3742e; --pink:#ed0a72; --pink-deep:#C4055A;
  --grad:linear-gradient(135deg,#f3742e,#ed0a72);
  --grad-deep:linear-gradient(135deg,#C2410C,#C4055A);
  --font:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:6px; --wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.75 var(--font);word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
img{max-width:100%;display:block}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.nb{white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}
.sec--ink :focus-visible,.hero :focus-visible{outline-color:#fff}

.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);z-index:100;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

.notice{background:var(--ink);color:#F8F8FA;font-size:.875rem;line-height:1.5;text-align:center;padding:8px 20px}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(248,248,250,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.top__row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;font-size:1.125rem;line-height:1}
.brand__one{font-weight:900;letter-spacing:-.02em;padding:4px 7px;background:var(--ink);color:var(--paper);border-radius:4px}
.brand__name{font-weight:600;letter-spacing:-.01em}
.nav{display:flex;align-items:center;gap:4px}
.nav a:not(.btn){text-decoration:none;font-weight:600;font-size:.9375rem;padding:10px 12px;border-radius:var(--r);min-height:44px;display:inline-flex;align-items:center;transition:background .15s}
.nav a:not(.btn):hover{background:var(--paper-2)}
.nav a:not(.btn):active{background:var(--line)}
.menu-btn{display:none;font:inherit;font-weight:700;min-height:44px;padding:0 16px;background:transparent;border:2px solid var(--ink);border-radius:var(--r);color:var(--ink);cursor:pointer}
.menu-btn:hover{background:var(--paper-2)}
.menu-btn:active{background:var(--line)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font:700 1rem/1 var(--font);color:#fff;background:var(--pink-deep);border:2px solid var(--pink-deep);border-radius:var(--r);text-decoration:none;cursor:pointer;transition:background .15s,transform .1s,color .15s}
.btn:hover{background:#9E0449;border-color:#9E0449}
.btn:active{transform:translateY(1px);background:#7E0339}
.btn--sm{min-height:44px;padding:0 18px;font-size:.9375rem;margin-left:8px}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ghost:active{background:#000}

.eyebrow{font:800 .9375rem/1 var(--font);color:var(--pink-deep);margin-bottom:16px}
.sec--ink .eyebrow{color:#FFB38A}
.lead{font-size:1.1875rem;line-height:1.75;color:var(--muted);max-width:38em}
.sec--ink .lead{color:#D9D9E3}
.muted{color:var(--muted);font-size:.9375rem;margin-top:20px}

/* hero — 다크 면 위에 ONE 그라데이션 글로우 */
.hero{padding:clamp(48px,8vw,104px) 0 clamp(56px,8vw,112px);overflow:hidden;color:#fff;background:radial-gradient(60% 80% at 88% 20%,rgba(237,10,114,.55),transparent 70%),radial-gradient(50% 70% at 70% 100%,rgba(243,116,46,.5),transparent 70%),var(--ink)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,80px);align-items:center}
.hero .lead{color:#E6E3EA}
.status{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.9375rem;margin-bottom:20px}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--grad)}
h1{font-size:clamp(2.125rem,5.2vw,4rem);font-weight:900;line-height:1.18;letter-spacing:-.035em;margin-bottom:28px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero .btn{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn:hover{background:#FFE3EE;border-color:#FFE3EE}
.hero .btn--ghost{background:transparent;color:#fff;border-color:#fff}
.hero .btn--ghost:hover{background:#fff;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.3)}
.facts dt{font-size:.8125rem;color:#CFCBD6;margin-bottom:4px}
.facts dd{font-weight:800;line-height:1.4}

/* ticket */
.hero__ticket{display:flex;flex-direction:column;align-items:center;gap:20px}
.ticket{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 84px;width:100%;max-width:440px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:14px;transform:rotate(-3deg);box-shadow:8px 8px 0 rgba(0,0,0,.45);transition:transform .3s ease}
.ticket:hover{transform:rotate(-1deg) translateY(-4px)}
.ticket::before,.ticket::after{content:"";position:absolute;right:73px;width:22px;height:22px;background:var(--ink);border:2px solid var(--ink);border-radius:50%}
.ticket::before{top:-13px;clip-path:inset(50% 0 0 0)}
.ticket::after{bottom:-13px;clip-path:inset(0 0 50% 0)}
.ticket__main{padding:26px 24px 24px}
.ticket__tag{display:inline-block;font:700 .75rem/1 var(--mono);letter-spacing:.16em;color:#fff;background:var(--ink);padding:6px 8px;border-radius:3px}
.ticket__title{font-size:1.75rem;font-weight:900;letter-spacing:-.03em;margin:14px 0 18px;line-height:1.2}
.ticket__list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px dashed var(--line);font-weight:600}
.ticket__list i{font-style:normal;font-size:.875rem;color:var(--muted);font-weight:500}
.ticket__list i.is-open{color:var(--pink-deep);font-weight:700}
.ticket__stub{display:flex;align-items:center;justify-content:center;padding:16px 8px;border-left:2px dashed var(--ink);background:var(--grad-deep);border-radius:0 12px 12px 0}
.ticket__no{writing-mode:vertical-rl;font:700 .875rem/1 var(--mono);letter-spacing:.2em;color:#fff}
.ticket__no b{font-size:1.75rem;margin-top:8px;font-weight:700}
.ticket__cap{font-size:.8125rem;color:#CFCBD6}

/* sections */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec--tint{background:var(--paper-2)}
.sec--ink{background:var(--ink);color:#F8F8FA;position:relative}
.sec--ink::before,.foot::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--grad)}
.sec__head{margin-bottom:clamp(32px,5vw,56px);max-width:44rem}
h2{font-size:clamp(1.75rem,3.6vw,2.75rem);font-weight:900;line-height:1.25;letter-spacing:-.03em}
.sec__head .lead{margin-top:20px}
h3{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.4}

/* flow */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.flow li{padding:28px 28px 8px 0;position:relative}
.flow li+li{padding-left:28px;border-left:1px dashed var(--ink)}
.flow__n{display:block;font:700 3.5rem/1 var(--mono);letter-spacing:-.04em;color:var(--pink-deep);margin-bottom:16px}
.flow p{margin-top:10px;color:var(--muted)}

/* rows */
.rows{border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,4vw,56px);padding:24px 0;border-bottom:1px solid var(--line);transition:background .15s}
.row:hover{background:rgba(255,255,255,.5)}
.row dt{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.4}
.row dd{color:var(--muted)}
.tablewrap{margin-top:clamp(40px,6vw,72px);overflow-x:auto;border:2px solid var(--ink);border-radius:var(--r);background:#fff;padding:4px 0}
table{width:100%;border-collapse:collapse;font-size:1rem;min-width:540px}
caption{text-align:left;padding:16px 20px;font-weight:800;border-bottom:2px solid var(--ink)}
th,td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.875rem;color:var(--muted);font-weight:700}
thead th:last-child,tbody td:last-child{background:#FFF3EA;font-weight:700}
tbody th{font-weight:700}
tbody tr:last-child>*{border-bottom:0}

/* card sim */
.card-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.feat{margin-top:32px;border-top:1px solid var(--line)}
.feat li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.feat b{font-weight:800}
.feat span{color:var(--muted)}
.sim{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:clamp(20px,4vw,32px);box-shadow:8px 8px 0 var(--ink)}
.sim__label{display:block;font-weight:800;margin-bottom:12px}
.sim__ctl{display:flex;align-items:center;gap:16px}
.sim__ctl output{min-width:4.5em;text-align:right;font:700 1.125rem var(--mono);white-space:nowrap}
input[type=range]{flex:1;min-width:0;height:44px;accent-color:var(--pink-deep);cursor:pointer;background:transparent}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 20px;min-height:132px;align-content:flex-start}
.mini{width:calc((100% - 5*8px)/6);min-width:40px;aspect-ratio:3/4;border:2px solid var(--ink);border-radius:6px;background:var(--paper);display:flex;align-items:flex-end;justify-content:flex-start;padding:4px 5px;font:700 .75rem/1 var(--mono);transition:background .25s,transform .25s}
.mini.on{background:var(--grad);transform:translateY(-4px)}
.mini.on.t6,.mini.on.t12{box-shadow:inset 0 -10px 0 var(--ink)}
.sim__out{font-weight:700;font-size:1.125rem;line-height:1.5}
.sim__note{margin-top:10px;font-size:.875rem;color:var(--muted)}

/* early */
.early__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:s;border-top:1px solid #6b6160}
.early__steps li{counter-increment:s;padding:28px 28px 0 0;display:flex;flex-direction:column;gap:10px}
.early__steps li+li{padding-left:28px;border-left:1px dashed #8a807e}
.early__steps li::before{content:"0" counter(s);font:700 .9375rem var(--mono);color:#FFB38A}
.early__steps b{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.early__steps span{color:#D9D9E3}
.early__note{margin-top:40px;font-size:.9375rem;color:#C9C6D0;border-top:1px solid #6b6160;padding-top:20px}

/* path */
.path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:p}
.path li{counter-increment:p;position:relative;padding:44px 20px 0 0;border-top:2px solid var(--ink)}
.path li::before{content:counter(p);position:absolute;top:-17px;left:0;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 .9375rem/32px var(--mono);text-align:center}
.path b{display:block;font-size:1.25rem;font-weight:800;margin-bottom:6px}
.path span{color:var(--muted)}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px)}
.faq__list{border-top:2px solid var(--ink);padding-top:4px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;font-weight:800;font-size:1.125rem;transition:color .15s}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:700 1.5rem/1 var(--mono);flex:none;width:32px;text-align:center;transition:transform .2s}
summary:hover{color:var(--pink-deep)}
summary:active{opacity:.7}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 48px 22px 0;color:var(--muted)}

/* form */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.contact .sec__head{margin:0}
.mailline{margin-top:20px;font-weight:700}
.mailline a{color:var(--pink-deep)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field--wide{grid-column:1/-1}
label{display:block;font-weight:700;margin-bottom:8px;font-size:.9375rem}
.opt{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:12px 14px;min-height:48px;transition:box-shadow .15s,border-color .15s}
textarea{resize:vertical;line-height:1.6}
input:hover,textarea:hover{border-color:var(--pink-deep)}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--pink-deep);outline-offset:2px}
input[aria-invalid=true]{border-color:#B00020;background:#FFF5F6}
.err{color:#B00020;font-size:.875rem;font-weight:600;margin-top:6px}
.result{grid-column:1/-1;margin-top:8px;display:grid;gap:12px;justify-items:start}
.result[hidden]{display:none}
.result textarea{background:var(--paper-2)}
.result__act{display:flex;flex-wrap:wrap;gap:12px}
.contact>.result{grid-column:2}

/* footer */
.foot{position:relative;background:var(--ink);color:#D9D9E3;padding:44px 0 40px}
.foot__row{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center}
.foot__brand{display:flex;gap:6px;align-items:baseline;color:#fff}
.foot__brand .brand__one{background:#fff;color:var(--ink)}
.foot__txt{max-width:36rem;font-size:.875rem;line-height:1.6}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* tablet — 내비 6링크+버튼이 한 줄에 안 들어가므로 햄버거 전환 */
@media (max-width:960px){
  .menu-btn{display:inline-flex;align-items:center}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding:8px 0 16px;border-top:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:12px 8px}
  .btn--sm{margin:8px 0 0;min-height:48px}
  .hero__grid,.card-sec,.faq,.contact{grid-template-columns:minmax(0,1fr)}
  .contact>.result{grid-column:1}
  .hero__ticket{align-items:flex-start;padding:12px 8px 0}
  .path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}
/* mobile: 구조 변경 — 가로 흐름 → 세로 타임라인 */
@media (max-width:760px){
  .facts{grid-template-columns:minmax(0,1fr)}
  .flow,.early__steps{grid-template-columns:minmax(0,1fr)}
  .flow li,.early__steps li{padding:24px 0 8px}
  .flow li+li,.early__steps li+li{padding-left:0;border-left:0;border-top:1px dashed currentColor}
  .flow__n{font-size:2.5rem}
  .row{grid-template-columns:minmax(0,1fr);gap:6px}
  .path{grid-template-columns:minmax(0,1fr);row-gap:0;margin-left:16px;position:relative}
  .path::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ink)}
  .path li{border-top:0;padding:0 0 32px 32px}
  .path li::before{top:0;left:-17px}
  .feat li{grid-template-columns:minmax(0,1fr);gap:2px}
  .form{grid-template-columns:minmax(0,1fr)}
  .ticket{transform:rotate(-2deg);grid-template-columns:minmax(0,1fr) 64px}
  .ticket::before,.ticket::after{right:53px}
  .ticket__title{font-size:1.5rem}
  details p{padding-right:0}
  .actions .btn{flex:1 1 100%}
}
@media (max-width:360px){
  .brand{font-size:1rem}
  .mini{width:calc((100% - 3*8px)/4)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .ticket,.ticket:hover{transform:none}
}