/* Selected concept 07: a quiet pixel-art gallery. The quiz data stays unchanged. */
:root{--paper:#f5f5f5;--ink:#25272a;--muted:#626974;--teal:#555b64;--line:#d4d6d9;--clay:#626974;--surface:#ffffff;--serif:'Noto Sans CJK KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:var(--paper)}
body{background:#f5f5f5}
h1,h2,h3{font-family:var(--serif)}
.site-header{max-width:1100px;height:88px;border-bottom:1px solid #dedfe1;background:#fff;padding-inline:30px}
.site-header .wordmark{font-size:27px;letter-spacing:2px;font-weight:500;min-height:44px;padding-inline:5px}
.site-header .wordmark-dot{color:var(--muted)}
.site-header .header-note{color:var(--muted);letter-spacing:0}
.site-header .quiet-button{min-height:44px;color:#626974}
.primary-button,.secondary-button{min-height:48px;border-radius:0;border:1px solid #9ca2ab;font-weight:500}
.primary-button{background:#555b64;color:#fff}
.primary-button:hover{background:#414750}
.secondary-button{background:#fff;color:#343a43}
.quiet-button,.text-link{min-height:44px}
.eyebrow{letter-spacing:0;color:var(--muted);font-weight:500}

/* Intro: title, subtitle, one complete framed scene, then the invitation. */
.home{max-width:660px;margin:32px auto 55px;padding:0 30px}
.home .intro-layout{display:flex;flex-direction:column;align-items:center;gap:0}
.home .intro-copy{display:contents}
.home .intro-copy h1{order:0;font-size:52px;font-weight:400;letter-spacing:6px;line-height:1.4;margin:0 0 10px;text-align:center}
.home .intro-copy .eyebrow{order:1;font-size:17px;line-height:1.7;letter-spacing:0;text-align:center;margin:0}
.home .cover-mosaic{order:2;display:block;width:100%;max-width:540px;transform:none;margin:30px 0;background:#fff;border:1px solid #d4d6d9;padding:12px;box-shadow:0 6px 13px #24262b0c}
.home .cover-mosaic>.scene-art{display:none;border:0;border-radius:0;box-shadow:none;transform:none;height:auto;aspect-ratio:auto;background:#fff}
.home .cover-mosaic>.scene-art:first-child{display:block}
.home .intro-copy>p:not(.eyebrow):not(.small){order:3;font-size:14px;line-height:1.9;text-align:center;color:var(--muted);margin:0}
.home .intro-copy .button-row{order:4;justify-content:center;align-self:stretch;margin:22px 0 0}
.home .button-row>button{min-width:150px}
.home .intro-copy .small{order:5;font-size:12px;line-height:1.8;text-align:center;margin:17px 0 0;color:var(--muted)}
.home .home-footer{margin-top:34px;padding-top:22px;border-top:1px solid #d8dadd;justify-content:center;text-align:center;flex-direction:column;gap:8px}
.home .home-footer p{font-size:12px;line-height:1.8}
.home .home-footer strong{font-weight:500}

/* Scene before caption. Shadow framing keeps the SVG's measured ratio intact. */
.walk{max-width:650px;margin:22px auto 0;padding:0 24px 25px;gap:14px}
.walk .walk-header{height:auto;min-height:28px;padding:0;color:var(--muted)}
.walk .scene-number{font-size:12px;font-weight:500}
.walk .step-track{gap:7px}
.walk .step{height:3px;border-radius:0;background:#d8dade}
.walk .step.done,.walk .step.current{background:#555b64}
.walk .criterion-frame{width:100%;min-width:0;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.walk .scene-example{display:flex;flex-direction:column;padding:0;gap:18px;margin:0 0 20px;background:transparent;border-radius:0;position:relative}
.walk .scene-example>.context-art{order:0;display:block;width:100%;height:auto;aspect-ratio:auto;margin:10px 0;border:0;padding:0;border-radius:0;background:#fff;box-shadow:0 0 0 9px #fff,0 0 0 10px #d4d6d9,0 6px 13px 10px #24262b0c}
.walk .scene-example #scene-title{order:1;text-align:left;font-family:var(--serif);font-size:20px;line-height:1.6;font-weight:500;letter-spacing:-.4px;background:#e4dfed;color:#302d35;border:0;padding:20px 22px;margin:0;width:100%;box-sizing:border-box}
.walk .scene-example>.scene-context{order:2;font-size:14px;line-height:1.8;color:var(--muted);margin:0;padding:0 12px}
.walk .scene-example>.load-status{position:absolute;inset:18px 12px auto;margin:0;padding:9px;background:#ffffffeb;color:#626974;border:1px solid #d4d6d9;border-radius:0;text-align:center;font-size:12px;pointer-events:none;z-index:1}
.walk .scene-choices{grid-template-columns:1fr;gap:10px}
.walk .choice-hit{position:static;min-height:60px;border:1px solid #d2d5da;border-radius:0;background:#fff;color:#33373c;box-shadow:none;transition:background-color .12s,border-color .12s}
.walk .criterion-choices .choice-caption{padding:16px 15px;min-height:60px;align-items:center;gap:13px;font-size:15px;line-height:1.6}
.walk .choice-letter{width:18px;min-width:18px;height:auto;border:0;border-radius:0;font-size:12px;font-weight:400;color:var(--muted);margin:0}
.walk .choice-criterion{font-size:15px;font-weight:500;line-height:1.6}
.walk .choice-hit.chosen,.walk .choice-hit[aria-pressed="true"]:not(:disabled){border-color:#555b64;background:#e9ebee;box-shadow:none}
@media (hover:hover) and (pointer:fine){.walk .choice-hit:hover:not(:disabled){border-color:#555b64;background:#e9ebee;box-shadow:none}}
.walk .choice-hit:focus-visible{outline:3px solid #555b64;outline-offset:4px;border:1px solid #555b64;box-shadow:none}
.walk .choice-explanation{margin-top:12px;color:var(--muted)}
.walk .choice-explanation>summary{min-height:44px;padding:12px 0;font-size:12px;color:var(--muted)}
.walk .walk-footer{border-top:1px solid #d8dadd;padding-top:9px;min-height:54px}
.walk .walk-footer .quiet-button{min-height:44px;padding:8px 0;color:#626974}
.walk .walk-hint{color:var(--muted)}
.walk .scene-style-label{min-height:44px;color:#626974;padding:10px 8px;font-size:12px}

/* Portraits and written results remain fully available beneath the display. */
.result{max-width:900px;margin:32px auto 60px;padding:0 30px}
.result .result-intro{margin-bottom:30px}
.result .result-intro h1{font-size:27px;font-weight:500;line-height:1.6}
.result .result-intro .eyebrow{font-size:12px}
.result .result-hero{display:flex;flex-direction:column;align-items:center;gap:24px;padding-bottom:32px;text-align:center;border-bottom:1px solid #d2d5da}
.result .result-hero>.portrait{width:180px;aspect-ratio:1;border:12px solid #fff;border-radius:0;outline:1px solid #d6d8dc;box-shadow:0 6px 13px #24262b0c}
.result .result-hero>.name-mark{font-size:42px;background-color:#e9ebee;color:#555b64}
.result .result-hero>div{width:100%;max-width:660px;min-width:0}
.result .result-name{font-size:32px;font-weight:500;line-height:1.5;margin:0 0 15px}
.result .result-description,.result .result-hero>div>p{font-size:14px;line-height:1.9;color:#515761;word-break:keep-all}
.result .result-actions{justify-content:center;gap:10px;margin-top:22px}
.result .result-actions button{min-height:48px;padding:12px 18px;font-size:13px}
.result .whole-choice-story{background:#fff;border:1px solid #d2d5da;border-radius:0;padding:24px;margin-top:30px}
.result .whole-choice-story h2{font-size:20px;font-weight:500}
.result .whole-choice-story p{font-size:14px;line-height:1.95;color:#515761}
.result .criterion-tags>span{background:#eceef1;color:#626974;border-radius:0}
.result .profile-tags>span{background:#f5f5f5}
.result .evidence-card{background:#fff;border:1px solid #d2d5da;border-radius:0}
.result .evidence-art{padding:12px}
.result .evidence-art .scene-art{border-radius:0;margin:0;box-shadow:0 0 0 4px #fff,0 0 0 5px #d6d8dc}
.result .evidence-copy{padding:17px 17px 17px 5px}
.result .evidence-copy .text-link{min-height:44px;padding:11px 0}
.result .evidence-example>summary{min-height:44px;padding:11px 0}
.result .result-letter{max-width:690px;margin:42px auto;padding:26px 0;border-top:1px solid #d2d5da}
.result .result-letter .letter-label{font-size:12px;letter-spacing:0;font-weight:500;color:var(--muted)}
.result .result-letter p{font-size:16px;line-height:2.05;color:#515761}
.result .rank-card{border:1px solid #d2d5da;border-radius:0;background:#fff;padding:17px}
.result .rank-card .portrait{border:4px solid #fff;border-radius:0;outline:1px solid #d6d8dc}
.result .rank-card h3{font-weight:500}
.result .book-box,.result .deeper-invitation{background:#fff;border:1px solid #d2d5da;border-radius:0}
.result .book-box strong{font-family:var(--serif);font-weight:500}
.result .section-title{font-weight:500}
.result .result-end{border-color:#d2d5da}
.thinker-library{max-width:1040px;padding:0 30px}
.thinker-library>h1{font-size:28px;font-weight:500}
.thinker-library .thinker-grid{gap:20px}
.thinker-library .thinker-card{background:#fff;border:1px solid #d2d5da;border-radius:0;padding:22px}
.thinker-library .thinker-card>.portrait{width:85px;border:6px solid #fff;outline:1px solid #d6d8dc;border-radius:0;margin-bottom:18px}
.thinker-library .thinker-card>.name-mark{background-color:#e9ebee;color:#555b64}
.thinker-library .thinker-card h2{font-weight:500}
dialog{background:#fff;border-radius:0;border-color:#d4d6d9}
dialog .dialog-close{min-width:44px;min-height:44px}
dialog h2{font-weight:500}
dialog input{background:#f5f5f5;border-radius:0}
#style-dialog-image>.scene-art{border-radius:0}
.toast{background:#555b64;color:#fff;border-radius:0}

@media(max-width:760px){
  .site-header{height:70px;padding-inline:20px}
  .site-header .wordmark{font-size:25px}
  .home{margin-top:24px;padding-inline:24px}
  .home .intro-copy h1{font-size:43px;margin-bottom:10px}
  .home .intro-copy .eyebrow{font-size:15px}
  .home .cover-mosaic{padding:9px;margin-block:24px}
  .home .intro-copy>p:not(.eyebrow):not(.small){font-size:13px}
  .home .intro-copy .small{font-size:11px}
  .walk{margin-top:16px;padding:0 14px 18px;gap:12px}
  .walk .scene-example{gap:15px;margin-bottom:18px}
  .walk .scene-example #scene-title{font-size:17px;line-height:1.6;margin:0;padding:16px 18px;width:100%}
  .walk .scene-example>.scene-context{font-size:13px;padding:0}
  .walk .criterion-choices .choice-caption{min-height:60px;padding:14px 13px;font-size:14px}
  .walk .choice-criterion{font-size:14px}
  .walk .walk-footer{gap:7px}
  .walk .walk-hint{font-size:10px}
  .result{padding-inline:20px;margin-top:25px}
  .result .result-intro h1{font-size:23px}
  .result .result-hero>.portrait{width:158px}
  .result .result-name{font-size:29px}
  .result .result-hero{gap:22px}
  .result .result-description,.result .result-hero>div>p{font-size:13px}
  .result .whole-choice-story{padding:20px}
  .result .whole-choice-story h2{font-size:18px}
  .result .whole-choice-story p{font-size:13px}
  .result .result-letter{margin-top:32px}
  .result .result-letter p{font-size:15px}
  .thinker-library{padding-inline:20px}
  .thinker-library>h1{font-size:24px}
  .thinker-library .thinker-grid{gap:12px}
  .thinker-library .thinker-card{padding:17px}
}
@media(max-width:370px){
  .site-header{padding-inline:16px}
  .result .result-actions{flex-direction:column;align-items:stretch}
  .thinker-library .thinker-card{padding:14px}
}