:root{--ink:#33373A;--muted:#33373A;--paper:#FDE7D6;--teal:#33373A;--orange:#EE8546;--line:#F7C9A8;--apricot:#FDE7D6;--apricot-deep:#F7C9A8;--white:#FFFFFF;--cream:#F0F0D8;--beige:#D8CCB4;--font:"Sunflower","Malgun Gothic","Apple SD Gothic Neo",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.65}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:12px;min-height:48px;font-weight:700;padding:12px 20px;color:var(--ink);background:#FFFFFF;transition:background .15s,transform .15s}button:hover{background:#F7C9A8;transform:translateY(-1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:3px}button.primary{background:var(--teal);color:white}button.primary:hover{background:#33373A}button.secondary{background:white;border:1px solid #33373A}button.quiet{background:transparent;color:var(--muted);padding:8px 14px}.topbar{height:88px;padding:0 5vw;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#FDE7D6}.brand{background:transparent;font-size:22px;padding:0}.brand span{font-size:12px;font-weight:400;display:block;color:var(--muted);text-align:left}.top-actions{display:flex;gap:12px;align-items:center}.version{font-size:12px;border:1px solid var(--line);padding:4px 10px;border-radius:20px;color:var(--muted)}main{max-width:1280px;margin:auto;padding:42px 40px}.view[hidden],[hidden]{display:none!important}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--teal);margin:0 0 9px}h1{font-size:clamp(28px,3vw,42px);line-height:1.35;letter-spacing:-1.4px;margin:0 0 14px}h2{line-height:1.4}p{margin:0 0 16px}.intro-heading>p:last-child{color:var(--muted)}.game-card{position:relative;display:grid;grid-template-columns:1.1fr .9fr;margin-top:36px;min-height:485px;border:1px solid #33373A;border-radius:26px;overflow:hidden;background:#FFFFFF}.card-copy{padding:40px 50px;z-index:1}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{font-size:11px;border:1px solid #33373A;border-radius:20px;padding:3px 10px}.card-copy h2{font-size:55px;letter-spacing:-3px;margin:22px 0 10px}.lead{font-size:22px;font-weight:600;line-height:1.65}.card-copy>p:not(.lead){color:#33373A;font-size:14px}.card-copy button{margin-top:8px;min-width:205px;display:flex;justify-content:space-between}.card-copy small{display:block;font-size:11px;margin-top:15px;color:var(--muted)}.concept-art{position:relative;display:flex;align-items:flex-end;justify-content:center;background:none;padding:28px 24px 0}.concept-art img{height:470px;width:100%;object-fit:contain;object-position:bottom;position:relative}.art-label{position:absolute;top:18px;right:24px;font-size:11px;color:#33373A}.dashboard-foot{font-size:12px;margin-top:22px;color:var(--muted)}footer{max-width:1200px;margin:20px auto 0;padding:25px 0;border-top:1px solid var(--line);color:#33373A;font-size:11px}.setup-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:45px;margin-top:28px}.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.level{border:1px solid var(--line);background:white;text-align:left;padding:19px 16px}.level span{display:block;color:var(--muted);font-size:11px}.level strong{font-size:18px;display:block;margin:8px 0}.level small{font-size:11px;display:block;font-weight:400}.level.selected{border:2px solid var(--teal);background:#33373A;padding:18px 15px}.options{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:25px 0}label{font-weight:600;display:block;font-size:13px}select,input:not([type=checkbox]),textarea{display:block;border:1px solid #33373A;border-radius:9px;padding:11px 12px;width:100%;background:white;color:var(--ink);margin-top:6px}textarea{resize:vertical;min-height:80px}input[type=checkbox]{accent-color:var(--teal);width:18px;height:18px;margin-right:7px;vertical-align:middle}.switches{display:flex;gap:24px}.hint{font-size:11px;color:var(--muted);margin-top:12px}.start-actions{display:flex;gap:12px;margin-top:25px}.rule-card{background:#FFFFFF;border-radius:18px;padding:30px}.rule-card h2{font-size:21px}.rule-card ol{padding-left:24px}.rule-card li{padding:10px 0}.rule-card p{font-size:12px;color:var(--muted)}.note{font-size:12px;border-top:1px solid #F7C9A8;padding-top:18px}.word-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}#custom-editor{background:#FFFFFF;padding:24px;border-radius:16px;margin-top:20px}#custom-editor label{margin:14px 0}#custom-editor h2{font-size:20px}#custom-editor p{font-size:12px}#setup-error{color:#33373A;font-size:13px;margin-top:15px}.game-view{margin:-16px 0 0}.game-top{display:flex;justify-content:space-between;align-items:center}.game-top h1{font-size:30px;margin:0}.status{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--muted)}#phase{background:#F7C9A8;padding:5px 13px;border-radius:22px}.progress-track{height:4px;background:#F7C9A8;margin-top:18px;border-radius:4px;overflow:hidden}#progress-fill{height:100%;background:var(--teal);transition:width .3s}.stage{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;min-height:440px;padding:20px 25px;position:relative}.stage-copy{z-index:2}.rule-pill{display:inline-block;border:1px solid #EE8546;border-radius:25px;padding:6px 14px;font-size:12px;color:var(--teal);margin-bottom:32px}.caption{font-size:clamp(26px,3.5vw,46px);font-weight:800;line-height:1.6;letter-spacing:-1px;word-break:keep-all;max-width:620px;min-height:150px;max-height:330px;overflow:auto}.caption.is-explain{font-size:clamp(24px,2.9vw,36px)}.caption.hidden-caption{visibility:hidden}.pose-hint{font-size:15px;color:var(--teal);background:#F7C9A8;border-radius:10px;padding:10px 16px}.sound-status{font-size:11px;color:var(--muted);min-height:18px}.character-zone{height:440px;position:relative;display:flex;justify-content:center;background:none}.fox{height:100%;max-width:420px;width:100%}.fox svg{height:100%;width:100%;overflow:visible}.rig-label{position:absolute;bottom:0;right:8px;color:#33373A;font-size:10px}.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}.controls button{font-size:13px}.class-rule{text-align:center;font-size:11px;color:var(--muted);margin:14px 0 0}.explanation-panel{background:#FFFFFF;border:1px solid #EE8546;border-radius:16px;padding:22px;margin-top:20px}.explanation-panel h2{font-size:18px}.explanation-panel p{font-size:20px}.ending{text-align:center;padding:65px 15px}.end-mark{border-radius:50%;background:#FFFFFF;color:var(--teal);height:80px;width:80px;font-size:40px;margin:25px auto}.ending p{color:var(--muted)}.ending button{margin:20px 8px}.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:25px 0}.lab-concept,.lab-rig{height:430px;border-radius:18px;background:#FFFFFF;display:flex;flex-direction:column;align-items:center;position:relative;padding:20px}.lab-concept img{height:360px;width:100%;object-fit:contain}.lab-concept span,.lab-rig span{font-size:11px;color:var(--muted)}.lab-rig .fox{height:360px}.lab-controls{display:flex;gap:8px;flex-wrap:wrap}.lab-controls button{font-size:12px}#lab>label{width:240px;margin:20px 0}#lab-back{margin-top:8px}
@media(min-width:1600px){main{max-width:1500px}.stage{min-height:560px}.character-zone{height:540px}.caption{font-size:56px}.game-card{min-height:590px}.concept-art img{height:560px}}
@media(max-width:850px){main{padding:30px 22px}.topbar{height:76px;padding:0 22px}.brand{font-size:18px}.brand span,.version{display:none}.top-actions{gap:0}.top-actions button{font-size:11px;padding:5px 10px}.game-card{grid-template-columns:1fr 1fr}.card-copy{padding:30px 25px}.card-copy h2{font-size:42px}.concept-art img{height:390px}.setup-grid{grid-template-columns:1fr;gap:25px}.stage{padding:15px 0;grid-template-columns:1.2fr 1fr;min-height:350px}.character-zone{height:340px}.caption{font-size:29px}.status{gap:8px}footer{padding:20px;margin:0 22px}.rule-card{padding:24px}}
@media(max-width:540px){main{padding:26px 18px}.game-card{display:flex;flex-direction:column-reverse;margin-top:25px}.concept-art{height:215px;padding:10px}.concept-art img{height:205px}.art-label{font-size:9px}.card-copy{padding:25px}.card-copy h2{margin:16px 0 10px}.card-copy .lead{font-size:20px}.difficulty{grid-template-columns:1fr}.level{padding:13px 16px}.level.selected{padding:12px 15px}.level strong{margin:3px 0}.options{gap:12px}.start-actions{flex-direction:column}.game-top{align-items:flex-start}.status{flex-wrap:wrap;max-width:185px;justify-content:flex-end}.game-top h1{font-size:26px}.stage{grid-template-columns:1fr;min-height:0}.stage-copy{padding-top:20px}.rule-pill{margin-bottom:18px;font-size:11px}.caption{min-height:80px;font-size:26px;max-height:none}.character-zone{height:290px}.controls{gap:6px}.controls button{padding:10px 13px;font-size:12px;min-height:44px}.lab-grid{grid-template-columns:1fr}.lab-concept,.lab-rig{height:360px}.lab-concept img,.lab-rig .fox{height:295px}.word-columns{grid-template-columns:1fr}.ending{padding:30px 0}.ending button{display:block;margin:16px auto;width:100%}}
@media(prefers-reduced-motion:reduce){button,#progress-fill{transition:none}}
.voice-samples{margin:26px 0;padding:24px;border:1px solid var(--line);border-radius:16px}.voice-samples h2{font-size:20px}.voice-samples>p{font-size:12px;color:var(--muted)}.voice-samples>div{display:inline-block;vertical-align:top;width:calc(50% - 12px);padding:10px}.voice-samples audio{max-width:100%;width:100%}@media(max-width:540px){.voice-samples>div{width:100%;padding:10px 0}}
.expression-gallery{margin:24px 0}.expression-gallery h2{font-size:20px}.expression-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.expression-grid button{padding:14px 8px;display:flex;flex-direction:column;align-items:center;background:#FFFFFF}.expression-grid img{width:100%;height:110px;object-fit:contain}.expression-grid span{font-size:12px;margin-top:9px}@media(max-width:850px){.expression-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:540px){.expression-grid{gap:8px}.expression-grid img{height:80px}}
/* ── 너도양 층 v001 (05 너도양 1.1.0 쓰임 ③): 색은 일곱 색만, 깊이는 숯색 단색 오프셋만. 부품 값은 캐치마인드 너도양판(확정)과 같다 ── */
@font-face{font-family:"Sunflower";src:url("fonts/Sunflower-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Sunflower";src:url("fonts/Sunflower-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--edge:2.5px solid var(--ink);--lift:0 3px 0 var(--ink);--lift-card:0 4px 0 var(--ink)}
body{background:var(--apricot);word-break:keep-all;font-weight:500;letter-spacing:-.015em}
h1,h2,strong,button,.brand,.caption,.lead{font-weight:700}
h1,h2,.brand,.card-copy h2,.game-top h1{letter-spacing:-.03em}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:4px solid var(--ink);outline-offset:4px}

/* 버튼: 흰 면 + 숯색 윤곽 + 스티커 두께 */
button{border:var(--edge);background:var(--white);box-shadow:var(--lift);color:var(--ink)}
button:hover:not(:disabled){background:var(--apricot-deep);transform:none}
button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
button:disabled{opacity:1;background:transparent;border:2.5px dashed var(--beige);box-shadow:none;color:var(--ink)}
button.primary{background:var(--ink);border-color:var(--ink);color:var(--cream)}
button.primary:hover:not(:disabled){background:var(--ink);box-shadow:0 4px 0 var(--orange)}
button.secondary{background:var(--apricot-deep);border:var(--edge)}
button.secondary:hover:not(:disabled){background:var(--white)}
button.quiet{border-color:transparent;background:transparent;box-shadow:none;color:var(--ink)}
button.quiet:hover:not(:disabled){background:var(--apricot-deep)}
button.quiet:active:not(:disabled){box-shadow:none}

/* 머리 */
.topbar{background:var(--apricot);border-bottom:3px solid var(--apricot-deep)}
.brand,.brand:hover:not(:disabled){border:0;box-shadow:none;background:transparent}
.brand span{color:var(--ink);font-weight:500}
.version{border:1.5px solid var(--ink);background:var(--white);color:var(--ink)}

/* 머리말 = 이름표(흰 카드 + 주황 테두리 + 주황 고리) */
.eyebrow{display:inline-flex;align-items:center;gap:10px;background:var(--white);border:3px solid var(--orange);border-radius:14px;padding:5px 15px 5px 11px;font-size:14px;letter-spacing:.5px;color:var(--ink);margin:0 0 14px}
.eyebrow::before{content:"";width:12px;height:12px;border:3.5px solid var(--orange);border-radius:50%;flex:none}
#round-title{display:block;background:none;border:0;padding:0;font-size:13px;margin:0 0 4px}
#round-title::before{content:none}
.intro-heading>p:last-child,.dashboard-foot,footer{color:var(--ink)}

/* 놀이 카드: 흰 카드 + 여우가 서는 바닥 띠 */
.game-card{background:var(--white);border:var(--edge);box-shadow:var(--lift-card)}
.tags span{border:1.5px solid var(--ink);background:var(--apricot);color:var(--ink)}
.card-copy>p:not(.lead),.card-copy small,.art-label{color:var(--ink)}
.concept-art{background:none}
.concept-art::after{content:"";position:absolute;left:24px;right:24px;bottom:14px;height:26px;background:var(--apricot-deep);border-radius:13px}
.concept-art img{z-index:1}
.card-copy button.primary span{color:var(--cream)}

/* 준비 화면 */
.level{border:var(--edge);background:var(--white)}
.level span,.level small{color:var(--ink)}
.level.selected,.level.selected:hover:not(:disabled){background:var(--ink);border:var(--edge);color:var(--cream);padding:19px 16px}
.level.selected span,.level.selected small,.level.selected strong{color:var(--cream)}
label{color:var(--ink)}
select,input:not([type=checkbox]),textarea{border:2px solid var(--ink);border-radius:10px;background:var(--white);color:var(--ink)}
input[type=checkbox]{accent-color:var(--ink)}
.hint,#save-status{color:var(--ink)}
#setup-error{color:var(--ink);font-weight:700}
#custom-editor{background:var(--white);border:var(--edge);box-shadow:var(--lift-card)}
#custom-editor p{color:var(--ink)}

/* 규칙 카드·해설 창 = 큰 이름표 */
.rule-card,.explanation-panel{background:var(--white);border:3px solid var(--orange);border-radius:18px}
.rule-card p{color:var(--ink)}
.rule-card .eyebrow{border:0;background:none;padding:0}  /* 카드가 이미 이름표라 머리말 상자를 겹치지 않고 고리만 남긴다 */
.rule-card .note{border-top:2.5px solid var(--apricot-deep)}
.explanation-panel h2{display:flex;align-items:center;gap:10px}
.explanation-panel h2::before{content:"";width:14px;height:14px;border:4px solid var(--orange);border-radius:50%;flex:none}

/* 판 화면 */
.status{color:var(--ink)}
#phase{background:var(--apricot-deep);border:1.5px solid var(--ink);color:var(--ink)}
.progress-track{height:6px;background:var(--apricot-deep)}
#progress-fill{background:var(--orange)}
.rule-pill{display:inline-flex;align-items:center;gap:10px;background:var(--white);border:3px solid var(--orange);border-radius:14px;padding:6px 16px 6px 12px;font-size:16px;font-weight:700;color:var(--ink)}
.rule-pill::before{content:"";width:12px;height:12px;border:3.5px solid var(--orange);border-radius:50%;flex:none}
.caption{color:var(--ink)}
.pose-hint{background:var(--apricot-deep);color:var(--ink);font-weight:700}
.sound-status,.rig-label,.class-rule{color:var(--ink)}
.character-zone{background:none}
.character-zone::before{content:"";position:absolute;left:8%;right:8%;bottom:6px;height:26px;background:var(--apricot-deep);border-radius:13px}
.character-zone .fox{position:relative;z-index:1}
.rig-label{z-index:2;bottom:-24px}
.controls{border-top:2.5px solid var(--apricot-deep)}

/* 끝 화면 */
.end-mark{background:var(--white);border:4px solid var(--orange);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700}
.ending p{color:var(--ink)}

/* 캐릭터 시안실 */
.lab-concept,.lab-rig{background:var(--white);border:var(--edge)}
.lab-concept span,.lab-rig span{color:var(--ink)}
.expression-grid button{background:var(--white)}
.voice-samples{border:var(--edge);background:var(--white)}
.voice-samples>p{color:var(--ink)}
footer{border-top:2.5px solid var(--apricot-deep)}

/* 작은 글자 바닥 13px — 선플라워는 9~12px에서 맑은 고딕보다 흐려 보인다(06 검사 small-text). 배치 영향이 없는 보조 글만 키운다 */
.tags span,.card-copy small,.art-label,.rig-label,.version,.hint,#save-status,.level span,.level small,.rule-card p,.note,
#custom-editor p,.class-rule,.sound-status,.status,footer,.dashboard-foot,.lab-concept span,.lab-rig span,.voice-samples>p,.expression-grid span{font-size:13px}
label{font-size:14px}

@media(max-width:540px){
  .eyebrow{font-size:13px}
  .art-label{font-size:13px}
  .rule-pill{font-size:13px}
  .level.selected,.level.selected:hover:not(:disabled){padding:13px 16px}
}

/* ── 너도양 층 v002: 로고 심벌 · 선생님 양 인사 · 아기 양 친구 · 회차 이름표 (05 너도양 1.1.0 쓰임 ③, 캐릭터 그림은 4-0절대로 어디에나) ── */
.brand{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:center;text-align:left}
.nd-logo{width:48px;height:auto;display:block;grid-row:1 / 3}

/* 놀이 목록: 머리말 오른쪽에 손 흔드는 선생님 양이 카드 위에 선다 */
.intro-heading{position:relative;padding-right:190px}
.nd-teacher-hello{position:absolute;right:40px;bottom:-43px;height:196px;width:auto;z-index:2;pointer-events:none}

/* 회차 이름표: 진행 막대 대신 펀치 구멍 — 지난 구멍은 뚫림(살구 + 주황 고리), 지금은 숯색, 남은 것은 흰 바탕 베이지 고리 */
.nd-holes{display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:max-content;max-width:100%;margin-top:16px;
  background:var(--white);border:3px solid var(--orange);border-radius:14px;padding:8px 14px}
.nd-holes i{display:block;width:15px;height:15px;border-radius:50%;border:2.5px solid var(--beige);background:var(--white);box-sizing:border-box}
.nd-holes i.done{border:3px solid var(--orange);background:var(--apricot-deep)}
.nd-holes i.now{border:3px solid var(--orange);background:var(--ink)}
.nd-holes[hidden],.progress-track.nd-off{display:none}

/* 아기 양 친구: 여우 바닥 띠 왼쪽 뒤에서 고개를 내민다. 앞 띠 조각이 턱 아래를 가려 띠 뒤에 있는 것처럼 보인다 */
.nd-lamb{position:absolute;left:10%;bottom:18px;width:24%;max-width:150px;z-index:1;pointer-events:none}
.nd-lamb img{display:block;width:100%;height:auto}
.nd-lamb.pop{animation:nd-pop .32s ease-out}
.nd-band-front{position:absolute;left:8%;width:calc(2% + min(24%,150px));bottom:6px;height:26px;background:var(--apricot-deep);border-radius:13px;z-index:2;pointer-events:none}
@keyframes nd-pop{0%{transform:translateY(10px)}60%{transform:translateY(-4px)}100%{transform:none}}

/* 끝 화면: 아기 양(왼쪽, 올려다봄)과 선생님 양(오른쪽, 손 인사)이 띠 위에, 아기 양 말풍선 하나 */
.nd-end-scene{position:relative;width:min(520px,100%);height:270px;margin:6px auto 0}
.nd-end-scene::after{content:"";position:absolute;left:4%;right:4%;bottom:4px;height:24px;background:var(--apricot-deep);border-radius:12px}
.nd-end-lamb{position:absolute;left:14%;bottom:14px;height:132px;width:auto;transform:scaleX(-1);z-index:1}
.nd-end-teacher{position:absolute;right:16%;bottom:12px;height:254px;width:auto;z-index:1}
.nd-bubble{position:absolute;left:5%;bottom:156px;margin:0;background:var(--white);border:3px solid var(--orange);border-radius:16px;padding:7px 14px;font-size:17px;font-weight:700;color:var(--ink);white-space:nowrap;z-index:2}
.nd-bubble::after{content:"";position:absolute;left:46px;bottom:-11px;width:16px;height:16px;background:var(--white);border-right:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(45deg)}
.ending .end-mark{margin:18px auto 10px}

@media(min-width:1600px){.nd-lamb{max-width:180px}.nd-band-front{width:calc(2% + min(24%,180px))}}
@media(max-width:850px){.nd-logo{width:40px}.intro-heading{padding-right:150px}.nd-teacher-hello{height:160px;right:16px;bottom:-35px}}
@media(max-width:540px){
  .nd-logo{width:36px}
  .intro-heading{padding-right:0}
  .nd-teacher-hello{position:static;display:block;height:120px;margin:4px 0 -6px auto}
  .nd-holes{gap:5px;padding:6px 10px}
  .nd-holes i{width:11px;height:11px;border-width:2px}
  .nd-holes i.done,.nd-holes i.now{border-width:2.5px}
  .nd-lamb{width:26%;left:9%}
  .nd-band-front{left:8%;width:calc(1% + 26%)}
  .nd-end-scene{height:220px}
  .nd-end-teacher{height:204px;right:10%}
  .nd-end-lamb{height:104px;left:12%}
  .nd-bubble{bottom:124px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.nd-lamb.pop{animation:none}}
/* 낮은 화면(1280×720 노트북 등)에서도 끝 화면 버튼이 첫 화면 안에 들도록 장면을 줄인다 */
@media(max-height:820px) and (min-width:541px){
  .ending{padding-top:24px}
  .nd-end-scene{height:156px;width:min(380px,100%);margin-top:0}
  .nd-end-teacher{height:146px}
  .nd-end-lamb{height:78px}
  .nd-bubble{bottom:94px;font-size:15px;padding:5px 12px}
  .ending .end-mark{height:56px;width:56px;font-size:28px;margin:8px auto 4px}
  .ending button{margin-top:14px;margin-bottom:8px}
}