/* ====================================================================
   Dear, Today - 공통 테마 시스템 (8종)
   위젯 / 설정 페이지 / 보관함 페이지가 모두 이 파일 하나를 씁니다.
   .al-themed[data-theme="classic|retro|orbit|win98|memo|mail|crt|jelly"]
   accent / panel-bg / panel-bg2 / 폰트 / 커서 깜빡임은 인라인 style로 덮어씁니다.
   ==================================================================== */

.al-themed {
  --radius: 0px;
  --border-w: 2px;
  --font-body: inherit;
  --font-chrome: inherit;
  --tw-blink: 1s;
  --pattern: none;
  --pattern-size: auto;
  color: var(--ink);
  font-family: var(--font-chrome);
}

/* ---------------- 테마별 기본 색 ---------------- */
.al-themed[data-theme="classic"] {
  --outline:#2B2620; --fill:#C9A876; --panel-bg:#F1E9D8; --panel-bg2:#EDE6D6;
  --accent:#7A2E2E; --accent2:#4A5A48; --page-bg:#EDE6D6; --ink:#2B2620;
  --radius:10px; --border-w:1px;
}
.al-themed[data-theme="retro"] {
  --outline:#2b2b3d; --fill:#ffe79a; --panel-bg:#eaf1ff; --panel-bg2:#ffe6f2;
  --accent:#ff6fa5; --accent2:#6fc3ff; --page-bg:#eef2ff; --ink:#2b2b3d;
  --border-w:3px;
  --pattern: radial-gradient(var(--outline) 1px, transparent 1px); --pattern-size:14px 14px;
}
.al-themed[data-theme="orbit"] {
  --outline:#ffb86b; --fill:#ffcf9e; --panel-bg:#3a3030; --panel-bg2:#2e2525;
  --accent:#ffb86b; --accent2:#ffe0a3; --page-bg:#221a1a; --ink:#FFF6E0;
  --radius:8px; --border-w:1px;
}
.al-themed[data-theme="win98"] {
  --outline:#404040; --fill:#ffe680; --panel-bg:#c0c0c0; --panel-bg2:#ffffff;
  --accent:#000080; --accent2:#1084d0; --page-bg:#008080; --ink:#000000;
}
.al-themed[data-theme="memo"] {
  --outline:#cbbd9c; --fill:#fff4a8; --panel-bg:#fffdf6; --panel-bg2:#fffdf6;
  --accent:#c0392b; --accent2:#f0dc8c; --page-bg:#d6bd94; --ink:#3a3226;
  --border-w:1px;
}
.al-themed[data-theme="mail"] {
  --outline:#c9d2e3; --fill:#fbf8f1; --panel-bg:#fbf8f1; --panel-bg2:#fbf8f1;
  --accent:#b3312f; --accent2:#2a5db0; --page-bg:#e9eef7; --ink:#243044;
  --border-w:1px;
}
.al-themed[data-theme="crt"] {
  --outline:#2b7a45; --fill:#04120a; --panel-bg:#04120a; --panel-bg2:#04120a;
  --accent:#5dff8a; --accent2:#ffd45d; --page-bg:#020a04; --ink:#5dff8a;
  --border-w:2px;
}
.al-themed[data-theme="jelly"] {
  --outline:#f0b8dc; --fill:#ffc4e6; --panel-bg:#ffe4f3; --panel-bg2:#d8f1ff;
  --accent:#f08cc4; --accent2:#b58cff; --page-bg:#ffe9f5; --ink:#5a3f78;
  --radius:24px; --border-w:3px;
}

/* ============ 공용 컴포넌트 ============ */
.al-page { min-height:100%; background:var(--page-bg); color:var(--ink); }
.al-themed[data-theme="memo"] .al-page { background: radial-gradient(#b8996a 1px, transparent 1px) 0 0/14px 14px, var(--page-bg); }
.al-themed[data-theme="jelly"] .al-page { background: linear-gradient(135deg,#d9f1ff,#ffe1f0); }

.al-window {
  position:relative;
  background:var(--panel-bg);
  background-image:var(--pattern);
  background-size:var(--pattern-size);
  border:var(--border-w) solid var(--outline);
  border-radius:var(--radius);
  color:var(--ink);
}
.al-window-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px;
  border-bottom:var(--border-w) solid var(--outline);
}
.al-window-title { font-size:12px; letter-spacing:.02em; }
.al-window-actions { display:flex; gap:4px; }
.al-icon-btn {
  width:24px; height:24px; padding:0;
  border:var(--border-w) solid var(--outline);
  background:var(--panel-bg2); color:var(--ink);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-family:inherit; line-height:1;
  border-radius:calc(var(--radius) / 2);
}
.al-window-body { padding:14px; }

.al-letter-date { font-size:11px; color:var(--accent); margin-bottom:8px; font-weight:600; }
.al-letter-content { font-family:var(--font-body); font-size:14px; line-height:1.85; white-space:pre-wrap; word-break:keep-all; }
.al-letter-content.typing::after { content:"▌"; animation:al-bl var(--tw-blink,1s) steps(1) infinite; }
@keyframes al-bl { 50% { opacity:0; } }
.al-hint { margin-top:14px; padding-top:10px; border-top:1px dashed var(--outline); font-size:11px; line-height:1.7; opacity:.9; }
.al-hint a { color:var(--accent); text-decoration:none; }
.al-hint a:hover { text-decoration:underline; }
.al-loading, .al-error { font-size:12px; padding:12px 0; }
.al-error { color:var(--accent2); }

/* 관리자 도구 (수정 / 즐겨찾기 / 답장) */
.al-tools { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.al-mini {
  font-family:inherit; font-size:11px; padding:4px 10px; cursor:pointer;
  border:1px solid var(--outline); background:transparent; color:var(--ink);
  border-radius:calc(var(--radius) / 2);
}
.al-mini:hover { background:color-mix(in srgb, var(--accent) 18%, transparent); }
.al-mini.on { background:var(--accent); color:var(--panel-bg); }
.al-mini.main { background:var(--accent); color:var(--panel-bg); border-color:var(--accent); }
.al-box { margin-top:12px; }
.al-box[hidden] { display:none; }
.al-box label { display:block; font-size:11px; font-weight:700; margin-bottom:4px; }
.al-box input, .al-box textarea {
  width:100%; margin-bottom:6px; padding:7px 9px; font:13px/1.6 var(--font-body);
  background:var(--panel-bg); color:var(--ink);
  border:1px solid var(--outline); border-radius:calc(var(--radius) / 3);
}
.al-box textarea { min-height:90px; resize:vertical; }
.al-box .al-row { display:flex; gap:6px; }
.al-reply-shown { font-size:12px; line-height:1.7; padding:8px 10px; border:1px dashed var(--outline); margin-bottom:6px; white-space:pre-wrap; }

/* 목록 (보관함) */
.al-tabs { display:flex; gap:6px; margin:0 0 12px; }
.al-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.al-item {
  background:var(--panel-bg2); border:var(--border-w) solid var(--outline); border-radius:var(--radius);
  padding:12px 14px; display:flex; align-items:center; gap:12px; cursor:pointer;
  border-left-width:4px; border-left-color:transparent; color:var(--ink);
}
.al-item.unread { border-left-color:var(--accent); }
.al-item-date { font-size:11px; color:var(--accent); width:48px; flex-shrink:0; }
.al-item-title { font-size:13px; flex:1; }
.al-item-fav { color:var(--accent); font-size:12px; }
.al-item-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.al-item.read .al-item-dot { visibility:hidden; }
.al-empty { font-size:13px; opacity:.7; padding:16px 4px; }

/* 폼 (설정 페이지) */
.al-field { margin:16px 0; }
.al-field:first-child { margin-top:0; }
.al-field label { display:block; font-size:12px; font-weight:700; margin-bottom:6px; }
.al-field .al-hint-text { display:block; font-size:11px; font-weight:400; opacity:.7; margin-top:2px; }
.al-field input[type=text], .al-field input[type=time], .al-field textarea, .al-field select {
  width:100%; border:var(--border-w) solid var(--outline); border-radius:calc(var(--radius) / 3);
  background:var(--panel-bg); color:var(--ink); padding:9px 11px; font-size:13px; font-family:inherit;
}
.al-field textarea { min-height:60px; line-height:1.6; resize:vertical; }
.al-field textarea.big { min-height:170px; }
.al-field input[type=color] { width:44px; height:32px; border:var(--border-w) solid var(--outline); padding:0; background:none; cursor:pointer; }
.al-field input[type=range] { width:100%; }
.al-color-row { display:flex; align-items:center; gap:10px; }
.al-color-row code { font-size:11px; opacity:.7; }
.al-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px) { .al-two { grid-template-columns:1fr; } }
.al-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.al-chip { font-family:inherit; font-size:11px; padding:3px 10px; cursor:pointer; border:1px dashed var(--accent); color:var(--accent); background:none; border-radius:12px; }
.al-cnt { float:right; font-weight:400; font-size:11px; opacity:.6; }
.al-sec { margin:22px 0 14px; padding-top:12px; border-top:1px dashed var(--outline); font-size:11px; letter-spacing:.12em; color:var(--accent); }
.al-save-btn {
  margin-top:8px; width:100%; padding:12px; border:var(--border-w) solid var(--outline);
  border-radius:calc(var(--radius) / 3); background:var(--accent); color:var(--panel-bg);
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.al-save-btn:active { transform:translate(1px,1px); }
.al-link-btn { display:inline-block; margin:0 8px 8px 0; padding:8px 12px; font-size:12px; text-decoration:none; color:var(--accent); border:1px dashed var(--accent); border-radius:calc(var(--radius) / 3); }
.al-msg { margin-top:10px; font-size:12px; text-align:center; }
.al-msg.ok { color:var(--accent2); }
.al-msg.err { color:#d24; }
.al-back-link { display:inline-block; margin-bottom:16px; font-size:12px; color:var(--accent); text-decoration:none; cursor:pointer; background:none; border:none; font-family:inherit; }
.al-page-title { font-size:21px; margin:0 0 4px; }
.al-page-sub { font-size:12px; opacity:.75; margin:0 0 22px; }
.al-notice { padding:14px; font-size:13px; line-height:1.7; }

/* ============ 테마별 창 스타일 ============ */

/* 클래식 */
.al-themed[data-theme="classic"] .al-window { border-top:3px solid var(--accent); box-shadow:0 10px 28px rgba(0,0,0,.14); }
.al-themed[data-theme="classic"] .al-window-head { background:rgba(0,0,0,.04); }
.al-themed[data-theme="classic"] .al-icon-btn { border:none; background:transparent; opacity:.65; }
.al-themed[data-theme="classic"] .al-icon-btn:hover { opacity:1; background:rgba(0,0,0,.08); }

/* 레트로 도트 */
.al-themed[data-theme="retro"] .al-window { box-shadow:4px 4px 0 var(--outline); }
.al-themed[data-theme="retro"] .al-window-head { background:linear-gradient(180deg,var(--accent2),#a7d8ff); }
.al-themed[data-theme="retro"] .al-icon-btn { box-shadow:2px 2px 0 var(--outline); }
.al-themed[data-theme="retro"] .al-icon-btn:active { transform:translate(1px,1px); box-shadow:none; }
.al-themed[data-theme="retro"] .al-window-body,
.al-themed[data-theme="orbit"] .al-window-body { background:var(--panel-bg2); margin:8px; border:1px dashed var(--outline); }
.al-themed[data-theme="retro"] .al-item { box-shadow:2px 2px 0 rgba(43,43,61,.25); }

/* 오르빗 계기판 : 앰버 HUD 프레임 */
.al-themed[data-theme="orbit"] .al-window {
  --hud:var(--accent);
  border-color:transparent;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(0,0,0,.10));
  background-repeat:no-repeat; background-size:100% 100%;
  background-color:color-mix(in srgb,var(--panel-bg) 88%,transparent);
  box-shadow:0 0 24px color-mix(in srgb,var(--hud) 25%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--hud) 55%,transparent);
  overflow:hidden;
}
.al-themed[data-theme="orbit"] .al-window::before {
  content:""; position:absolute; inset:0; border-radius:8px; pointer-events:none; z-index:2;
  border:1px dashed color-mix(in srgb,var(--hud) 40%,transparent);
  filter:drop-shadow(0 0 2px color-mix(in srgb,var(--hud) 70%,transparent));
  background:linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud)),linear-gradient(var(--hud),var(--hud));
  background-repeat:no-repeat;
  background-size:14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px;
  background-position:left 3px top 3px,left 3px top 3px,right 3px top 3px,right 3px top 3px,left 3px bottom 3px,left 3px bottom 3px,right 3px bottom 3px,right 3px bottom 3px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55);
}
.al-themed[data-theme="orbit"] .al-window::after {
  content:""; position:absolute; inset:0; border-radius:8px; pointer-events:none; z-index:3; mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0px,rgba(0,0,0,.12) 1px,transparent 2px,transparent 3px);
}
.al-themed[data-theme="orbit"] .al-window-head { background:transparent; border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent); }
.al-themed[data-theme="orbit"] .al-window-head::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent2); box-shadow:0 0 6px var(--accent2); margin-right:7px; }
.al-themed[data-theme="orbit"] .al-window-title { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; margin-right:auto; }
.al-themed[data-theme="orbit"] .al-icon-btn { border-color:var(--accent); color:var(--accent); background:transparent; }
.al-themed[data-theme="orbit"] .al-icon-btn:hover { background:color-mix(in srgb,var(--accent) 14%,transparent); }
.al-themed[data-theme="orbit"] .al-window-body { border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.al-orbit-sparkle { display:none; }
.al-themed[data-theme="orbit"] .al-orbit-sparkle { display:block; position:absolute; pointer-events:none; z-index:4; filter:drop-shadow(0 0 3px rgba(255,160,60,.9)); }
.al-orbit-sparkle.pos-1 { top:46px; right:30px; width:16px; height:16px; }
.al-orbit-sparkle.pos-2 { bottom:46px; left:18px; width:12px; height:12px; opacity:.85; }
.al-orbit-sparkle.pos-3 { bottom:20px; left:38%; width:6px; height:6px; opacity:.7; }
.al-orbit-sparkle.pos-4 { bottom:34px; right:24px; width:9px; height:9px; opacity:.6; }
.al-orbit-sparkle.pos-ring { top:-14px; right:-14px; width:70px; height:70px; opacity:.5; }

/* Win98 */
.al-themed[data-theme="win98"] .al-window { border:2px solid; border-color:#fff #404040 #404040 #fff; box-shadow:1px 1px 0 #000; padding:2px; }
.al-themed[data-theme="win98"] .al-window-head { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; font-weight:700; padding:3px 4px; border-bottom:0; }
.al-themed[data-theme="win98"] .al-icon-btn { width:18px; height:16px; font-size:10px; background:#c0c0c0; color:#000; border:2px solid; border-color:#fff #404040 #404040 #fff; }
.al-themed[data-theme="win98"] .al-window-body { background:var(--panel-bg2); margin:2px; border:2px solid; border-color:#404040 #fff #fff #404040; }
.al-themed[data-theme="win98"] .al-item { border:2px solid; border-color:#fff #404040 #404040 #fff; background:#c0c0c0; }

/* 메모지 */
.al-themed[data-theme="memo"] .al-window { border:0; border-radius:2px; box-shadow:0 8px 20px rgba(0,0,0,.3); padding:16px 10px; }
.al-themed[data-theme="memo"] .al-window::before {
  content:""; position:absolute; top:-10px; left:50%; width:90px; height:22px; margin-left:-45px;
  background:color-mix(in srgb,var(--accent2) 80%,transparent); transform:rotate(3deg); box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.al-themed[data-theme="memo"] .al-window-head { border-bottom:2px dashed var(--outline); }
.al-themed[data-theme="memo"] .al-icon-btn { background:none; border:0; color:#7a6a4a; }
.al-themed[data-theme="memo"] .al-letter-content { font-size:15px; line-height:1.8; }
.al-themed[data-theme="memo"] .al-item { background:#fffdf6; box-shadow:0 2px 6px rgba(0,0,0,.15); }

/* 우편 */
.al-themed[data-theme="mail"] .al-window {
  border:8px solid; box-shadow:0 8px 22px rgba(0,0,0,.25);
  border-image:repeating-linear-gradient(-45deg,var(--accent) 0 10px,var(--panel-bg) 10px 20px,var(--accent2) 20px 30px,var(--panel-bg) 30px 40px) 8;
  border-radius:0;
}
.al-themed[data-theme="mail"] .al-window-head { border-bottom:1px solid var(--outline); }
.al-themed[data-theme="mail"] .al-window-title::before { content:"✈ "; }
.al-themed[data-theme="mail"] .al-icon-btn { background:none; border:1px solid #9aa7bd; }
.al-themed[data-theme="mail"] .al-letter-date {
  display:inline-block; border:2px solid var(--accent); padding:1px 8px; border-radius:3px; transform:rotate(-4deg);
  font:700 11px monospace; letter-spacing:.08em;
}
.al-themed[data-theme="mail"] .al-panel::after {
  content:""; position:absolute; top:46px; right:12px; width:34px; height:42px;
  background:linear-gradient(135deg,#f6c453,#e88a3a); border:3px solid #fff; outline:2px dotted #fff;
  box-shadow:0 0 0 1px #c9b9a0; transform:rotate(4deg); pointer-events:none;
}
.al-themed[data-theme="mail"] .al-panel .al-window-body { padding-right:60px; }

/* CRT 터미널 */
.al-themed[data-theme="crt"] .al-window {
  overflow:hidden; box-shadow:0 0 18px rgba(93,255,138,.25), inset 0 0 40px rgba(0,0,0,.7);
  text-shadow:0 0 5px color-mix(in srgb,var(--ink) 60%,transparent);
}
.al-themed[data-theme="crt"] .al-window::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);
}
.al-themed[data-theme="crt"] .al-window-title::before { content:"> "; }
.al-themed[data-theme="crt"] .al-icon-btn { background:none; border:1px solid var(--outline); color:var(--ink); }
.al-themed[data-theme="crt"] .al-letter-content { font-size:13px; }
.al-themed[data-theme="crt"] .al-letter-content.typing::after { content:"█"; }

/* Y2K 젤리 */
.al-themed[data-theme="jelly"] .al-window {
  background:linear-gradient(160deg,var(--panel-bg),var(--panel-bg2)); overflow:hidden;
  box-shadow:0 0 0 1px var(--outline), 0 10px 26px rgba(200,120,220,.35), inset 0 -8px 16px rgba(255,255,255,.6);
  border-color:#fff;
}
.al-themed[data-theme="jelly"] .al-window::before {
  content:""; position:absolute; top:0; left:8%; width:84%; height:38%; pointer-events:none;
  border-radius:0 0 50% 50%/0 0 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
}
.al-themed[data-theme="jelly"] .al-window-head, .al-themed[data-theme="jelly"] .al-window-body { position:relative; }
.al-themed[data-theme="jelly"] .al-window-head { padding:8px 12px; border-bottom:0; }
.al-themed[data-theme="jelly"] .al-icon-btn {
  border:0; border-radius:50%; color:#8a2d63;
  background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 65%);
  box-shadow:0 2px 4px rgba(200,80,160,.4);
}
.al-themed[data-theme="jelly"] .al-item { border-color:#fff; background:rgba(255,255,255,.6); }

/* ============ 편지봉투 아이콘 ============ */
#al-envelope { position:relative; background:none; border:0; padding:4px; cursor:pointer; display:block; color:inherit; font-family:inherit; }
#al-envelope svg { display:block; overflow:visible; transition:transform .15s; }
#al-envelope:hover svg, #al-envelope:hover .al-emoji { transform:translateY(-2px); }
.al-emoji { display:block; font-size:26px; line-height:1; transition:transform .15s; }
#al-envelope.al-locked { opacity:.5; }
#al-envelope.al-locked * { animation:none !important; }

.al-themed[data-theme="classic"] #al-envelope,
.al-themed[data-theme="retro"] #al-envelope {
  width:62px; height:62px; padding:0; display:flex; align-items:center; justify-content:center;
  border:var(--border-w) solid var(--outline); border-radius:var(--radius); background:var(--panel-bg2);
}
.al-themed[data-theme="classic"] #al-envelope { box-shadow:0 6px 16px rgba(0,0,0,.28); }
.al-themed[data-theme="retro"] #al-envelope { box-shadow:3px 3px 0 var(--outline); animation:al-float 2.6s ease-in-out infinite; }
.al-themed[data-theme="retro"] #al-envelope:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--outline); }
@keyframes al-float { 0%,100% { margin-top:0; } 50% { margin-top:-5px; } }

.al-pixel-icon { position:relative; width:48px; height:32px; display:block; }
.al-px { position:absolute; width:4px; height:4px; }
.al-px-outline {
  left:0; top:0; background: var(--outline);
  box-shadow: 4px 0px 0 0 var(--outline), 8px 0px 0 0 var(--outline), 12px 0px 0 0 var(--outline), 16px 0px 0 0 var(--outline), 20px 0px 0 0 var(--outline), 24px 0px 0 0 var(--outline), 28px 0px 0 0 var(--outline), 32px 0px 0 0 var(--outline), 36px 0px 0 0 var(--outline), 40px 0px 0 0 var(--outline), 44px 0px 0 0 var(--outline), 0px 4px 0 0 var(--outline), 4px 4px 0 0 var(--outline), 40px 4px 0 0 var(--outline), 44px 4px 0 0 var(--outline), 0px 8px 0 0 var(--outline), 8px 8px 0 0 var(--outline), 36px 8px 0 0 var(--outline), 44px 8px 0 0 var(--outline), 0px 12px 0 0 var(--outline), 12px 12px 0 0 var(--outline), 32px 12px 0 0 var(--outline), 44px 12px 0 0 var(--outline), 0px 16px 0 0 var(--outline), 16px 16px 0 0 var(--outline), 28px 16px 0 0 var(--outline), 44px 16px 0 0 var(--outline), 0px 20px 0 0 var(--outline), 20px 20px 0 0 var(--outline), 24px 20px 0 0 var(--outline), 44px 20px 0 0 var(--outline), 0px 24px 0 0 var(--outline), 44px 24px 0 0 var(--outline), 0px 28px 0 0 var(--outline), 4px 28px 0 0 var(--outline), 8px 28px 0 0 var(--outline), 12px 28px 0 0 var(--outline), 16px 28px 0 0 var(--outline), 20px 28px 0 0 var(--outline), 24px 28px 0 0 var(--outline), 28px 28px 0 0 var(--outline), 32px 28px 0 0 var(--outline), 36px 28px 0 0 var(--outline), 40px 28px 0 0 var(--outline), 44px 28px 0 0 var(--outline);
}
.al-px-fill {
  left:8px; top:4px; background: var(--fill);
  box-shadow: 4px 0px 0 0 var(--fill), 8px 0px 0 0 var(--fill), 12px 0px 0 0 var(--fill), 16px 0px 0 0 var(--fill), 20px 0px 0 0 var(--fill), 24px 0px 0 0 var(--fill), 28px 0px 0 0 var(--fill), -4px 4px 0 0 var(--fill), 4px 4px 0 0 var(--fill), 8px 4px 0 0 var(--fill), 12px 4px 0 0 var(--fill), 16px 4px 0 0 var(--fill), 20px 4px 0 0 var(--fill), 24px 4px 0 0 var(--fill), 32px 4px 0 0 var(--fill), -4px 8px 0 0 var(--fill), 0px 8px 0 0 var(--fill), 8px 8px 0 0 var(--fill), 12px 8px 0 0 var(--fill), 16px 8px 0 0 var(--fill), 20px 8px 0 0 var(--fill), 28px 8px 0 0 var(--fill), 32px 8px 0 0 var(--fill), -4px 12px 0 0 var(--fill), 0px 12px 0 0 var(--fill), 4px 12px 0 0 var(--fill), 12px 12px 0 0 var(--fill), 16px 12px 0 0 var(--fill), 24px 12px 0 0 var(--fill), 28px 12px 0 0 var(--fill), 32px 12px 0 0 var(--fill), -4px 16px 0 0 var(--fill), 0px 16px 0 0 var(--fill), 4px 16px 0 0 var(--fill), 8px 16px 0 0 var(--fill), 20px 16px 0 0 var(--fill), 24px 16px 0 0 var(--fill), 28px 16px 0 0 var(--fill), 32px 16px 0 0 var(--fill), -4px 20px 0 0 var(--fill), 0px 20px 0 0 var(--fill), 4px 20px 0 0 var(--fill), 8px 20px 0 0 var(--fill), 12px 20px 0 0 var(--fill), 16px 20px 0 0 var(--fill), 20px 20px 0 0 var(--fill), 24px 20px 0 0 var(--fill), 28px 20px 0 0 var(--fill), 32px 20px 0 0 var(--fill);
}

.al-line-icon { width:64px; height:44px; }
.al-line-icon * { fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:miter; stroke-linecap:butt; }
.al-themed[data-theme="orbit"] .al-line-icon { animation:al-glow 2.4s ease-in-out infinite; }
@keyframes al-glow { 0%,100% { filter:drop-shadow(0 0 3px rgba(255,184,107,.35)); } 50% { filter:drop-shadow(0 0 10px rgba(255,184,107,.85)); } }
.al-blink { animation:al-bl var(--tw-blink,1s) steps(1) infinite; }

.al-badge {
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:#e33; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center;
}
.al-themed[data-theme="classic"] .al-badge, .al-themed[data-theme="retro"] .al-badge, .al-themed[data-theme="orbit"] .al-badge {
  top:-8px; right:-8px; background:var(--accent2); border:2px solid var(--outline);
}
.al-themed[data-theme="retro"] .al-badge, .al-themed[data-theme="orbit"] .al-badge { border-radius:0; animation:al-bl 1.1s steps(1) infinite; }
.al-themed[data-theme="orbit"] .al-badge { color:#2a2020; }
.al-themed[data-theme="crt"] .al-badge { background:var(--accent); color:#04120a; }

/* ============ 위젯 위치 / 패널 ============ */
#al-widget { position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:2147483000; }
.al-panel {
  position:absolute; right:92px; top:50%; transform:translateY(-50%);
  width:300px; max-width:calc(100vw - 116px); max-height:400px;
  display:flex; flex-direction:column; overflow:hidden;
}
.al-panel[hidden] { display:none; }
.al-panel .al-window-body { flex:1; overflow-y:auto; min-height:0; }
.al-themed[data-theme="memo"] .al-panel { overflow:visible; transform:translateY(-50%) rotate(-2deg); }
.al-themed[data-theme="memo"] .al-panel .al-window-body { overflow-y:auto; max-height:320px; }
.al-themed[data-theme="classic"] .al-panel, .al-themed[data-theme="retro"] .al-panel { right:76px; }

@media (max-width:460px) {
  #al-widget { right:10px; }
  .al-panel { right:80px; width:calc(100vw - 120px); max-width:none; }
}

/* 편지 제목 (본문 위) */
.al-character-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.al-character-choice { width:100%; text-align:left; padding:10px 12px; border:1px solid var(--outline); background:var(--panel-bg); color:inherit; cursor:pointer; font:inherit; border-radius:8px; }
.al-character-choice:hover { border-color:var(--accent); }
.al-character-choice .al-character-name { font-weight:700; }
.al-character-choice .al-character-meta { display:block; font-size:11px; opacity:.65; margin-top:3px; }
.al-letter-title { font-size:14px; font-weight:700; margin-bottom:8px; font-family:var(--font-body); }
.al-letter-title:empty { display:none; }