*{box-sizing:border-box}
:root{--ink:#211737;--muted:#746985;--paper:#fffdf8;--gold:#d9a83f;--coral:#f0526f;--teal:#148c8c;--indigo:#2c235c;--line:#e9e0cf;--shadow:0 20px 55px #34215020}
html{scroll-behavior:smooth}
body{margin:0;font-family:Pretendard,'Noto Sans KR',Arial,sans-serif;color:var(--ink);background:#f5f1e9}
button,input,select{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit}
.art-hero{position:relative;min-height:560px;display:flex;align-items:end;overflow:hidden;background:#1b1737 url('assets/art-masterpieces-hero.webp') center/cover no-repeat;color:#fff}
.art-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0d1025e8 0%,#16152a9c 35%,#10152c10 73%),linear-gradient(0deg,#0b1027bd,transparent 55%)}
.art-hero__inner{position:relative;z-index:2;width:min(1260px,100%);margin:auto;padding:90px clamp(20px,5vw,72px) 64px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #f7d47e7a;border-radius:999px;background:#11162c91;color:#ffe29a;font-size:11px;font-weight:1000;letter-spacing:2px}
.art-hero h1{max-width:760px;margin:15px 0 16px;font-size:clamp(47px,7vw,88px);line-height:.95;letter-spacing:-4px}.art-hero h1 em{color:#ffdb7a;font-style:normal}
.art-hero p{max-width:670px;margin:0;color:#f5efe4;font-size:clamp(16px,1.5vw,21px);font-weight:700;line-height:1.65;text-shadow:0 3px 18px #000}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.hero-actions a,.hero-actions button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:0;border-radius:15px;background:linear-gradient(135deg,#ffdd75,#ee9e3d);color:#32203b;text-decoration:none;font-weight:1000;box-shadow:0 10px 28px #0005;cursor:pointer}.hero-actions .ghost{border:1px solid #ffffff70;background:#ffffff18;color:#fff;backdrop-filter:blur(10px)}
.museum-shell{width:min(1260px,100%);margin:auto;padding:30px clamp(16px,3vw,34px) 90px}
.setup{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:-34px;position:relative;z-index:4}
.panel{padding:26px;border-radius:28px;background:#fff;box-shadow:var(--shadow);border:1px solid #eee6d7}
.panel h2{margin:0 0 7px;font-size:clamp(27px,3vw,40px);letter-spacing:-1.5px}.panel-lead{margin:0 0 22px;color:var(--muted);line-height:1.55;font-weight:700}
.field{margin-top:18px}.field>span{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;color:#5f536e;font-size:12px;font-weight:1000;letter-spacing:.5px}.field small{color:#9d91aa;font-weight:700}
.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.segments.cols-5{grid-template-columns:repeat(5,1fr)}
.segments button,.region-grid button{min-height:48px;border:1px solid #e2d9cb;border-radius:14px;background:#faf7f1;color:#5d516d;font-weight:950;cursor:pointer;transition:.16s}.segments button:hover,.region-grid button:hover{transform:translateY(-2px);border-color:#c9aa67}.segments button.active,.region-grid button.active{background:var(--indigo);border-color:var(--indigo);color:#fff;box-shadow:0 8px 20px #2c235c3d}
.region-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.region-grid button{padding:9px 10px;text-align:left;font-size:12px}
.start-btn{width:100%;min-height:58px;margin-top:23px;border:0;border-radius:17px;background:linear-gradient(135deg,#e8b943,#f05c68 82%);color:#fff;font-weight:1000;font-size:17px;box-shadow:0 12px 28px #dd6d5448;cursor:pointer}.start-btn:hover{filter:saturate(1.08);transform:translateY(-2px)}
.curation-note{display:grid;gap:12px}.curation-note article{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;padding:15px;border-radius:18px;background:#f9f6ef;border:1px solid #ece3d5}.curation-note b{width:37px;height:37px;display:grid;place-items:center;border-radius:12px;background:#2c235c;color:#ffe192}.curation-note strong{display:block;margin-bottom:4px}.curation-note p{margin:0;color:#766b7e;font-size:13px;line-height:1.5}.source-note{margin-top:15px;padding:13px;border-radius:15px;background:#f1f8f6;color:#42655e;font-size:12px;line-height:1.55}.source-note a{font-weight:950}
.game-screen{display:none}.game-screen.active{display:block}.setup.hidden{display:none}
.game-top{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:16px 18px;margin:18px 0;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.progress-copy b{display:block;font-size:15px}.progress-copy span{color:#8b8097;font-size:11px;font-weight:800}.progress-track{height:8px;margin-top:8px;border-radius:10px;background:#eee7dc;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e7b93d,#f0526f);transition:.3s}
.score-pill{min-width:96px;padding:10px 12px;border-radius:14px;background:#f6f1e9;text-align:center}.score-pill small{display:block;color:#8b7e8f;font-size:9px;font-weight:1000;letter-spacing:1px}.score-pill b{font-size:18px}.exit-btn{min-height:43px;padding:0 14px;border:1px solid #ddd2c2;border-radius:13px;background:#fff;color:#695d72;font-weight:950;cursor:pointer}
.quiz-layout{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(330px,.76fr);gap:20px;align-items:start}
.frame-card{position:relative;padding:15px;border-radius:29px;background:linear-gradient(145deg,#c99b39,#f3d982 25%,#956727 64%,#f6e09a);box-shadow:0 28px 65px #3020482c}.frame-inner{position:relative;min-height:540px;border:8px solid #33264c;border-radius:18px;overflow:hidden;background:#211b36;display:grid;place-items:center}.frame-inner img{width:100%;height:100%;max-height:680px;object-fit:contain;background:#19162a;display:block}.image-loading{position:absolute;inset:0;display:grid;place-items:center;padding:30px;background:radial-gradient(circle,#3e3265,#1b1730);color:#f5df9d;text-align:center;font-weight:900}.image-loading.hidden{display:none}.image-loading button{margin-top:12px;min-height:42px;padding:0 15px;border:0;border-radius:12px;background:#ffe08a;color:#34244a;font-weight:1000;cursor:pointer}
.question-card{padding:24px;border-radius:28px;background:#fff;box-shadow:var(--shadow)}.question-kicker{color:#d88732;font-size:11px;font-weight:1000;letter-spacing:1.7px}.question-card h2{margin:8px 0 18px;font-size:clamp(25px,3vw,38px);letter-spacing:-1.4px;line-height:1.17}.answers{display:grid;gap:9px}.answer{min-height:58px;padding:12px 15px;border:1px solid #e2d9cb;border-radius:16px;background:#fbf8f2;color:#443753;text-align:left;font-weight:900;cursor:pointer;transition:.16s}.answer:hover:not(:disabled){transform:translateX(4px);border-color:#d7ad4c}.answer:disabled{cursor:default}.answer.correct{border-color:#15966e;background:#e8faf3;color:#116e54}.answer.wrong{border-color:#e24f65;background:#fff0f2;color:#b92d43}.hint-line{margin:14px 0 0;color:#877b91;font-size:12px;line-height:1.5}
.story-card{display:none;margin-top:14px;padding:20px;border-radius:20px;background:linear-gradient(145deg,#fff7df,#fff);border:1px solid #ead6a7}.story-card.open{display:block;animation:rise .25s ease-out}@keyframes rise{from{opacity:0;transform:translateY(7px)}}.result-mark{font-size:13px;font-weight:1000}.result-mark.good{color:#11805e}.result-mark.bad{color:#c33b52}.story-title{margin:7px 0 2px;font-size:22px}.story-meta{color:#7b6d80;font-size:12px;font-weight:850}.story-card h4{margin:14px 0 5px;color:#8d5a1c}.story-card p{margin:0;color:#5e5266;font-size:13px;line-height:1.62}.story-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.story-actions button,.story-actions a{min-height:45px;display:flex;align-items:center;justify-content:center;border:0;border-radius:13px;background:#2c235c;color:#fff;text-decoration:none;font-weight:1000;cursor:pointer}.story-actions .favorite{background:#f4e9d5;color:#6a4b26}.story-actions .favorite.on{background:#ffe08a;color:#5c3f13}.story-actions .source-link{background:#ecf5f3;color:#28665b}.next-btn{grid-column:1/-1;background:linear-gradient(135deg,#e8b941,#ef5b6d)!important}
.result-screen{display:none;padding:34px;border-radius:30px;background:#fff;box-shadow:var(--shadow);text-align:center}.result-screen.active{display:block}.result-screen .trophy{font-size:64px}.result-screen h2{font-size:clamp(34px,5vw,58px);margin:8px 0}.result-screen>p{color:#766a82;font-weight:700}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.result-stats article{padding:17px;border-radius:18px;background:#f7f3ec}.result-stats b{display:block;font-size:28px}.result-stats span{color:#8b7f92;font-size:11px;font-weight:900}.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}.result-actions button,.result-actions a{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:0;border-radius:15px;background:#2c235c;color:#fff;text-decoration:none;font-weight:1000;cursor:pointer}.result-actions .primary{background:linear-gradient(135deg,#e8b941,#ef5b6d)}
.gallery-controls{position:sticky;top:80px;z-index:5;display:grid;grid-template-columns:minmax(170px,1fr) repeat(2,minmax(150px,.55fr));gap:9px;margin:22px 0;padding:12px;border-radius:19px;background:#ffffffeb;box-shadow:0 12px 35px #2f1f4922;backdrop-filter:blur(15px)}.gallery-controls input,.gallery-controls select{min-height:47px;border:1px solid #ded4c5;border-radius:13px;background:#fff;padding:0 13px;color:#4b3f58;font-weight:800}.gallery-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 17px}.gallery-stats span{padding:9px 12px;border-radius:999px;background:#fff;color:#665873;font-size:11px;font-weight:950;box-shadow:0 7px 20px #3b294414}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.art-card{overflow:hidden;border-radius:23px;background:#fff;box-shadow:0 14px 35px #37244718;border:1px solid #ece3d5}.art-card__image{position:relative;aspect-ratio:4/3;background:#211b36;overflow:hidden}.art-card__image img{width:100%;height:100%;object-fit:cover;transition:.35s}.art-card:hover img{transform:scale(1.035)}.art-card__image .badge{position:absolute;left:10px;top:10px;padding:7px 9px;border-radius:999px;background:#161328c9;color:#ffe39a;font-size:9px;font-weight:1000;backdrop-filter:blur(8px)}.art-card__body{padding:17px}.art-card h3{margin:0;font-size:20px}.art-card .meta{margin:5px 0 12px;color:#887b8d;font-size:11px;font-weight:850}.art-card p{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0;color:#65596d;font-size:12px;line-height:1.55}.art-card__actions{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:14px}.art-card button,.art-card a{min-height:42px;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:#2c235c;color:#fff;text-decoration:none;font-weight:950;cursor:pointer}.art-card button{width:44px;background:#f4e7d1;color:#744e25}.art-card button.on{background:#ffe084}.empty{grid-column:1/-1;padding:50px;border-radius:25px;background:#fff;text-align:center;color:#786b82;font-weight:800}
.detail-modal{position:fixed;z-index:2147483200;inset:0;display:none;place-items:center;padding:18px;background:#151026c9;backdrop-filter:blur(10px)}.detail-modal.open{display:grid}.detail-dialog{position:relative;width:min(980px,100%);max-height:90vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;border-radius:27px;background:#fff;box-shadow:0 30px 100px #0008}.detail-image{min-height:560px;background:#201a34;display:grid;place-items:center}.detail-image img{width:100%;height:100%;max-height:760px;object-fit:contain}.detail-copy{padding:32px}.detail-copy h2{font-size:34px;margin:6px 0}.detail-copy .meta{color:#83768b;font-size:12px;font-weight:900}.detail-copy h3{margin:22px 0 7px;color:#a16b23}.detail-copy p{color:#5f5368;line-height:1.7}.detail-copy .dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.detail-copy button,.detail-copy a{min-height:45px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:13px;background:#2c235c;color:#fff;text-decoration:none;font-weight:1000;cursor:pointer}.modal-close{position:absolute;right:12px;top:12px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#35264b;font-size:20px;box-shadow:0 8px 22px #0003;cursor:pointer}
.online-note{margin:24px 0 0;padding:14px 16px;border-radius:16px;background:#fff6db;color:#725823;font-size:12px;line-height:1.55}
@media(max-width:980px){.setup,.quiz-layout{grid-template-columns:1fr}.frame-inner{min-height:480px}.question-card{margin-top:0}.gallery-grid{grid-template-columns:repeat(2,1fr)}.detail-dialog{grid-template-columns:1fr}.detail-image{min-height:360px}.detail-copy{padding:24px}}
@media(max-width:680px){.art-hero{min-height:510px;background-position:57% center}.art-hero__inner{padding:70px 20px 42px}.art-hero h1{letter-spacing:-2.8px}.museum-shell{padding-top:20px}.setup{margin-top:0}.panel{padding:20px}.segments.cols-5{grid-template-columns:repeat(2,1fr)}.region-grid{grid-template-columns:1fr}.game-top{grid-template-columns:1fr auto}.score-pill:nth-of-type(2){display:none}.frame-card{padding:9px;border-radius:21px}.frame-inner{min-height:370px;border-width:5px}.question-card{padding:19px}.story-actions{grid-template-columns:1fr}.next-btn{grid-column:auto}.result-stats{grid-template-columns:1fr}.gallery-controls{top:70px;grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr}.detail-image{min-height:300px}.detail-copy h2{font-size:27px}}