.extra-panel{display:grid;gap:20px}
.viewpoint-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.viewpoint-button.explore-choice{padding:0;overflow:hidden;text-align:center}
.viewpoint-button img{display:block;width:100%;height:auto;aspect-ratio:2.1;object-fit:cover;object-position:50% 33%;filter:brightness(.78)}
.viewpoint-button[aria-pressed=true] img,.viewpoint-button:hover img{filter:none}
.viewpoint-button span{display:grid;place-items:center;min-height:40px;padding:5px;color:#e0e8dd}
.viewpoint-frame{min-height:320px}
.draft-layout{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:28px;margin-top:60px}
.draft-phone{width:100%;max-width:555px;background:#111813;border:1px solid #38533d;padding:20px;box-shadow:0 12px 38px #0004}
.draft-status{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0;color:#cddacb;font-size:13px}
.draft-status span{font-size:11px;color:#bcdfaa}
.draft-screen{display:grid;align-items:center;min-height:84px;padding:14px;margin:16px 0;background:#0b110d;border:1px solid #405744}
.draft-screen p{margin:0;color:#e3eee0;font-size:16px;line-height:1.65}
.draft-screen.is-empty p{color:#98a796;font-size:13px}
.draft-controls{display:flex;flex-wrap:wrap;gap:7px}
.draft-controls .explore-choice{flex:1 1 auto}
.race-panel{background:linear-gradient(155deg,#10201a,#0b110e 60%)}
.race-lane{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:19px 10px;background:repeating-linear-gradient(110deg,transparent 0 38px,#83c69408 40px 41px),#10251d;border-block:1px dashed #7eae6b}
.race-lane .explore-choice{font-family:monospace;letter-spacing:1px}
.race-result{max-width:68ch;padding:25px 0 0;min-height:172px}
.race-result h3{margin-top:14px}
.portrait-zoom{position:relative;display:block;width:100%;padding:0;background:#09110e;border:0;text-align:left}
.profile-portrait .portrait-zoom{position:absolute;inset:0}
.portrait-zoom img{display:block}
.person .portrait-zoom{margin-bottom:24px}
.person .portrait-zoom .person-portrait{margin-bottom:0}
.portrait-zoom-icon{position:absolute;bottom:10px;right:10px;display:grid;place-items:center;width:34px;height:34px;background:#07110de8;color:#ddf5d4;border:1px solid #63815c;font-size:17px}
.portrait-zoom:hover .portrait-zoom-icon,.portrait-zoom:focus-visible .portrait-zoom-icon{border-color:var(--neon);color:var(--neon)}
.portrait-zoom:focus-visible{z-index:1;outline-offset:-4px}
html:has(.portrait-dialog[open]){overflow:hidden}
.portrait-dialog{width:min(calc(100% - 32px),1030px);max-height:calc(100dvh - 32px);padding:0;border:1px solid #50704c;background:#090f0c;color:var(--white)}
.portrait-dialog::backdrop{background:#020605e8;backdrop-filter:blur(7px)}
.portrait-gallery{padding:clamp(12px,3vw,25px)}
.gallery-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gallery-header h2{font-size:18px;margin:0;font-weight:400}
.gallery-close{display:grid;place-items:center;width:44px;height:44px;background:#111a14;border:1px solid #455a45;color:#d6e9cc;font-size:24px;line-height:1}
.gallery-image{display:block;width:100%;height:min(64dvh,655px);object-fit:contain;touch-action:pan-y pinch-zoom;background:#060a08}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:#bacbb5;font-size:12px}
.gallery-controls .explore-choice{min-width:52px;font-size:17px}
@media(max-width:700px){
  .viewpoint-picker{gap:6px}
  .viewpoint-button span{min-height:37px;font-size:10px}
  .viewpoint-button img{aspect-ratio:1}
  .viewpoint-frame{min-height:320px}
  .draft-layout{grid-template-columns:1fr;gap:17px;margin-top:38px}
  .draft-phone{padding:15px}
  .draft-controls .explore-choice{font-size:11px;padding-inline:5px}
  .race-lane{gap:5px;padding-inline:5px}
  .race-lane .explore-choice{padding-inline:4px;font-size:11px}
  .race-result{min-height:210px}
  .gallery-image{height:auto;aspect-ratio:1216/832;max-height:58dvh}
}

.hero-title{font-family:'Noto Sans KR',sans-serif;font-size:clamp(75px,8.8vw,129px);font-weight:900;line-height:1.02;letter-spacing:-.075em;word-break:keep-all}
.hero-title span{display:block;color:#e3e6e2}
.hero-title span:last-child{color:#d1ddcd}
.brand{font-family:'Noto Sans KR',sans-serif;letter-spacing:0}
@media(max-width:700px){.hero-title{font-size:clamp(51px,16vw,86px);line-height:1.06}}