:root{--cream:#f7f1e3;--paper:#fffdf7;--green:#173f36;--green-2:#245e4f;--green-soft:#dce9df;--coral:#bd4634;--coral-dark:#8e3025;--mustard:#f2c14e;--navy:#24324a;--ink:#26312d;--muted:#63716b;--line:#d7d1c3;--shadow:0 18px 50px #2f3a311f;--radius-lg:28px;--radius-md:18px;--radius-sm:12px;--font:"Apple SD Gothic Neo", "Noto Sans KR", Pretendard, system-ui, sans-serif}*{box-sizing:border-box}html{background:var(--cream);min-width:320px;color:var(--ink)}body{font-family:var(--font);margin:0;font-size:17px;line-height:1.55}button,a{font:inherit}button{color:inherit}button:not(:disabled),a{cursor:pointer}button:focus-visible,a:focus-visible{outline:4px solid var(--mustard);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.5}h1,h2,h3,p{word-break:keep-all;margin-top:0}.app-shell{background:radial-gradient(circle at 8% 5%, #f2c14e38 0 100px, transparent 101px), radial-gradient(circle at 94% 92%, #e9685024 0 160px, transparent 161px), var(--cream);min-height:100vh;padding:22px clamp(16px,4vw,56px) 36px}.app-header{justify-content:space-between;align-items:center;gap:16px;width:min(1120px,100%);margin:0 auto 18px;display:flex}.brand{color:var(--green);align-items:center;gap:10px;font-weight:900;text-decoration:none;display:inline-flex}.brand-mark,.summary-symbol{color:#fff;background:var(--coral);border-radius:50%;place-items:center;width:38px;height:38px;display:grid;box-shadow:inset 0 -3px #00000024}.history-button{border:1px solid var(--green);min-height:44px;color:var(--green);background:0 0;border-radius:999px;padding:8px 15px;font-size:.88rem;font-weight:800}.activity-card{border-radius:var(--radius-lg);width:min(1120px,100%);min-height:640px;box-shadow:var(--shadow);background:#fffdf7f0;border:1px solid #173f361f;margin:0 auto;padding:clamp(24px,5vw,56px)}.primary-action{background:var(--coral);color:#fff;min-width:190px;min-height:56px;box-shadow:0 6px 0 var(--coral-dark);border:0;border-radius:16px;margin:28px auto 0;padding:13px 24px;font-size:1.05rem;font-weight:900;display:block}.primary-action:active:not(:disabled){box-shadow:0 3px 0 var(--coral-dark);transform:translateY(3px)}.section-heading{text-align:center;max-width:720px;margin:0 auto 32px}.section-heading p,.lens-heading p,.start-copy>p,.summary-stage>p,.history-dialog>p{color:var(--coral-dark);letter-spacing:.08em;margin-bottom:8px;font-size:.86rem;font-weight:900}.section-heading h2,.lens-heading h2,.summary-stage h2{color:var(--green);margin-bottom:8px;font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.2}.section-heading>span,.lens-heading>span{color:var(--muted)}.live-feedback{background:var(--green-soft);min-height:52px;color:var(--green);text-align:center;border-radius:14px;margin:28px auto 0;padding:13px 18px;font-weight:800}.progress-dots{color:var(--muted);justify-content:center;gap:clamp(14px,5vw,50px);margin:24px auto 0;font-size:.85rem;display:flex}.progress-dots span{align-items:center;gap:7px;display:flex}.progress-dots i{border:2px solid var(--line);background:var(--paper);border-radius:50%;place-items:center;width:26px;height:26px;font-style:normal;font-weight:900;display:grid}.progress-dots .is-active{color:var(--green);font-weight:900}.progress-dots .is-active i{border-color:var(--green);background:var(--green);color:#fff}.start-stage{grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);align-items:center;gap:clamp(30px,7vw,90px);min-height:520px;display:grid}.start-copy h1{max-width:620px;color:var(--green);letter-spacing:-.045em;margin-bottom:18px;font-size:clamp(2.35rem,5vw,4.8rem);line-height:1.03}.start-copy>span{max-width:560px;color:var(--muted);font-size:1.08rem;display:block}.start-copy .primary-action{margin-left:0}.start-copy small{color:var(--muted);margin-top:22px;font-size:.82rem;display:block}.start-buttons,.object-shelf{grid-template-columns:repeat(3,1fr);gap:18px 12px;display:grid}.start-buttons{background:#e8dfca;border-radius:42% 58% 46% 54%/48% 43% 57% 52%;padding:32px 26px;transform:rotate(1.4deg)}.start-buttons>*{transform:rotate(-1.4deg)}.button-token-wrap{background:0 0;border:0;flex-direction:column;align-items:center;gap:7px;min-width:82px;display:inline-flex;position:relative}.button-token-action{border-radius:14px;min-height:118px;padding:7px 4px}.button-token-action:hover{background:#173f3612}.button-token{--button-color:#d85f4d;background-color:var(--button-color);place-items:center;width:78px;height:78px;transition:transform .18s,box-shadow .18s;display:grid;position:relative;box-shadow:inset 0 -7px #0000002e,inset 0 4px #ffffff38,0 4px 9px #25302b2e}.button-token--red{--button-color:#d85f4d}.button-token--blue{--button-color:#3475a9}.button-token--yellow{--button-color:#e4b642}.button-token--circle{border-radius:50%}.button-token--square{border-radius:20%}.button-token--triangle{clip-path:polygon(50% 4%,96% 89%,4% 89%)}.button-token--striped:after{content:"";border-radius:inherit;background:repeating-linear-gradient(135deg,#0000 0 8px,#ffffff40 8px 13px);position:absolute;inset:10%}.button-token.is-selected{box-shadow:0 0 0 5px var(--mustard), inset 0 -7px 0 #0000002e, 0 12px 18px #25302b38;transform:translateY(-7px)scale(1.06)}.button-token.is-placed:before{content:"✓";z-index:3;background:var(--green);color:#fff;border-radius:50%;place-items:center;width:24px;height:24px;font-size:.75rem;font-weight:900;display:grid;position:absolute;top:-8px;right:-8px}.button-token.is-compact{width:44px;height:44px;box-shadow:inset 0 -4px #00000029}.holes{z-index:2;grid-template-columns:repeat(2,10px);gap:8px;display:grid;position:relative}.holes i{background:#f8ebcb;border-radius:50%;width:10px;height:10px;box-shadow:inset 0 2px 2px #00000047}.button-token.is-compact .holes{grid-template-columns:repeat(2,6px);gap:4px}.button-token.is-compact .holes i{width:6px;height:6px}.button-name{max-width:118px;color:var(--navy);text-align:center;font-size:.76rem;font-weight:800;line-height:1.25}.is-compact+.button-name,.snapshot-buttons .button-name,.follow-buttons .button-name{display:none}.button-number{z-index:5;background:var(--navy);color:#fff;border-radius:50%;place-items:center;width:26px;height:26px;font-size:.8rem;font-weight:900;display:grid;position:absolute;top:0;right:3px}.criterion-grid{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.criterion-card{border:2px solid var(--line);background:var(--paper);text-align:left;border-radius:22px;min-height:210px;padding:24px 16px;transition:transform .16s,border-color .16s;box-shadow:0 5px #ddd5c3}.criterion-card:hover:not(:disabled){border-color:var(--green);transform:translateY(-5px)}.criterion-card strong{color:var(--green);font-size:1.55rem;display:block}.criterion-mark{background:var(--green-soft);min-height:72px;color:var(--green);border-radius:14px;place-items:center;margin:15px 0;font-size:1.1rem;font-weight:900;display:grid}.criterion-card small{color:var(--muted);font-size:.9rem}.criterion-card:disabled{background:#eeeae0}.lens-heading{text-align:center;margin-bottom:28px}.object-shelf{background:#ebd7b5;border:3px solid #a87d4d;border-radius:18px;max-width:800px;margin:0 auto 34px;padding:22px;box-shadow:inset 0 -8px #754b241f}.group-mat{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.group-mat:has(.group-tray:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}.group-tray{border:2px dashed var(--green-2);background:#f3f6ef;border-radius:22px;flex-direction:column;align-items:center;min-height:180px;padding:18px 13px 13px;display:flex}.group-tray>strong{color:var(--green);font-size:1.04rem}.tray-buttons{flex-wrap:wrap;justify-content:center;gap:8px;min-height:64px;margin:12px 0;display:flex}.group-action{background:var(--green);color:#fff;border:0;border-radius:12px;width:100%;min-height:48px;margin-top:auto;font-weight:900}.counting-tray{background:#ebd7b5;border:3px solid #a87d4d;border-radius:22px;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;max-width:720px;min-height:180px;margin:0 auto 26px;padding:30px;display:flex}.number-choices{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.number-choices button{border:2px solid var(--green);background:var(--paper);width:64px;min-height:56px;color:var(--green);border-radius:14px;font-weight:900}.number-choices button:hover{background:var(--green);color:#fff}.count-progress{color:var(--muted);text-align:center;margin:18px 0 0;font-size:.85rem}.comparison-summary{color:var(--green);justify-content:center;align-items:center;gap:15px;margin:-8px auto 22px;display:flex}.comparison-summary strong{background:var(--green-soft);border-radius:10px;padding:8px 13px}.snapshot-pair{grid-template-columns:1fr 1fr;gap:18px;display:grid}.snapshot-board{border:2px solid var(--line);background:#fffdfa;border-radius:22px;padding:20px}.snapshot-board>p{color:var(--coral-dark);margin-bottom:0;font-size:.8rem;font-weight:900}.snapshot-board>h3{color:var(--green);margin:3px 8px 14px 0;font-size:1.7rem;display:inline-block}.snapshot-board>span{color:var(--muted);font-size:.9rem}.snapshot-groups{gap:10px;display:grid}.snapshot-group{background:#f3f2eb;border-radius:14px;min-height:84px;padding:10px 12px}.snapshot-group>div:first-child{color:var(--green);justify-content:space-between;display:flex}.snapshot-buttons{flex-wrap:wrap;gap:5px;margin-top:8px;display:flex}.focused-token{border:4px solid var(--mustard);border-radius:14px;padding:3px}.follow-object{background:var(--green);color:#fff;text-align:center;border-radius:20px;margin-top:20px;padding:20px}.follow-object h3{margin-bottom:13px}.follow-buttons{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.follow-buttons .button-token-action{min-height:62px}.follow-buttons .button-token-action:hover{background:#ffffff1f}.move-sentence{max-width:760px;margin:16px auto 0;font-weight:800}.move-sentence.is-muted{color:#cbd8d3}.conclusion-choices{gap:14px;max-width:760px;margin:0 auto;display:grid}.conclusion-choices button{border:2px solid var(--line);background:var(--paper);text-align:left;border-radius:16px;min-height:68px;padding:14px 18px;font-weight:800}.conclusion-choices button:hover{border-color:var(--green);background:var(--green-soft)}.summary-stage{text-align:center;max-width:760px;margin:30px auto}.summary-symbol{width:80px;height:80px;margin:0 auto 20px;font-size:2.5rem}.summary-sentences{gap:12px;margin-top:28px;display:grid}.summary-sentences span{background:var(--green-soft);color:var(--green);border-radius:15px;padding:16px 18px}.dialog-backdrop{z-index:20;background:#14231f94;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.history-dialog{background:var(--paper);width:min(520px,100%);box-shadow:var(--shadow);border-radius:24px;padding:34px;position:relative}.history-dialog h2{color:var(--green);font-size:2rem}.history-dialog article{border-left:5px solid var(--coral);background:var(--green-soft);border-radius:10px;gap:5px;padding:18px;display:grid}.history-dialog time{color:var(--coral-dark);font-size:.84rem;font-weight:900}.dialog-close{border:1px solid var(--green);min-height:40px;color:var(--green);background:0 0;border-radius:999px;padding:6px 12px;font-weight:800;position:absolute;top:18px;right:18px}@media (width<=820px){.activity-card{min-height:600px}.start-stage{text-align:center;grid-template-columns:1fr}.start-copy>span,.start-copy .primary-action{margin-inline:auto}.start-buttons{width:min(520px,100%);margin-inline:auto}.criterion-grid{grid-template-columns:repeat(2,1fr)}.snapshot-pair{grid-template-columns:1fr}}@media (width<=540px){body{font-size:16px}.app-shell{padding:13px 12px 28px}.brand{font-size:.92rem}.brand-mark{width:34px;height:34px}.history-button{padding-inline:10px;font-size:.75rem}.activity-card{border-radius:20px;min-height:570px;padding:24px 14px}.start-stage{gap:24px}.start-copy h1{font-size:2.35rem}.start-buttons,.object-shelf{grid-template-columns:repeat(2,1fr);gap:12px 5px}.start-buttons{padding:24px 10px}.button-token-action{min-height:108px}.button-token{width:68px;height:68px}.criterion-grid{gap:10px}.criterion-card{min-height:170px;padding:16px 10px}.criterion-card strong{font-size:1.25rem}.criterion-mark{min-height:56px;font-size:.9rem}:is(.group-mat,.group-mat:has(.group-tray:nth-child(2):last-child)){grid-template-columns:1fr}.group-tray{min-height:155px}.counting-tray{padding:22px 10px}.number-choices{gap:7px}.number-choices button{width:58px;min-height:52px}.comparison-summary{z-index:4;background:var(--paper);border-radius:12px;flex-wrap:wrap;gap:7px;padding:7px;font-size:.8rem;position:sticky;top:6px;box-shadow:0 3px 12px #0000001a}.comparison-summary span{display:none}.snapshot-board{padding:14px}.progress-dots{gap:10px;font-size:.72rem}.progress-dots span{gap:4px}.progress-dots i{width:22px;height:22px}.live-feedback{font-size:.9rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}