/* lueur-skin.css — 아이 앱을 에디토리얼 언어로 (2026-08-02) ───────────────────────────────────────────────────────────── lueur-ds2.css 가 어휘(토큰·부품), 이 파일이 **기존 앱 클래스에 그 어휘를 입히는 층**이다. 구조·DOM·JS 는 건드리지 않는다 — 라이브 서비스이고 아이 필기 경로가 걸려 있다. 가두는 범위 - 색은 `html:not([data-theme])`(기본 테마)에서만 바꾼다. 아이가 고른 테마 7종은 그대로 둔다. 그러지 않으면 남의 화면을 뺏는 일이 된다. - 형태(라운드·괘선·여백)는 테마와 무관하니 공통으로 간다. - 게임 캔버스 안쪽은 손대지 않는다(픽셀 아트의 결은 UI 규칙 밖이다). ───────────────────────────────────────────────────────────── */ html:not([data-theme]){ --th-bg:var(--l-paper); --th-surf:var(--l-surface); --th-line:var(--l-rule); --th-hero:var(--l-navy); --th-herobd:transparent; --th-navy:var(--l-navy); /* **불투명하다.** 반투명이면 뒤 내용이 비쳐 색이 시시각각 달라지고, iOS 가 아래 안전구역에 칠하는 theme-color 와 **정확히 맞출 수가 없다** — 원장이 본 '색 불일치'가 이것이다(2026-08-09). 하단 메뉴와 그 아래 띠가 한 색이어야 한다. */ --th-nav:#faf8f3; --th-acc:var(--l-navy); --th-accT:var(--l-on-dark); --th-goldT:var(--l-accent); --th-txt:var(--l-ink); --th-glow:none; --th-blur:none; } /* ── 하단 탭 — 종이 위 얇은 띠 ───────────────────────────── */ /* 불투명 — iOS 가 아래 안전구역에 칠하는 theme-color 와 **정확히 같은 색**이어야 메뉴와 그 아래 띠가 한 덩이로 읽힌다(2026-08-09 원장 '색 불일치'). */ html:not([data-theme]) #appNav{ background:#faf8f3; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-top:1px solid var(--l-rule); border-radius:0; box-shadow:none; } html:not([data-theme]) #appNav .an-item{ color:var(--l-ink-3); font-weight:500; } html:not([data-theme]) #appNav .an-item.on{ color:var(--l-ink); } /* ── AI 튜터 ─────────────────────────────────────────────── */ html:not([data-theme]) #chatBox, html:not([data-theme]) .chat-body{ background:var(--l-paper); } html:not([data-theme]) .chat-top{ background:var(--l-paper); color:var(--l-ink); border:0; border-bottom:1px solid var(--l-rule); border-radius:0; box-shadow:none; } html:not([data-theme]) .chat-top .t{ color:var(--l-ink); font-weight:600; } html:not([data-theme]) .chat-top .badge{ background:none; border:1px solid var(--l-rule-2); color:var(--l-ink-3); } html:not([data-theme]) .msg{ border:0; box-shadow:none; line-height:1.75; } html:not([data-theme]) .msg.me, html:not([data-theme]) .msg.user{ background:var(--l-navy); color:var(--l-on-dark); border-radius:18px 18px 6px 18px; } html:not([data-theme]) .msg.bot{ background:none; color:var(--l-ink); border-radius:0; padding-left:0; padding-right:0; } html:not([data-theme]) .chat-input{ background:rgba(251,248,242,.92); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:0; border-top:1px solid var(--l-rule); border-radius:0; box-shadow:none; } html:not([data-theme]) .chat-input textarea{ background:var(--l-surface); border:1px solid var(--l-rule-2); border-radius:var(--l-r-sm); color:var(--l-ink); box-shadow:none; } html:not([data-theme]) .chat-input textarea:focus{ border-color:var(--l-accent); outline:none; } /* 보내기는 **행동색**이다. 골드는 별자리·카드·훈장 전용이라 여기 쓰면 안 된다(§4). 2026-08-09 AI 화면을 눈으로 보다 남아 있는 것을 발견 — 세이지로 되돌린다. */ html:not([data-theme]) #sendBtn{ background:var(--l-accent,#51654e); color:#faf8f3; border:0; border-radius:999px; box-shadow:0 6px 16px -8px rgba(81,101,78,.75); } html:not([data-theme]) .photoBtn{ background:none; border:1px solid var(--l-rule-2); color:var(--l-ink-2); border-radius:50%; } html:not([data-theme]) .chips .chip{ background:none; border:1px solid var(--l-rule-2); color:var(--l-ink-2); border-radius:999px; box-shadow:none; } html:not([data-theme]) .cs-item{ color:var(--l-ink-3); } html:not([data-theme]) .cs-item b{ color:var(--l-ink); } /* ── 교재 뷰어 — 종이가 주인공 ───────────────────────────── */ html:not([data-theme]) #bookOv .bk-top{ background:rgba(233,226,214,.9); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid var(--l-rule); } html:not([data-theme]) #bookOv .bk-ttl{ font-weight:600; color:var(--l-ink); } html:not([data-theme]) #bookOv .bk-sub{ color:var(--l-ink-3); } html:not([data-theme]) .bk-bar .tk{ height:3px; background:var(--l-rule); } html:not([data-theme]) .bk-bar .fl{ background:var(--l-accent); } html:not([data-theme]) .bk-bar .bl{ color:var(--l-ink); font-weight:600; } html:not([data-theme]) .bk-bar .nm{ color:var(--l-ink-3); } html:not([data-theme]) .bk-btn{ border-radius:999px; border:1px solid var(--l-rule-2); background:none; color:var(--l-ink); } html:not([data-theme]) .bk-hintbox{ background:none; border:1px dashed var(--l-rule-2); border-radius:var(--l-r); } html:not([data-theme]) .bk-hinth{ color:var(--l-accent); } /* ── 앱 셸 — 어두운 테마를 종이로 (2026-08-02) ──────────────── modern.css 의 `body.app-in` 이 앱 전체를 스타더스트 다크로 칠한다. 홈·튜터만 밝게 고쳐 놓으니 **로그인과 나머지 화면이 다크 네이비로 남았다** (원장이 "완전 다크 네이비가 보인다"고 잡음). 셸의 토큰을 여기서 종이로 되돌린다. 게임 오버레이의 유리·HUD 는 자기 값(rgba(14,28,42,…))을 쓰므로 영향 없다. */ body.app-in{ color-scheme:light; --cream:var(--l-paper); --cream-2:var(--l-paper-2); --paper:var(--l-surface); --field:var(--l-surface); --surface-0:var(--l-paper); --surface-1:var(--l-surface); --surface-2:var(--l-surface); --surface-3:var(--l-paper-2); --ink:var(--l-ink); --ink-soft:var(--l-ink-2); --soft:var(--l-ink-2); --muted:var(--l-ink-3); --line:var(--l-rule); --line-soft:var(--l-rule); --hair:var(--l-rule); --gold:var(--l-accent); --gold-deep:var(--l-accent); --accent:var(--l-accent); --accent-ghost:rgba(168,131,74,.10); --good:var(--l-ok); --bad:var(--l-no); --warn:var(--l-wait); --glass-bg:rgba(251,248,242,.88); --glass-2:rgba(251,248,242,.94); --glass-line:var(--l-rule); --elev-1:var(--l-lift); --elev-2:var(--l-lift); --elev-3:var(--l-lift-lg); background:var(--l-paper); color:var(--l-ink); } /* 어두운 배경을 전제로 흰 글씨를 박아 둔 곳들 — 종이 위에서는 안 보인다 */ body.app-in .cs-seg{ background:rgba(45,35,22,.05); } body.app-in .cs-segb.on{ background:var(--l-surface); color:var(--l-ink); box-shadow:0 1px 2px rgba(30,22,10,.06); } /* ── 화면 전환 · 뒤로 가기 자리 (2026-08-02) ───────────────── ① 화면이 그냥 "탁" 나타나면 아이는 자기가 눌렀는지 몰라 두 번 누른다. 아래에서 8px 밀려 올라오며 180ms 동안 또렷해진다. 튕기지 않는다. ② 뒤로 가기는 **어느 화면에서든 같은 자리**여야 한다 — 왼쪽 위, 안전 영역 아래. 화면마다 다른 자리에 있으면 아이가 매번 찾는다. */ @keyframes lueIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } } .ah-ov, #bookOv, #zoneOv, #mr2Ov, #swrapOv, #farmOverlay, #charPickOv, #scOv, #selfPfModal { animation:lueIn 180ms cubic-bezier(.22,.61,.36,1) both; } /* 시트는 아래에서 더 크게 올라온다 — 종이 한 장이 손에 들려 오는 느낌 */ @keyframes lueSheet { from { transform:translateY(18px); opacity:.6 } to { transform:none; opacity:1 } } .mr2-panel, .bk-sh-bd { animation:lueSheet 220ms cubic-bezier(.22,.61,.36,1) both; } /* 뒤로 가기 — 자리를 한 곳으로 */ .lue-back, #bookOv .bk-back { position:absolute; left:18px; top:calc(14px + env(safe-area-inset-top,0px)); width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:0; cursor:pointer; font-size:19px; z-index:20; } /* 종이 화면 위 — 잉크 / 게임 캔버스 위 — 어두운 유리 */ #bookOv .bk-back { position:static; width:auto; height:auto; color:var(--l-ink-2); } .lue-back.on-canvas { background:rgba(14,28,42,.72); color:var(--l-on-dark); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(239,231,219,.10); box-shadow:0 6px 18px rgba(0,0,0,.28); } @media(prefers-reduced-motion:reduce){ .ah-ov, #bookOv, #zoneOv, #mr2Ov, #swrapOv, #farmOverlay, #charPickOv, #scOv, #selfPfModal, .mr2-panel, .bk-sh-bd { animation:none; } } /* ── 버튼 한 벌 (2026-08-02) ──────────────────────────────── 인라인 style 로 버튼을 그리다 보니 라운드가 다섯 갈래(999·18·50%·10·8), 글씨가 다섯 갈래(12~15px)가 됐다. 규칙을 여기 세우고 화면은 클래스만 부른다. **누르는 자리는 44px 이상** — 애플이 정한 손가락 최소치다. */ .lue-btn{ font:600 14px 'Pretendard Variable',Pretendard,system-ui,sans-serif; min-height:46px; padding:13px 22px; border:0; border-radius:999px; cursor:pointer; /* 주 행동은 세이지 하나. 네이비는 카드·별자리 세계의 색이다 (2026-08-06 브랜드색 통일) */ background:var(--l-accent); color:#faf8f3; transition:transform 200ms cubic-bezier(.22,.61,.36,1), opacity 200ms; } .lue-btn:active{ transform:scale(.99); opacity:.92 } .lue-btn:focus-visible{ outline:2px solid var(--l-accent); outline-offset:3px } .lue-btn[disabled]{ background:var(--l-paper-2); color:var(--l-ink-3); cursor:not-allowed } /* 2026-08-06 브랜드색 통일 — 채운 단추는 세이지 하나. 골드(별·카드·훈장 전용)를 단추에 쓰면 화면이 두 벌로 보인다. .gold 라는 **이름은 남긴다** — 호출부 수십 곳을 건드리지 않기 위해서다. */ .lue-btn.gold{ background:var(--l-accent); color:#faf8f3; box-shadow:0 6px 16px -8px rgba(81,101,78,.7) } .lue-btn.ghost{ background:none; color:var(--l-ink); border:1px solid var(--l-rule-2) } .lue-btn.wide{ width:100% } .lue-btn.sm{ min-height:44px; padding:11px 18px; font-size:13px } /* 화면 어디서든 버튼은 최소 44px — 인라인으로 작게 준 것도 여기서 막는다. 도감(#cardsOverlay)이 빠져 있어 칩·탭·뽑기가 29~40px 이었다(2026-08-03). */ .ah-ov button, #bookOv button, #zoneOv button, #mr2Ov button, #swrapOv button, #cardsOverlay button, /* 2026-08-06 — 다섯이 빠져 있었다. 실측(320·390px)에서 채팅 드로어 닫기 13×18px, RANKING 토글 78×22px 이 나왔다. 목록을 손으로 적으면 반드시 하나를 빠뜨린다. */ #forgeOv button, #atlasOv button, #petSheet button, #chatBox button, #studyOverlay button{ min-height:44px; } /* 아이콘만 있는 단추는 가로도 44 — 닫기 ✕ 가 13px 이던 자리 */ #chatBox button.td-x, #chatBox .cs-toggle, #forgeOv button.fg-x{ min-width:44px } .ah-ov button.icon, #zoneOv button.icon, #mr2Ov button.icon{ min-width:44px; padding:0 } /* ── 코디(wardrobe) ───────────────────────────────────────── 초상 대신 같은 도트를 크게 확대한다 — 고른 옷이 그대로 보이도록. 종이 팔레트 위에 괘선으로 가른다(카드보다 여백). */ .wd-ov{position:fixed;inset:0;z-index:9600;background:rgba(14,28,42,.45); display:flex;align-items:flex-end;justify-content:center} .wd-card{width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--l-surface,#faf8f3); border-radius:18px 18px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom)); animation:lueIn .18s ease-out} .wd-top{display:flex;align-items:center;justify-content:space-between;min-height:44px} .wd-ttl{font-family:var(--l-serif,Cormorant Garamond,serif);font-size:22px;letter-spacing:.01em} .wd-x{min-height:44px;padding:0 10px;background:none;border:0;color:#6b6257;font-size:14px} .wd-stage{position:relative;display:flex;align-items:center;justify-content:center; padding:18px 0 12px;border-bottom:1px solid var(--l-rule,rgba(45,35,22,.10))} .wd-view{image-rendering:pixelated;min-height:192px;display:flex;align-items:center} .wd-view canvas{image-rendering:pixelated} .wd-turn{position:absolute;right:4px;bottom:12px;min-height:44px;padding:0 14px; border:1px solid var(--l-rule,rgba(45,35,22,.14));border-radius:999px; background:transparent;font-size:13px;color:#4a4238} .wd-colors{display:flex;gap:6px;overflow-x:auto;padding:10px 0;touch-action:pan-x} .wd-col{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid transparent;border-radius:12px;background:rgba(45,35,22,.04);padding:0} .wd-col.on{border-color:var(--l-accent,#51654e);background:rgba(168,131,74,.10)} .wd-col canvas{image-rendering:pixelated} .wd-tabs{display:flex;gap:4px;padding:4px 0 10px;border-bottom:1px solid var(--l-rule,rgba(45,35,22,.10))} .wd-tab{flex:1;min-height:44px;border:0;background:none;font-size:14px;color:#6b6257; border-bottom:2px solid transparent} .wd-tab.on{color:var(--l-ink,#1c1a16);border-bottom-color:var(--l-accent,#51654e)} .wd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;padding:12px 0} .wd-item{min-height:88px;display:flex;align-items:center;justify-content:center; border:1px solid var(--l-rule,rgba(45,35,22,.10));border-radius:14px;background:transparent; padding:6px;font-size:12px;color:#6b6257} .wd-item.on{border-color:var(--l-accent,#51654e);background:rgba(168,131,74,.08)} .wd-item canvas{image-rendering:pixelated} .wd-foot{display:flex;gap:8px;padding-top:6px} .wd-foot .lue-btn{flex:1} /* ── 마이룸 가구 시트 (한 줄 스크롤 → 카테고리·검색) ── */ .mr2-trayhead{display:flex;gap:6px;align-items:center;padding-bottom:8px; border-bottom:1px solid var(--l-rule,rgba(45,35,22,.10));margin-bottom:8px} .mr2-tcat{min-height:44px;padding:0 12px;border:1px solid var(--l-rule,rgba(45,35,22,.12)); border-radius:999px;background:transparent;font-size:13px;color:#6b6257;white-space:nowrap} .mr2-tcat.on{border-color:var(--l-accent,#51654e);background:rgba(168,131,74,.10);color:var(--l-ink,#1c1a16)} .mr2-tn{opacity:.55;font-size:11px} .mr2-tq{flex:1;min-width:60px;min-height:44px;font-size:16px;border:0;background:transparent; border-bottom:1px solid var(--l-rule,rgba(45,35,22,.14));color:var(--l-ink,#1c1a16)} .mr2-traygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px} .mr2-titem{position:relative;min-height:76px;display:flex;align-items:center;justify-content:center; border:1px solid var(--l-rule,rgba(45,35,22,.10));border-radius:14px;background:transparent;padding:6px} .mr2-titem.on{border-color:var(--l-accent,#51654e);background:rgba(168,131,74,.10)} .mr2-titem img{max-width:100%;max-height:58px;object-fit:contain} .mr2-titem span{position:absolute;right:6px;bottom:4px;font-size:11px;color:#6b6257} .mr2-tempty{grid-column:1/-1;padding:24px 0;text-align:center;color:#8a8072;font-size:13px} /* ── 게임 화면 단추 통일 ─────────────────────────────── farm2·zone·myroom 의 단추가 인라인으로 99곳 흩어져 라운드가 15종·글씨가 7종이었다. 파일을 흔들지 않고 공통 어휘로 덮는다. 인라인 색은 살리되 형태만 맞춘다. */ #fg2 button, #zoneWrap button, .mr2-b, .fg2-sh button, .zn-b { min-height:44px; border-radius:999px; font-size:13px; letter-spacing:.01em; transition:transform .12s ease, opacity .12s ease; } #fg2 button:active, #zoneWrap button:active, .mr2-b:active { transform:scale(.97) } #fg2 button:focus-visible, #zoneWrap button:focus-visible, .mr2-b:focus-visible { outline:2px solid var(--l-accent,#51654e); outline-offset:2px; } /* 그림만 든 동그란 단추는 알약이 아니라 원을 지킨다 */ #fg2 button.round, .fg2-sh button, .zn-round { border-radius:50%; min-width:44px; padding:0 } /* ── 프로필 카드 ────────────────────────────────── */ .pc-ov{position:fixed;inset:0;z-index:9700;background:rgba(14,28,42,.55); display:flex;align-items:center;justify-content:center;padding:16px} .pc-card{width:min(420px,92vw);max-height:92vh;display:flex;flex-direction:column;gap:10px; animation:lueIn .18s ease-out} .pc-view{flex:1;min-height:0;overflow:auto;border-radius:18px; box-shadow:0 18px 48px rgba(14,28,42,.32)} .pc-view canvas{display:block;border-radius:18px} .pc-foot{display:flex;gap:8px;padding-bottom:env(safe-area-inset-bottom,0px)} .pc-foot .lue-btn{flex:1} /* ── 글씨체 안전망 (2026-08-09 전수 감사에서 잡음) ────────────────────── `