:root{color-scheme:light;--ink:#181818;--muted:#686868;--line:#dcdcd8;--paper:#fafaf8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #555;outline-offset:5px}header{height:106px;margin:0 4.7%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-family:Georgia,serif;font-size:29px;letter-spacing:3px;text-decoration:none;color:inherit}.wordmark span{font:12px Arial,sans-serif;display:block;letter-spacing:5px;margin-top:7px}.header-note{font-size:14px;color:var(--muted);margin-left:auto;margin-right:70px}.edition{font-size:12px;letter-spacing:2px}main{max-width:1600px;margin:auto;display:grid;grid-template-columns:41% 59%;padding:45px 4.7% 28px}aside{padding-right:13%;border-right:1px solid var(--line)}.aside-top,.aside-bottom{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1.5px}.editorial{position:relative;height:clamp(400px,56vh,650px);margin:21px 0;background:#333;overflow:hidden}.editorial img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.editorial:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.6))}.editorial-caption{position:absolute;bottom:32px;left:28px;color:white;z-index:1}.editorial-caption>span{font:italic 37px/1.13 Georgia,serif;letter-spacing:-1px}.editorial-caption p{font-size:13px;margin-top:20px}.aside-bottom{gap:16px;flex-wrap:wrap;letter-spacing:.6px;color:var(--muted);font-size:12px}.workspace{padding-left:12%;min-width:0}.topline{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}#counter{letter-spacing:2px;color:var(--ink)}.progress{height:2px;background:var(--line);margin-top:20px}.progress span{display:block;height:100%;background:var(--ink);width:0;transition:width .45s ease}#screen{min-height:500px;padding-top:45px;animation:enter .45s ease}.eyebrow{font-size:12px;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase}.question-heading{display:flex;gap:24px;align-items:baseline;margin:22px 0 20px}.question-heading .number{font:italic 48px Georgia,serif;color:#b6b6b0}.question-heading h1{font-size:36px;font-weight:400;margin:0;letter-spacing:-1.5px}h1:focus{outline:none}.intro{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 30px}.choices{display:grid;gap:0;border-top:1px solid var(--line)}.choice{display:flex;align-items:center;gap:20px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:23px 18px 23px 4px;text-align:left;color:var(--ink);cursor:pointer;min-height:89px;width:100%;transition:background .2s,padding .2s,color .2s}.choice:hover{background:#f0f0ec;padding-left:15px}.choice.selected{background:var(--ink);color:white;padding-left:15px}.letter{font:italic 19px Georgia,serif;color:var(--muted);width:23px;flex-shrink:0}.selected .letter{color:#ccc}.choice-copy{flex:1;font-size:17px;line-height:1.55;word-break:keep-all}.type-label{display:block;font-size:11px;letter-spacing:1.6px;margin-top:3px;color:var(--muted)}.selected .type-label{color:#ccc}.circle{width:19px;height:19px;border:1px solid #999;border-radius:50%;flex-shrink:0}.selected .circle{border-color:white;background:white;box-shadow:inset 0 0 0 5px var(--ink)}.navigation{display:flex;justify-content:space-between;align-items:center;margin:27px 0 30px;gap:12px}.text-button{border:0;padding:8px 0;background:transparent;color:var(--ink);font-size:14px;cursor:pointer}.text-button:disabled{color:#aaa;cursor:default}.nav-hint{font-size:12px;color:var(--muted)}footer{font-size:12px;line-height:1.8;color:var(--muted);padding-top:23px;border-top:1px solid var(--line)}.mobile-break{display:none}.result-title{font:clamp(42px,5vw,70px)/1.07 Georgia,serif;letter-spacing:-2px;margin:22px 0}.result-desc{font-size:17px;line-height:1.8;word-break:keep-all}.result-note{font-size:14px;color:var(--muted);line-height:1.8}.scores{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0}.score{padding:18px 0;color:var(--muted);font-size:13px}.score strong{display:block;font:28px Georgia,serif;margin-top:8px}.score.winner{color:var(--ink)}.summary-title{font-size:16px;font-weight:400;margin:32px 0 14px}.summary-row{display:grid;grid-template-columns:70px 1fr 36px;gap:12px;border-bottom:1px solid var(--line);padding:14px 0;align-items:center;font-size:14px;line-height:1.5}.summary-row>span:first-child{color:var(--muted)}.summary-row small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.summary-row button{border:0;background:none;font-size:12px;text-decoration:underline;cursor:pointer;padding:10px 0}.restart{display:block;width:100%;padding:19px;background:var(--ink);color:white;border:1px solid var(--ink);cursor:pointer;margin:28px 0}.restart:hover{background:#363636}.result-back{margin-bottom:22px}.duplicate-note{font-size:12px;line-height:1.7;color:var(--muted);margin:18px 0 0}@keyframes enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){header{max-width:1450px;margin:auto}}@media(max-width:1000px){main{grid-template-columns:35% 65%}aside{padding-right:10%}.workspace{padding-left:9%}.editorial-caption{left:18px}.editorial-caption>span{font-size:29px}.header-note{margin-right:35px}.question-heading h1{font-size:32px}}@media(max-width:700px){header{height:83px;margin:0 24px}.wordmark{font-size:22px;letter-spacing:2px}.wordmark span{font-size:10px;margin-top:4px}.header-note{display:none}.edition{font-size:11px}main{display:block;padding:28px 24px}aside{display:none}.workspace{padding:0}.topline{font-size:12px}#screen{padding-top:35px;min-height:490px}.question-heading{margin:20px 0 18px;gap:20px}.question-heading h1{font-size:32px}.question-heading .number{font-size:42px}.intro{font-size:14px;margin-bottom:26px}.choice{min-height:93px;padding:21px 8px 21px 3px;gap:15px}.choice-copy{font-size:16px}.navigation{margin-top:25px}.mobile-break{display:block}.result-title{font-size:52px}.summary-row{grid-template-columns:65px 1fr 32px;gap:10px}footer{font-size:12px}.result-desc{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* STARRYBLUE brand details shared by every question and result. */
:root{--number-blue:#788c9f}
.wordmark{display:flex;align-items:center;line-height:1}
.brand-logo{display:block;width:220px;height:auto}
.question-heading .number,#counter,.edition,.aside-top span:last-child{color:var(--number-blue)}
.instagram-link{display:flex;align-items:center;gap:9px;width:fit-content;min-height:44px;margin-top:16px;color:var(--muted);font-size:14px;text-decoration:none;letter-spacing:.2px}
.instagram-link svg{flex-shrink:0}
.instagram-link:hover span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.brand-logo{width:180px}}

/* Comfortable reading and touch targets on narrow screens. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.choice-copy,.summary-row>span{min-width:0;overflow-wrap:anywhere}
.text-button,.summary-row button{min-height:44px}
@media(max-width:820px){
  header{height:80px;margin:0 max(20px,env(safe-area-inset-left)) 0 max(20px,env(safe-area-inset-right));gap:20px}
  .brand-logo{width:clamp(150px,43vw,190px);max-width:100%;height:auto}
  .wordmark{min-width:0}.header-note{display:none}.edition{flex-shrink:0;font-size:12px}
  main{display:block;padding:24px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  aside{display:none}.workspace{padding:0;max-width:580px;margin:auto}
  .topline{font-size:12px;gap:12px}.progress{margin-top:16px}
  #screen{min-height:0;padding-top:28px}
  .question-heading{gap:18px;margin:18px 0 16px}
  .question-heading h1{font-size:clamp(28px,7.5vw,34px);line-height:1.3;word-break:keep-all}
  .question-heading .number{font-size:42px;flex-shrink:0}
  .intro{font-size:16px;line-height:1.65;margin-bottom:22px;word-break:keep-all}
  .choice{min-height:86px;gap:12px;padding:18px 10px 18px 4px}
  .choice-copy{font-size:16px;line-height:1.6}.type-label{font-size:12px;letter-spacing:1px}
  .letter{width:20px}.circle{width:20px;height:20px}
  .navigation{margin:18px 0 22px;flex-wrap:wrap;gap:4px 12px}
  .text-button{padding:10px 0}.nav-hint{line-height:1.6;margin-left:auto;text-align:right}
  .duplicate-note{font-size:13px;line-height:1.8}
  footer{padding-top:20px;line-height:1.8;font-size:12px;word-break:keep-all}
  .mobile-break{display:none}.instagram-link{margin-top:12px;padding:8px 0;font-size:14px}
  .result-title{font-size:clamp(40px,12vw,58px);line-height:1.12;overflow-wrap:anywhere}
  .result-desc{font-size:16px}.result-note{font-size:14px}
  .scores{gap:10px}.score{font-size:13px}
  .summary-row{grid-template-columns:60px minmax(0,1fr) 44px;gap:10px;font-size:14px;line-height:1.65}
  .summary-row button{min-width:44px;font-size:13px}
  .restart{min-height:52px;margin:24px 0 14px}.result-back{margin-bottom:20px}
}
@media(max-width:360px){
  header{gap:12px}.navigation{align-items:flex-start;flex-direction:column}
  .nav-hint{margin-left:0;text-align:left}.summary-row{gap:7px;grid-template-columns:54px minmax(0,1fr) 44px}
}
@media(hover:none){.choice:hover:not(.selected){background:transparent;padding-left:4px}}

.trademark-notice{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px;line-height:1.85;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.trademark-notice span{display:inline-block;margin-top:3px}
.topline>span:first-child{min-width:0;word-break:keep-all}
#counter{flex-shrink:0}
@media(max-width:820px){.eyebrow{line-height:1.8;letter-spacing:1.5px}}