:root{
  --bg:#040B1C;--panel:#0A1330;--card:#0F1A3A;--gold:#D9B25F;--gold-d:#8A6A25;--red:#B5362F;--teal:#5FC4B8;
  --tx:#ECE8F0;--mu:#B9B3C9;--line:#1A2245;
  --serif:'Shippori Mincho','Noto Serif TC',serif;--it:'Cormorant Garamond','Shippori Mincho',serif;
  --sans:'Zen Kaku Gothic New','Noto Sans TC',sans-serif;
  --eye:radial-gradient(circle,#040B1C 0 5%,#B5362F 5% 13%,#D9B25F 13% 15%,transparent 15%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#02060F;color:var(--tx);font-family:var(--sans);line-height:1.7}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a{color:var(--gold)}
:focus-visible{outline:2px dashed #fff;outline-offset:3px}

/* 左右の金の縁取り（ギリシャ雷文を縞で表現） */
.frame{max-width:1308px;margin:0 auto;padding:0 14px;background:repeating-linear-gradient(0deg,#8A6A25 0 6px,#2B2208 6px 12px)}
.inner{min-height:100vh;background:var(--bg);padding:32px 56px 64px}

/* ヘッダー */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:16px}
.logo{margin:0;font-family:var(--it);font-style:italic;font-weight:600;font-size:48px;line-height:1}
.logo-mirror{font-family:var(--it);font-style:italic;font-weight:600;font-size:48px;line-height:.6;height:24px;overflow:hidden;transform:scaleY(-1);opacity:.18;user-select:none}
.top-r{display:flex;align-items:center;gap:24px}
.date{font-family:var(--serif);color:var(--gold);letter-spacing:.2em}
.wave{display:block;margin-bottom:24px}

/* セグメント（言語・カテゴリ） */
.seg{display:flex;border:1px solid var(--gold-d);border-radius:22px;overflow:hidden}
.seg a,.seg button{display:block;padding:10px 18px;min-height:44px;font:inherit;font-size:14px;color:var(--mu);background:transparent;border:0;text-decoration:none;cursor:pointer}
.seg [aria-current="true"],.seg [aria-checked="true"]{background:var(--gold);color:var(--bg);font-weight:700}

/* 選曲 */
.layout{display:flex;gap:48px;align-items:flex-start}
.layout main{flex:1;min-width:0}
.sub{margin:0 0 16px;color:var(--mu)}
.controls{display:flex;gap:16px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.search{flex:1;min-width:200px}
input[type=search],input[type=text],input[type=password],input:not([type]),select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--tx);background:var(--panel);border:1px solid var(--gold-d);border-radius:24px;padding:0 22px;height:46px}
textarea{border-radius:10px;padding:14px 16px;height:auto;line-height:1.7}
select{border-radius:23px;width:auto}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
.empty{grid-column:1/-1;color:var(--mu)}
.c{position:relative;display:block;cursor:pointer}
.c input{position:absolute;opacity:0}
.t{display:block;aspect-ratio:1;background:var(--eye),var(--card);border:1px solid #6B5524}
.c input:checked~.t{outline:2px solid var(--gold);outline-offset:3px}
.c input:focus-visible~.t{outline:2px dashed #fff;outline-offset:3px}
.c:nth-child(odd){transform:rotate(-1.2deg)}
.c:nth-child(even){transform:rotate(1.2deg)}
.n{display:none;position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:14px;background:var(--red);color:#fff;font-weight:700;font-size:14px;align-items:center;justify-content:center}
.c input:checked~.n{display:flex}
.c b{display:block;margin-top:10px;font-size:14px;line-height:1.4}
.c i{font-style:normal;font-size:12px;color:var(--gold);letter-spacing:.1em}
.c i.u{color:var(--teal)}

/* 選んだ曲 */
.tray{width:330px;flex:none;position:sticky;top:20px;background:var(--panel);border:1px solid var(--gold-d);border-radius:165px 165px 8px 8px;padding:56px 28px 28px;display:flex;flex-direction:column;gap:16px}
.tray-h{text-align:center}
.tray-h h2{margin:0;font-family:var(--serif);font-size:20px;letter-spacing:.2em}
.count{color:var(--gold);font-weight:700}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sl{aspect-ratio:1;border:1px dashed var(--gold-d);display:flex;align-items:center;justify-content:center;color:#A39BB8;font-size:13px;background:transparent;padding:0;font-family:inherit}
.sl.f{border:1px solid var(--gold);background-color:var(--card);cursor:pointer;align-items:flex-start;justify-content:flex-start}
.sl.f span{background:var(--red);color:#fff;font-weight:700;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px}
.hint{margin:0;font-size:13px;color:var(--mu);line-height:1.7}
.hint.tip{font-size:12px}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:26px;border:1px solid var(--gold-d);background:transparent;color:var(--tx);font:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none}
.btn.p{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.btn:disabled{background:#1A2245;border-color:#6B5524;color:#C9C3D6;cursor:not-allowed}
.btn.danger{color:#FFB4A8;border-color:#FFB4A8}
.link{background:none;border:0;color:var(--mu);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;min-height:44px}

/* 結果画面 */
.rt{font-family:var(--serif);font-size:32px;letter-spacing:.2em;margin:0 0 24px}
.result-in{display:flex;gap:56px;align-items:flex-start}
.poster{display:block;width:100%;max-width:540px;height:auto;border:1px solid var(--gold-d)}
.form{flex:1;max-width:520px;display:flex;flex-direction:column;gap:14px}
.form label{font-size:14px;color:var(--mu)}
.cnt{font-size:13px;color:var(--mu);text-align:right}
.cnt.over{color:#FFB4A8;font-weight:700}
.msg{min-height:1.7em;margin:0;font-size:14px;color:var(--gold)}

/* 共有ページ */
.share{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.titles{margin:0;padding-left:1.6em;text-align:left;color:var(--tx)}

/* 管理画面 */
.admin-body{background:var(--bg)}
.adm{max-width:1280px;margin:0 auto;padding:28px 48px 64px;display:flex;flex-direction:column;gap:20px}
.adm-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.adm-h{display:inline;margin:0 16px 0 0;font-family:var(--serif);font-size:26px;letter-spacing:.15em}
.adm-top-r{display:flex;align-items:center;gap:16px}
.mu{color:var(--mu);font-size:13px}.small{font-size:12px}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.card{background:var(--panel);border:1px solid #2B2208;padding:20px}
.card.narrow{max-width:360px;display:flex;flex-direction:column;gap:14px;border-color:var(--gold-d)}
.adm-cols{display:flex;gap:32px;align-items:flex-start}
.tablewrap{flex:1;min-width:0;overflow-x:auto;padding:8px 16px}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-weight:400;color:var(--mu);font-size:12px;padding:10px 12px;border-bottom:1px solid var(--gold-d);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.on{background:#111B3C}
.th{display:block;width:44px;height:44px;background:var(--eye),var(--card);border:1px solid #6B5524}
.th.big{width:72px;height:72px;flex:none}
.tg{font-size:12px;color:var(--gold)}.tg.u{color:var(--teal)}
.editor{width:340px;flex:none;border-color:var(--gold-d);display:flex;flex-direction:column;gap:12px}
.editor h2,.import h2{margin:0;font-family:var(--serif);font-size:18px}
.editor form,.import form{display:flex;flex-direction:column;gap:12px}
.adm label{font-size:12px;color:var(--mu)}
.adm input:not([type=checkbox]):not([type=radio]):not([type=file]),.adm select{border-radius:6px;height:42px;font-size:15px}
.adm select{width:100%}
.toolbar select{width:auto;border-radius:20px}
.imgrow{display:flex;gap:12px;align-items:center}
.chk{display:flex;gap:10px;align-items:center;color:var(--tx)!important;font-size:14px!important}
.chk input{width:20px;height:20px}
fieldset{border:1px solid var(--gold-d);margin:0;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
legend{color:var(--mu);font-size:12px;padding:0 6px}
.row{display:flex;gap:10px}
.import{border-color:var(--gold-d)}
.flash{margin:0;padding:12px 16px;border:1px solid var(--gold);background:#111B3C;color:var(--tx)}
.flash.err{border-color:#FFB4A8}
code{background:var(--card);padding:1px 6px;border-radius:4px}

/* スマホ */
@media (max-width:860px){
  .frame{padding:0 8px}
  .inner{padding:20px 16px 220px}
  .logo,.logo-mirror{font-size:36px}.logo-mirror{height:18px}
  .top-r{gap:12px}
  .grid{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  .layout{flex-direction:column;gap:0}
  .tray{position:fixed;left:0;right:0;bottom:0;width:auto;top:auto;z-index:5;border-radius:20px 20px 0 0;padding:12px 16px 18px;gap:8px}
  .tray-h{display:flex;justify-content:space-between;align-items:center}
  .tray-h h2{font-size:15px;letter-spacing:.1em}
  .slots{grid-template-columns:repeat(9,1fr);gap:4px}
  .sl{font-size:11px}.sl.f span{width:16px;height:16px;font-size:10px}
  .hint{font-size:12px}.hint.tip{display:none}
  .result-in{flex-direction:column;gap:24px}
  .form{max-width:none;width:100%}
  .adm{padding:20px 16px 48px}
  .adm-cols{flex-direction:column}
  .editor{width:100%;order:-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}