/* 나비 특허 화면 테마 — A 글라스 · B 머티리얼 · C 에어리 · D 워크스페이스 · E TDS 글라스
   색은 흰색과 청색 계통만 쓰고, 글꼴은 Pretendard. 선택은 <html data-theme="a|b|c|d|e">로 정해진다(assets/theme.js). */

/* ── 공통: 흰색·청색 토큰 ── */
html[data-theme] {
  --navy: #0a3a8c; --blue: #0b57d0; --accent: #0b57d0; --blue-bg: #ecf3fe;
  --green: #0b57d0; --green-bg: #e8f0fe;
  --bg: #f6f9ff; --paper: #fff; --line: #d7e3f7; --ink: #0f1d3a; --sub: #44547a;
  --warn-bg: #eef4ff; --warn-line: #b9cdf0; --warn-ink: #0a3a8c;
  --tonal: #d3e3fd; --tonal-ink: #041e49; --field: #eaf2ff;
}
html[data-theme] body { font-family: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; background: var(--bg); }
html[data-theme] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
html[data-theme] .fld { background: var(--field); border: 1px solid #9dbcf2; border-bottom: 2px solid var(--accent); color: var(--ink); }
html[data-theme] .fld:focus { background: #fff; outline: 3px solid rgba(11,87,208,.3); }
html[data-theme] .fld.pdv { background: #dcebff; border-color: #7ea6e8; }
html[data-theme] .fld.done:not(.pdv) { background: #fff; }
html[data-theme] .fld-badge { color: var(--navy); }
html[data-theme] .sug-t mark { background: var(--tonal); }
html[data-theme] .chat-dot { background: var(--accent); }
html[data-theme] .toast { background: #223a6b; }
html[data-theme] .ask-mic[aria-pressed="true"] { background: var(--navy); }
html[data-theme] .promo-tab { background: var(--accent); }
html[data-theme] .promo-tab:hover { background: var(--navy); }
html[data-theme] .how-tab { background: #fff; color: var(--navy); border-color: var(--accent); }
html[data-theme] .dp-sec.busy { background: var(--blue-bg); border-color: #9dbcf2; }
html[data-theme] .rv-badge { background: var(--tonal); color: var(--tonal-ink); }
html[data-theme] .rv-badge.ok { background: var(--accent); color: #fff; }
html[data-theme] .rv-badge.warn { background: var(--tonal); color: var(--tonal-ink); }
html[data-theme] .rv-badge.bad { background: #041e49; color: #fff; }
html[data-theme] .rv-badge.na { background: #fff; color: var(--sub); border: 1px dashed #8aa2cc; }
html[data-theme] .dp-review { background: var(--blue-bg); border-color: var(--line); border-left-color: var(--accent); }
html[data-theme] .foot { background: #fff; border-top: 1px solid var(--line); }

/* ── 머리말 단추(제안·설정)와 설정 페이지 ── */
.navi-ico { display: none; }
.head-right { position: relative; }
.head-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; font: inherit; font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.head-btn:hover { background: var(--blue-bg); }
.head-gear { width: 40px; padding: 0; justify-content: center; }
.head-gear[aria-current="page"] { background: var(--tonal); border-color: transparent; }
.set-wrap { max-width: 720px; }
.set-sec { margin-top: 28px; }
.set-sec h2 { margin: 0 0 4px; font-size: 20px; }
.theme-list { display: grid; gap: 10px; margin-top: 14px; }
.theme-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; min-height: 64px; font: inherit; text-align: left; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 18px; cursor: pointer; }
.theme-card:hover { background: var(--blue-bg); }
.theme-card[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--blue-bg); }
.theme-card-t { flex: 1; }
.theme-card b { display: block; font-size: 17px; }
.theme-card small { display: block; font-size: 14px; color: var(--sub); }
.theme-card-on { display: none; padding: 3px 10px; font-size: 13px; font-weight: 700; color: var(--tonal-ink); background: var(--tonal); border-radius: 999px; }
.theme-card[aria-pressed="true"] .theme-card-on { display: inline-block; }
.theme-sw { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); }
.theme-sw.a { background: linear-gradient(145deg, #fff, #cfe4ff); box-shadow: 0 6px 12px -6px rgba(31,111,255,.6); }
.theme-sw.b { background: #ecf3fe; border-radius: 18px; }
.theme-sw.c { background: #fff; box-shadow: inset 0 0 0 5px #f1f6ff; }
.theme-sw.d { background: linear-gradient(90deg, #d3e3fd 0 30%, #f6f9ff 30%); }
.theme-sw.e { background: linear-gradient(180deg, #46a0ff, #1f6fff); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* ── A 글라스 · E TDS 글라스 (공통 재질) ── */
html[data-theme="a"], html[data-theme="e"] { --accent: #1f6fff; --blue: #1f6fff; --bg: #eef3fb; --field: #e6effc; }
html[data-theme="a"] body, html[data-theme="e"] body {
  background-color: #eef3fb;
  background-image: radial-gradient(900px 420px at 80% -10%, rgba(120,170,255,.28), transparent 70%), radial-gradient(700px 380px at 5% 30%, rgba(190,215,255,.45), transparent 70%);
  background-attachment: fixed;
}
html[data-theme="a"] .head, html[data-theme="e"] .head { background: rgba(255,255,255,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(21,96,216,.08); }
html[data-theme="a"] .brand, html[data-theme="e"] .brand { color: #0a3a8c; }
html[data-theme="a"] .nav a, html[data-theme="e"] .nav a { border-bottom: 0; border-radius: 999px; padding: 10px 18px; min-height: 40px; margin: 8px 0; }
html[data-theme="a"] .nav a[aria-current="page"], html[data-theme="e"] .nav a[aria-current="page"] { color: #fff; background: linear-gradient(180deg, #46a0ff, #1f6fff); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,60,200,.3), 0 10px 20px -8px rgba(31,111,255,.6); }
html[data-theme="a"] .nav a:hover:not([aria-current]), html[data-theme="e"] .nav a:hover:not([aria-current]) { background: rgba(255,255,255,.85); }
html[data-theme="a"] .ask input[type=text], html[data-theme="e"] .ask input[type=text] { min-height: 64px; border: 1px solid rgba(255,255,255,.95); border-radius: 999px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.62)); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(110,150,220,.16), 0 24px 48px -26px rgba(40,90,190,.5); font-size: 19px; font-weight: 600; }
html[data-theme="a"] .ask input[type=text]:focus, html[data-theme="e"] .ask input[type=text]:focus { outline: 0; box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(31,111,255,.35), 0 24px 48px -20px rgba(31,111,255,.5); }
html[data-theme="a"] .btn, html[data-theme="e"] .btn { min-height: 64px; padding: 0 34px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #46a0ff, #1f6fff); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -4px 8px rgba(0,60,200,.35), 0 18px 30px -10px rgba(31,111,255,.7); font-weight: 800; transition: transform .12s, filter .12s; }
html[data-theme="a"] .btn:hover, html[data-theme="e"] .btn:hover { transform: translateY(-1px); }
html[data-theme="a"] .btn:active, html[data-theme="e"] .btn:active { transform: translateY(1px); }
html[data-theme="a"] .btn.line, html[data-theme="e"] .btn.line, html[data-theme="a"] .dp-act .btn, html[data-theme="e"] .dp-act .btn, html[data-theme="a"] .dp-foot .btn.line, html[data-theme="e"] .dp-foot .btn.line { min-height: 48px; padding: 0 24px; color: #16327a; background: linear-gradient(180deg, #e3f0ff, #bcd9ff); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(60,120,220,.25), 0 12px 22px -10px rgba(31,111,255,.55); }
html[data-theme="a"] .chip, html[data-theme="e"] .chip { border: 0; background: rgba(255,255,255,.85); color: #16327a; font-weight: 600; box-shadow: inset 0 1px 0 #fff, 0 8px 16px -10px rgba(31,111,255,.5); }
html[data-theme="a"] .chip:hover, html[data-theme="e"] .chip:hover { background: #fff; color: #1f6fff; }
html[data-theme="a"] .dp-card, html[data-theme="e"] .dp-card { padding: 30px 34px; border: 1px solid rgba(255,255,255,.95); border-radius: 32px; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 10px rgba(110,150,220,.15), 0 50px 90px -40px rgba(40,90,190,.55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
html[data-theme="a"] .sug, html[data-theme="e"] .sug { border: 1px solid rgba(255,255,255,.95); border-radius: 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 #fff, 0 30px 60px -28px rgba(40,90,190,.5); }
html[data-theme="a"] .sug li, html[data-theme="e"] .sug li { border-radius: 16px; margin: 0 6px; }
html[data-theme="a"] .sug li[aria-selected="true"], html[data-theme="e"] .sug li[aria-selected="true"] { background: #fff; box-shadow: 0 8px 16px -12px rgba(40,90,190,.6); }
html[data-theme="a"] .fld, html[data-theme="e"] .fld { border: 0; border-radius: 12px; padding: 6px 12px; box-shadow: inset 0 2px 5px rgba(70,110,190,.22), inset 0 -1px 0 #fff; }
html[data-theme="a"] .fld:focus, html[data-theme="e"] .fld:focus { outline: 0; background: #fff; box-shadow: 0 0 0 2px #1f6fff, 0 8px 16px -8px rgba(31,111,255,.4); }
html[data-theme="a"] .dp-tbl th, html[data-theme="e"] .dp-tbl th { background: rgba(207,228,255,.5); }
html[data-theme="a"] .dp-tbl th, html[data-theme="a"] .dp-tbl td, html[data-theme="e"] .dp-tbl th, html[data-theme="e"] .dp-tbl td { border-color: #dbe6fa; }
html[data-theme="a"] .home-count, html[data-theme="e"] .home-count { color: #3b4d72; }
html[data-theme="a"] .promo, html[data-theme="e"] .promo { background: rgba(255,255,255,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* E 전용: 격자 바탕, 이탤릭 그라데이션 제목, 눌린 입력칸 */
html[data-theme="e"] body { background-image: radial-gradient(1000px 500px at 50% -10%, #fff, transparent 70%), radial-gradient(700px 400px at 100% 40%, rgba(160,200,255,.45), transparent 70%), linear-gradient(rgba(110,140,190,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(110,140,190,.16) 1px, transparent 1px); background-size: auto, auto, 36px 36px, 36px 36px; }
html[data-theme="e"] .dp-card h2 { font-size: 34px; font-weight: 850; letter-spacing: -.04em; font-style: italic; background: linear-gradient(135deg, #7f8fb0, #2a3d6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="e"] .ask-ico:hover { background: rgba(31,111,255,.12); }

/* ── B 머티리얼 3 ── */
html[data-theme="b"] { --bg: #fff; --field: #e8f0fe; }
html[data-theme="b"] .head { border-bottom: 1px solid var(--line); }
html[data-theme="b"] .brand { color: var(--accent); }
html[data-theme="b"] .nav a { color: var(--sub); }
html[data-theme="b"] .nav a[aria-current="page"] { color: var(--accent); border-bottom-width: 3px; }
html[data-theme="b"] .ask input[type=text] { min-height: 56px; border: 0; border-radius: 28px; background: #ecf3fe; font-size: 16px; }
html[data-theme="b"] .ask input[type=text]:focus { outline: 0; box-shadow: 0 0 0 2px var(--accent); }
html[data-theme="b"] .btn { min-height: 56px; padding: 0 28px; border: 0; border-radius: 28px; background: var(--accent); font-size: 15px; font-weight: 600; letter-spacing: .01em; }
html[data-theme="b"] .btn:hover { filter: brightness(.94); }
html[data-theme="b"] .btn.line, html[data-theme="b"] .dp-act .btn, html[data-theme="b"] .dp-foot .btn.line { min-height: 40px; padding: 0 24px; border: 1px solid #7ea6e8; border-radius: 20px; background: #fff; color: var(--accent); }
html[data-theme="b"] .chip { min-height: 32px; padding: 4px 12px; border: 1px solid #b9cdf0; border-radius: 8px; font-size: 14px; font-weight: 500; color: #2c3c5e; background: #fff; }
html[data-theme="b"] .chip:hover { background: var(--tonal); color: var(--tonal-ink); }
html[data-theme="b"] .dp-card { padding: 28px 32px; border: 1px solid var(--line); border-radius: 28px; background: #f6f9ff; box-shadow: none; }
html[data-theme="b"] .dp-tbl { background: #fff; border-radius: 12px; }
html[data-theme="b"] .sug { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,29,58,.1), 0 8px 24px rgba(15,29,58,.12); }
html[data-theme="b"] .sug li[aria-selected="true"], html[data-theme="b"] .sug li:hover { background: #e8f0fe; }
html[data-theme="b"] .fld { border: 1px solid #6f87b0; border-radius: 4px; padding: 8px 14px; background: transparent; }
html[data-theme="b"] .fld:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 1px var(--accent); background: #fff; }
html[data-theme="b"] .fld.pdv { border-color: var(--accent); background: #e8f0fe; }

/* ── C 에어리 ── */
html[data-theme="c"] { --accent: #1b64f2; --blue: #1b64f2; --bg: #fff; --field: #f1f6ff; }
html[data-theme="c"] body { font-size: 18px; }
html[data-theme="c"] .head { background: #fff; border-bottom: 0; }
html[data-theme="c"] .head-in { padding-top: 8px; }
html[data-theme="c"] .brand { font-size: 21px; color: var(--ink); }
html[data-theme="c"] .nav a { border-bottom: 0; color: var(--sub); }
html[data-theme="c"] .nav a[aria-current="page"] { color: var(--ink); }
html[data-theme="c"] .wrap { max-width: 720px; }
html[data-theme="c"] .ask { flex-direction: column; gap: 14px; }
html[data-theme="c"] .ask .sug-wrap { flex: 0 0 auto; }
html[data-theme="c"] .ask input[type=text] { min-height: 68px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #dbe6fa, 0 12px 32px -16px rgba(11,27,59,.25); font-size: 20px; font-weight: 600; }
html[data-theme="c"] .ask input[type=text]:focus { outline: 0; box-shadow: 0 0 0 3px var(--accent), 0 20px 40px -20px rgba(27,100,242,.45); }
html[data-theme="c"] .btn { width: 100%; min-height: 60px; border: 0; border-radius: 20px; font-size: 18px; font-weight: 700; box-shadow: 0 14px 28px -14px rgba(27,100,242,.7); }
html[data-theme="c"] .btn.line, html[data-theme="c"] .dp-act .btn, html[data-theme="c"] .dp-foot .btn.line { width: auto; min-height: 48px; padding: 0 22px; color: #1b4fb8; background: #eef4ff; box-shadow: none; }
html[data-theme="c"] .chip { border: 0; background: #eef4ff; color: #1b4fb8; font-weight: 600; }
html[data-theme="c"] .dp-card { padding: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html[data-theme="c"] .dp-card h2 { text-align: left; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
html[data-theme="c"] .dp-meta { text-align: left; }
html[data-theme="c"] .sug { border: 0; border-radius: 20px; box-shadow: 0 0 0 1px #e3ecfb, 0 24px 48px -24px rgba(11,27,59,.3); }
html[data-theme="c"] .sug li { min-height: 60px; }
html[data-theme="c"] .sug li[aria-selected="true"], html[data-theme="c"] .sug li:hover { background: #f1f6ff; }
html[data-theme="c"] .fld { border: 0; border-radius: 16px; min-height: 52px; padding: 8px 18px; background: #f1f6ff; }
html[data-theme="c"] .fld:focus { outline: 0; background: #fff; box-shadow: 0 0 0 2px var(--accent); }
html[data-theme="c"] .fld.pdv { background: #e3eeff; }
html[data-theme="c"] .dp-tbl th { background: #fff; border-color: #e3ecfb; }
html[data-theme="c"] .dp-tbl td { border-color: #e3ecfb; }

/* ── D 워크스페이스: 왼쪽 레일 ── */
html[data-theme="d"] { --bg: #f4f8ff; --field: #f1f6ff; }
/* D안: 아이콘만 보이는 좁은 레일, 마우스를 올리거나 키보드로 들어가면 메뉴 패널이 옆으로 펼쳐진다 */
@media (min-width: 900px) {
  html[data-theme="d"] body { padding-left: 64px; }
  html[data-theme="d"] .head { position: fixed; left: 0; top: 0; bottom: 0; width: 64px; overflow: hidden; z-index: 60; border: 0; border-right: 1px solid var(--line); transition: width .22s ease, box-shadow .22s ease; }
  html[data-theme="d"] .head:hover, html[data-theme="d"] .head:focus-within { width: 224px; box-shadow: 14px 0 36px -18px rgba(20,60,150,.4); }
  html[data-theme="d"] .head-in { height: 100%; max-width: none; padding: 20px 8px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 20px; }
  html[data-theme="d"] .brand { display: none; }
  html[data-theme="d"] .navi-ico { display: block; flex: none; width: 48px; height: 48px; border-radius: 14px; background: url("navi-icon.png") center / cover no-repeat; box-shadow: 0 6px 14px -8px rgba(11,87,208,.5); }
  html[data-theme="d"] .navi-ico:hover { filter: brightness(1.06); }
  html[data-theme="d"] .nav { flex: none; flex-direction: column; align-items: stretch; gap: 8px; width: 48px; overflow: hidden; transition: width .22s ease; }
  html[data-theme="d"] .head:hover .nav, html[data-theme="d"] .head:focus-within .nav { width: 208px; }
  html[data-theme="d"] .nav a { display: flex; align-items: center; gap: 14px; height: 48px; min-height: 0; padding: 0 12px; overflow: hidden; font-size: 18px; white-space: nowrap; border-bottom: 0; border-radius: 14px; color: var(--sub); }
  html[data-theme="d"] .nav a::before { content: ""; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  html[data-theme="d"] .nav a[href="./"], html[data-theme="d"] .nav a[href="/"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9h-5v-6H9v6H4z'/%3E%3C/svg%3E"); }
  html[data-theme="d"] .nav a[href$="mydocs.html"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6zM14 3v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
  html[data-theme="d"] .nav a:hover { background: var(--blue-bg); }
  html[data-theme="d"] .nav a[aria-current="page"] { color: var(--tonal-ink); font-weight: 700; background: var(--tonal); }
  html[data-theme="d"] .head-right { position: fixed; top: 12px; right: 24px; z-index: 55; margin: 0; }
}
html[data-theme="d"] .ask input[type=text] { min-height: 52px; border: 1px solid #cfdcf5; border-radius: 26px; background: #fff; }
html[data-theme="d"] .ask input[type=text]:focus { outline: 0; box-shadow: 0 0 0 2px var(--accent); }
html[data-theme="d"] .btn { min-height: 52px; padding: 0 26px; border: 0; border-radius: 26px; font-size: 15px; font-weight: 600; }
html[data-theme="d"] .btn.line, html[data-theme="d"] .dp-act .btn, html[data-theme="d"] .dp-foot .btn.line { min-height: 40px; padding: 0 20px; border-radius: 20px; }
html[data-theme="d"] .chip { border: 1px solid #b9cdf0; border-radius: 8px; min-height: 36px; font-size: 14px; background: #fff; }
html[data-theme="d"] .dp-card { padding: 24px 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(15,29,58,.08); }
html[data-theme="d"] .sug { border: 1px solid #cfdcf5; border-radius: 16px; }
html[data-theme="d"] .fld { border: 1px solid #b9cdf0; border-radius: 8px; background: #f6f9ff; }
html[data-theme="d"] .fld.pdv { background: #eaf2ff; border-color: #9dbcf2; }

/* 공통: '초안 작성' 단추는 입력 칸 오른쪽 끝의 작은 입력 완료 아이콘으로 둔다(글자는 화면 읽기용으로만 남김) */
html[data-theme] .ask { position: relative; }
html[data-theme] .ask input[type=text] { padding-right: 64px; }
html[data-theme] .ask .sug-wrap.has-ico input[type=text] { padding-right: 106px; }
html[data-theme] .ask .ask-mic { right: 56px; }
html[data-theme] .ask > .btn[type="submit"] { position: absolute; right: 8px; top: 50%; z-index: 2; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; font-size: 0; line-height: 0; color: transparent; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5v7a3 3 0 01-3 3H5'/%3E%3Cpath d='M9 10l-4 5 4 5'/%3E%3C/svg%3E") center / 22px no-repeat var(--accent); box-shadow: 0 8px 16px -8px rgba(11,87,208,.7); }
html[data-theme="a"] .ask > .btn[type="submit"], html[data-theme="e"] .ask > .btn[type="submit"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5v7a3 3 0 01-3 3H5'/%3E%3Cpath d='M9 10l-4 5 4 5'/%3E%3C/svg%3E") center / 22px no-repeat, linear-gradient(180deg, #46a0ff, #1f6fff); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,60,200,.35), 0 10px 18px -8px rgba(31,111,255,.7); }
html[data-theme] .ask > .btn[type="submit"]:hover { transform: translateY(-50%); filter: brightness(1.08); }
html[data-theme] .ask > .btn[type="submit"]:active { transform: translateY(-50%) scale(.94); }

/* 목록 줄의 작은 단추(열기·삭제·초안 작성): 작고 부드럽게 */
html[data-theme] .acts { display: flex; gap: 6px; align-items: center; }
html[data-theme] .acts .btn.sm, html[data-theme] .item .btn.sm, html[data-theme] .table-wrap .btn.sm { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--tonal-ink); background: #e3eeff; box-shadow: none; transform: none; filter: none; }
html[data-theme] .acts .btn.sm:hover, html[data-theme] .item .btn.sm:hover, html[data-theme] .table-wrap .btn.sm:hover { background: var(--tonal); transform: none; filter: none; }
html[data-theme] .acts .btn.sm.line { color: var(--sub); background: transparent; border: 1px solid #d7e3f7; }
html[data-theme] .acts .btn.sm.line:hover { background: var(--blue-bg); }

@media (prefers-reduced-motion: reduce) { html[data-theme] .btn { transition: none; } }
@media print { .head-btn { display: none !important; } html[data-theme] body { padding-left: 0; background: #fff; } }

/* ── D 기본 화면: Material 3 엘리베이션 + 격자 + 유리 + 부유감 (모두 D 에만 적용) ── */
html[data-theme="d"] {
  --sh: 0, 32, 96;
  --e1: 0 1px 2px rgba(var(--sh), .30), 0 1px 3px 1px rgba(var(--sh), .15);
  --e2: 0 1px 2px rgba(var(--sh), .30), 0 2px 6px 2px rgba(var(--sh), .15);
  --e3: 0 1px 3px rgba(var(--sh), .30), 0 4px 8px 3px rgba(var(--sh), .15);
  --e4: 0 2px 3px rgba(var(--sh), .30), 0 6px 10px 4px rgba(var(--sh), .15);
  --e5: 0 4px 4px rgba(var(--sh), .30), 0 8px 12px 6px rgba(var(--sh), .15);
  --primary: #0b57d0;
}
html[data-theme="d"] body { isolation: isolate; background: transparent; }
html[data-theme="d"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(0,32,96,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,32,96,.07) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 35%, transparent 100%); }
html[data-theme="d"] body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(900px 420px at 50% -8%, rgba(255,255,255,.95), transparent 70%), #eef3fb; }
/* 유리: 머리말·레일·우측 탭·대화창 */
/* 머리말(.head)에는 backdrop-filter 를 직접 주지 않는다 — 주면 그 안의 position:fixed 인 제안·설정·사용자 배지가 화면 오른쪽 위가 아니라 레일 기준으로 놓인다. 유리는 ::before 에 그린다. */
html[data-theme="d"] #chatPanel, html[data-theme="d"] .promo-tab {
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme="d"] .head { background: transparent; box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme="d"] .head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); transition: background .22s ease; }
html[data-theme="d"] .promo-tab, html[data-theme="d"] .promo-tab.how-tab { color: var(--navy); border-color: rgba(11,87,208,.35); }
html[data-theme="d"] .promo-tab:hover { box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,.9); background: rgba(255,255,255,.8); }
@media (min-width: 900px) {
  html[data-theme="d"] .head:hover, html[data-theme="d"] .head:focus-within { box-shadow: var(--e4), inset 0 1px 0 rgba(255,255,255,.9); }
  html[data-theme="d"] .head:hover::before, html[data-theme="d"] .head:focus-within::before { background: rgba(255,255,255,.78); }
}
/* 검색 칸 */
html[data-theme="d"] .ask input[type=text] { background: rgba(255,255,255,.88); border: 0; box-shadow: 0 10px 30px -10px rgba(var(--sh), .28), 0 2px 8px rgba(var(--sh), .12); }
html[data-theme="d"] .ask input[type=text]:focus { outline: 0; box-shadow: 0 0 0 2px var(--primary), 0 10px 30px -10px rgba(var(--sh), .28); }
/* 서류 카드: 불투명에 가까운 흰색, 블러 없음 */
html[data-theme="d"] .dp-card, html[data-theme="d"] .item, html[data-theme="d"] .sug { background: rgba(255,255,255,.96); box-shadow: 0 12px 32px -14px rgba(var(--sh), .35), 0 2px 8px rgba(var(--sh), .12); transition: transform .2s ease, box-shadow .2s ease; }
html[data-theme="d"] .dp-card:hover, html[data-theme="d"] .item:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(var(--sh), .4), 0 4px 12px rgba(var(--sh), .14); }
/* 기본 버튼·입력 완료 아이콘: 볼록 */
html[data-theme="d"] .btn:not(.line):not(.sm):not([type="submit"]) { background-image: linear-gradient(180deg, #3f86ee, #0b57d0); box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,.35); color: #fff; }
html[data-theme="d"] .btn:not(.line):not(.sm):not([type="submit"]):active { transform: translateY(1px); box-shadow: var(--e1); }
/* 입력 완료 아이콘(↵): 아이콘 위에 위가 밝은 청색 그라데이션을 겹친다. 누를 때도 세로 가운데(-50%)를 유지한다 */
html[data-theme="d"] .ask > .btn[type="submit"] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5v7a3 3 0 01-3 3H5'/%3E%3Cpath d='M9 10l-4 5 4 5'/%3E%3C/svg%3E") center / 22px no-repeat, linear-gradient(180deg, #3f86ee, #0b57d0); box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,.35); color: transparent; }
html[data-theme="d"] .ask > .btn[type="submit"]:active { transform: translateY(-50%) scale(.94); box-shadow: var(--e1); }
html[data-theme="d"] .chip { background: linear-gradient(180deg, #fff, #e8f0fe); box-shadow: var(--e1); }
/* 입력 칸: 눌린 모양 + Material 채움형 밑줄 */
html[data-theme="d"] .fld { box-shadow: inset 0 2px 5px rgba(var(--sh), .14); border: 0; border-bottom: 2px solid var(--primary); border-radius: 8px 8px 0 0; }
html[data-theme="d"] .fld:focus { background: #fff; outline: 0; box-shadow: inset 0 2px 5px rgba(var(--sh), .14), 0 0 0 2px rgba(11,87,208,.35); }
/* 부유감: 대화 버튼·우측 탭 */
@keyframes navi-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
html[data-theme="d"] .chat-fab { animation: navi-float 4.5s ease-in-out infinite; }
html[data-theme="d"] .side-tabs:not(.in-rail) #howTab { animation: navi-float 5s ease-in-out infinite; }
html[data-theme="d"] .side-tabs:not(.in-rail) #promoTab { animation: navi-float 5s ease-in-out infinite -2.5s; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="d"] .chat-fab, html[data-theme="d"] #howTab, html[data-theme="d"] #promoTab { animation: none; }
  html[data-theme="d"] *, html[data-theme="d"] *::before, html[data-theme="d"] *::after { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="d"] #chatPanel, html[data-theme="d"] .promo-tab, html[data-theme="d"] .head::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print { html[data-theme="d"] body::before, html[data-theme="d"] body::after { display: none; } }

/* ── D 왼쪽 메뉴 안의 사용법·특징 (폭 900px 이상) — 줄어들었을 때 폭은 아이콘(48px)+여백 8px×2 ── */
@media (min-width: 900px) {
  html[data-theme="d"] .side-tabs.in-rail { position: static; flex: none; display: flex; flex-direction: column; gap: 8px; width: 48px; overflow: hidden; transition: width .22s ease; padding-top: 12px; border-top: 1px solid var(--line); }
  html[data-theme="d"] .head:hover .side-tabs.in-rail, html[data-theme="d"] .head:focus-within .side-tabs.in-rail { width: 208px; }
  html[data-theme="d"] .side-tabs.in-rail .promo-tab { display: flex; align-items: center; gap: 14px; width: 100%; height: 48px; padding: 0 12px; writing-mode: horizontal-tb; font-size: 18px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-align: left;
    color: var(--sub); background: transparent; border: 0; border-radius: 14px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; transform: none; opacity: 1; pointer-events: auto; }
  html[data-theme="d"] .side-tabs.in-rail .promo-tab::before { content: ""; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  html[data-theme="d"] .side-tabs.in-rail #howTab { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 015 .5c0 1.7-2.5 2-2.5 3.5M12 17h.01'/%3E%3C/svg%3E"); }
  html[data-theme="d"] .side-tabs.in-rail #promoTab { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.5 6.6 19.5l1.2-6L3.3 9.3l6.1-.7z'/%3E%3C/svg%3E"); }
  html[data-theme="d"] .side-tabs.in-rail .promo-tab:hover { background: var(--blue-bg); box-shadow: none; }
  html[data-theme="d"] .side-tabs.in-rail .promo-tab[aria-expanded="true"] { color: var(--tonal-ink); font-weight: 700; background: var(--tonal); }
}