/* 16호 설정집 홈페이지 — 첫 화면 (PC 가로 기준 · 16:9 무대를 화면에 맞춰 줄인다) */
:root{
  --bg:#0F0B1E; --panel:#3B2A66; --accent:#8A4DFF; --gold:#FFC857; --pink:#FF6CA8; --sky:#59D1FF;
  --ink:#EDE7FF; --paper:#EFE3C8;
  --u:min(1vw,1.78vh);              /* 1920x1080에서 19.2px */
  --sans:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR",sans-serif;
  --serif:"Noto Serif KR","Nanum Myeongjo","Batang","Noto Serif CJK KR",serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
a{color:inherit;text-decoration:none}

.topbar{position:fixed;inset:0 0 auto 0;z-index:10;height:calc(var(--u)*3.2);min-height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--u)*2);background:linear-gradient(#0F0B1Eee,#0F0B1E99 70%,#0F0B1E00);}
.brand{font-family:var(--serif);font-weight:700;color:var(--gold);font-size:max(13px,calc(var(--u)*.86));letter-spacing:.04em;text-shadow:0 0 12px #8A4DFF99}
.topbar nav{display:flex;gap:calc(var(--u)*1.9)}
.topbar nav a{font-size:max(13px,calc(var(--u)*.86));font-weight:600;letter-spacing:.08em;padding:.35em .1em;border-bottom:2px solid transparent;opacity:.9}
.topbar nav a:hover{color:var(--gold);border-color:var(--gold);opacity:1}

.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1fr minmax(0,calc(var(--u)*42)) 1fr;align-items:center;
  padding:calc(var(--u)*3.6) calc(var(--u)*1.5) calc(var(--u)*2.4);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(img/bg1.webp) center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 46% 62% at 50% 54%,#0F0B1Ecc 0%,#0F0B1E99 55%,#0F0B1E00 100%),linear-gradient(#0F0B1E66,#0F0B1E00 22%,#0F0B1E00 70%,#0F0B1Ecc)}

.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(var(--u)*1)}
.logo{margin:0;width:calc(var(--u)*33);max-width:100%}
.logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*1.2) #000a)}
.story{position:relative;width:100%;padding:calc(var(--u)*1.2) calc(var(--u)*1.8);background:#140E2Acc;border:1px solid #8A4DFF88;border-radius:calc(var(--u)*.4);
  box-shadow:0 0 0 1px #0008 inset,0 0 calc(var(--u)*2) #8A4DFF33;font-size:max(13px,calc(var(--u)*.88));line-height:1.7;word-break:keep-all}
.story::before,.story::after{content:"";position:absolute;width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);border:2px solid var(--gold)}
.story::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.story::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.story p{margin:0 0 .75em}
.story p:first-child{color:var(--sky);font-weight:600}
.story p:last-child{margin:0;color:var(--gold);font-weight:700}
.cta{display:inline-block;padding:.7em 2.6em;font-size:max(15px,calc(var(--u)*1.05));font-weight:800;letter-spacing:.12em;color:#1B1030;
  background:linear-gradient(#FFE29A,#FFC857 55%,#E7A52E);border:1px solid #FFF1C4;border-radius:999px;box-shadow:0 0 0 3px #1B103099,0 calc(var(--u)*.4) calc(var(--u)*1.4) #FFC85766}
.cta:hover{filter:brightness(1.08)}
.tags{list-style:none;margin:0;padding:0;display:flex;gap:calc(var(--u)*.8);flex-wrap:wrap;justify-content:center}
.tags li{font-size:max(12px,calc(var(--u)*.74));padding:.38em 1em;border:1px solid #59D1FF88;border-radius:999px;background:#0F0B1Ecc;color:var(--sky);letter-spacing:.04em}

.side{position:relative;align-self:stretch;min-height:calc(var(--u)*40)}
.photo{position:absolute;margin:0;width:calc(var(--u)*10.2);padding:calc(var(--u)*.45) calc(var(--u)*.45) calc(var(--u)*.3);background:var(--paper);
  box-shadow:0 calc(var(--u)*.5) calc(var(--u)*1.4) #000b;transition:transform .2s}
.photo:hover{transform:rotate(0) scale(1.04);z-index:5}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#ddd}
.photo figcaption{display:flex;justify-content:space-between;align-items:baseline;padding:.35em .15em 0;color:#2A1E3F;font-family:var(--serif)}
.photo b{font-size:max(12px,calc(var(--u)*.8))}
.photo i{font-style:normal;font-size:max(10px,calc(var(--u)*.6));color:#6A5A7A}
.pin{position:absolute;left:50%;top:calc(var(--u)*-.45);width:calc(var(--u)*.85);height:calc(var(--u)*.85);margin-left:calc(var(--u)*-.42);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFD9E6,#FF6CA8 45%,#8B1E4A);box-shadow:0 calc(var(--u)*.2) calc(var(--u)*.3) #0009}
.left .c1{left:6%;top:6%;transform:rotate(-6deg)}
.left .c2{left:44%;top:30%;transform:rotate(4deg)}
.left .c3{left:9%;top:57%;transform:rotate(-3deg)}
.right .c4{right:42%;top:4%;transform:rotate(5deg)}
.right .c5{right:6%;top:20%;transform:rotate(-4deg)}
.poster{position:absolute;right:16%;bottom:0;width:calc(var(--u)*13.2);height:auto;transform:rotate(3deg);filter:drop-shadow(0 calc(var(--u)*.6) calc(var(--u)*1.2) #000c)}

.notice{position:absolute;left:0;right:0;margin-top:calc(var(--u)*-1.9);text-align:center;font-size:max(11px,calc(var(--u)*.66));color:#EDE7FFaa;letter-spacing:.08em}

/* 좁은 화면 — PC 화면을 접은 꼴 */
@media (max-width:900px){
  :root{--u:2.2vw}
  .hero{grid-template-columns:1fr;gap:calc(var(--u)*2);padding-top:calc(var(--u)*6)}
  .topbar nav{gap:calc(var(--u)*1.2)}
  .brand{display:none}
  .side{min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:calc(var(--u)*1.6)}
  .photo,.poster{position:static}
  .photo{width:calc(var(--u)*12.5)}
  .poster{width:calc(var(--u)*18);align-self:center}
  .right{order:3}.left{order:2}.center{order:1}
  .notice{position:static;margin:calc(var(--u)*1) 0}
}

/* 여러 화면이 같이 쓰는 것 */
.topbar nav a.on{color:var(--gold);border-color:var(--gold);opacity:1}
.notice.static{position:static;margin:calc(var(--u)*.6) 0 calc(var(--u)*1.2)}

/* 언어 고르기 — 맨 위 줄 오른쪽 끝 */
.top-right{display:flex;align-items:center;gap:calc(var(--u)*1.8)}
.lang{position:relative;font-size:max(12px,calc(var(--u)*.78))}
.lang summary{list-style:none;display:flex;align-items:center;gap:.45em;padding:.38em .95em;cursor:pointer;color:var(--gold);border:1px solid #FFC85799;border-radius:999px;background:#0F0B1Ecc;font-weight:600;letter-spacing:.04em}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:.42em;height:.42em;margin-left:.15em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg)}
.lang[open] summary{background:#3B2A66;border-color:var(--gold)}
.lang ul{position:absolute;right:0;top:calc(100% + .5em);min-width:14em;margin:0;padding:.4em;list-style:none;background:#140E2Af5;border:1px solid #FFC857aa;border-radius:calc(var(--u)*.4);box-shadow:0 calc(var(--u)*.5) calc(var(--u)*1.4) #000c}
.lang li>*{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.5em .8em;border-radius:calc(var(--u)*.25)}
.lang a.on{color:var(--gold);background:#3B2A66;font-weight:700}
.lang .soon{color:#EDE7FF77;cursor:default}
.lang .soon small{font-size:.82em;white-space:nowrap}
@media (max-width:900px){
  .topbar{height:auto;padding:calc(var(--u)*1) calc(var(--u)*1.5);background:#0F0B1Eee}
  .top-right{width:100%;justify-content:space-between;gap:calc(var(--u)*1)}
}