:root{
  --dark:#0B0C12;
  --dark-2:#15161E;
  --amber:#FFB627;
  --crimson:#8B1E3F;
  --paper:#F2EDE3;
  --paper-2:#E2D9C8;
  --ink:#1A1712;
  --grey-1:#B9B0A0;
  --grey-2:#7D7566;
  --grey-3:#4A453C;
  --display:"Black Han Sans","IBM Plex Sans KR",sans-serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,48px);
  --measure:68ch;
}
*{box-sizing:border-box}
html{background:var(--dark);color-scheme:dark}
body{margin:0;background:var(--dark);color:var(--paper);font:400 16px/1.7 var(--body);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:var(--gutter)}

/* 상단 */
.top{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding-block:22px}
.mark{font:400 22px/1 var(--display);letter-spacing:.02em;text-decoration:none;color:var(--paper)}
.mark span{color:var(--amber)}
.top nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.top nav a{text-decoration:none;color:var(--grey-1)}
.top nav a:hover{color:var(--amber)}

/* 히어로 — 무대 위에서 교차하는 두 조명 */
.stage{position:relative;overflow:hidden;background:var(--dark);border-bottom:1px solid var(--grey-3)}
.stage::before,.stage::after{content:"";position:absolute;top:0;width:78%;height:100%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,182,39,.34) 0%,rgba(255,182,39,.12) 60%,rgba(255,182,39,.02) 100%)}
.stage::before{left:0;clip-path:polygon(4% 0,11% 0,100% 100%,48% 100%)}
.stage::after{right:0;clip-path:polygon(89% 0,96% 0,52% 100%,0 100%)}
.floor{position:absolute;left:50%;bottom:-130px;width:min(900px,130%);height:260px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,182,39,.30) 0%,rgba(255,182,39,.08) 45%,rgba(255,182,39,0) 70%)}
.curtain{position:absolute;top:0;bottom:0;z-index:1;width:clamp(10px,3vw,40px);background:repeating-linear-gradient(90deg,#5E1229 0 6px,#8B1E3F 6px 14px,#6E1631 14px 20px)}
.curtain.l{left:0}.curtain.r{right:0}
.hero{position:relative;z-index:2;text-align:center;padding-block:clamp(48px,10vw,128px) clamp(72px,12vw,150px)}
.hero h1{margin:0;font:400 clamp(76px,18vw,210px)/.95 var(--display);color:var(--paper);text-shadow:0 0 70px rgba(255,182,39,.4)}
.hero .en{margin:14px 0 0;font:500 clamp(15px,2vw,19px)/1.3 var(--body);color:var(--amber);letter-spacing:.06em}
.hero .lede{max-width:30em;margin:28px auto 0;font-size:clamp(16px,2.2vw,20px);color:var(--paper)}

/* 절취선 — 구획 경계 */
.perf{position:relative;height:30px;max-width:1120px;margin:0 auto}
.perf::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:50%;border-top:2px dashed var(--grey-3)}
.perf span{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--dark);border:2px solid var(--grey-3)}
.perf span:first-child{left:calc(var(--gutter) - 15px)}
.perf span:last-child{right:calc(var(--gutter) - 15px)}

section{padding-block:clamp(48px,8vw,96px)}
h2{margin:0 0 10px;font:400 clamp(30px,5vw,46px)/1.15 var(--display);color:var(--paper)}
.sub{margin:0 0 36px;color:var(--grey-1);max-width:var(--measure)}

/* 서비스 = 입장권. 본권과 꼬리표 사이 절취 구멍은 마스크로 뚫는다 */
.tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:28px}
.ticket{--stub:112px;--hole:14px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);background:var(--paper);color:var(--ink);
  -webkit-mask:radial-gradient(circle var(--hole) at calc(100% - var(--stub)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--hole) at calc(100% - var(--stub)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--hole) at calc(100% - var(--stub)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--hole) at calc(100% - var(--stub)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.ticket .main{padding:28px 28px 26px;border-right:2px dashed #CFC5B2}
.ticket .stub{display:flex;align-items:center;justify-content:center;padding:18px 0}
.ticket .stub b{writing-mode:vertical-rl;font:400 20px/1 var(--display);letter-spacing:.14em}
.ticket.live .stub{background:var(--amber);color:var(--ink)}
.ticket.soon .stub{background:var(--crimson);color:var(--paper)}
.ticket h3{margin:0;font:400 36px/1.1 var(--display)}
.ticket .what{margin:10px 0 18px;color:var(--grey-3)}
.ticket .url{font:500 15px/1 var(--mono);color:var(--crimson);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0 0 8px;padding:16px 0;border-block:1px solid #D9CFBC}
.stats div{margin:0}
.stats dt{font-size:13px;color:var(--grey-2)}
.stats dd{margin:0;font:600 clamp(22px,3vw,28px)/1.15 var(--mono);color:var(--ink)}
.asof{font-size:12px;color:var(--grey-2);margin:0 0 20px}
.plan{margin:0 0 20px;color:var(--grey-3)}

/* 회사 정보 */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin:0;border-top:1px solid var(--grey-3);border-left:1px solid var(--grey-3)}
.facts div{padding:18px 20px;border-right:1px solid var(--grey-3);border-bottom:1px solid var(--grey-3)}
.facts dt{font-size:13px;color:var(--grey-2);margin-bottom:4px}
.facts dd{margin:0;font-size:17px;color:var(--paper)}
.facts dd.num{font-family:var(--mono)}
.facts .wide{grid-column:1/-1}

/* 지원 */
.support{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.contact{display:block;padding:26px 26px 24px;background:var(--dark-2);border:1px solid var(--grey-3);text-decoration:none}
.contact:hover{border-color:var(--amber)}
.contact span{display:block;font-size:14px;color:var(--grey-1)}
.contact strong{display:block;margin-top:6px;font:500 clamp(18px,2.6vw,24px)/1.3 var(--mono);color:var(--amber);overflow-wrap:anywhere}
.note{margin-top:22px;color:var(--grey-1);max-width:var(--measure)}

footer{border-top:1px solid var(--grey-3);padding-block:32px 48px;color:var(--grey-2);font-size:13px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
footer a{color:var(--grey-1);text-decoration:none}
footer a:hover{color:var(--amber)}
footer strong{color:var(--paper);font-weight:600}

/* 문서 페이지 */
.docstage{position:relative;overflow:hidden;border-bottom:1px solid var(--grey-3)}
.docstage::before{content:"";position:absolute;left:50%;top:-60%;width:min(900px,140%);height:200%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at top,rgba(255,182,39,.2),rgba(255,182,39,0) 60%)}
.dochead{position:relative;padding-block:36px 48px}
.dochead h1{margin:0;font:400 clamp(38px,7vw,64px)/1.1 var(--display)}
.dochead p{margin:12px 0 0;color:var(--grey-1)}
.docwrap{padding-block:48px}
.doc{background:var(--paper);color:var(--ink);max-width:860px;margin:0 auto;padding:clamp(22px,5vw,56px)}
.doc h2{font:400 24px/1.3 var(--display);color:var(--ink);margin:40px 0 12px;padding-top:28px;border-top:2px dashed #CFC5B2}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:20px}
.doc h3{font-size:16px;margin:20px 0 6px}
.doc p,.doc li{max-width:var(--measure)}
.doc ul{padding-left:1.3em}
.doc a{color:var(--crimson)}
.doc .meta{color:var(--grey-2);font-size:14px;margin:0}

@media (max-width:520px){
  .ticket{--stub:60px}
  .ticket .stub b{font-size:17px}
  .ticket .main{padding:22px 18px}
  .ticket h3{font-size:30px}
  .stage::before,.stage::after{width:100%}
}