/* 共用樣式：色彩、按鈕、標籤、表單元件（手機優先） */
:root {
    color-scheme: dark;
    --primary: #6b93ff;
    --on-primary: #0b1020; /* 主色底上的字（深色模式主色比較亮，字用深色） */
    --bg: #0e1014;
    --surface: #14171d;
    --card-bg: #171a20;
    --raised: #1e222a;
    --border: #2a2f38;
    --border-strong: #454c58;
    --input-border: #353b46;
    --text: #eef0f4;
    --text-strong: #fff;
    --text-sub: #b4bac5;
    --text-muted: #7f8795;
    --text-kr: #8f98a8;
    --text-faint: #525966;
    --star: #f5c542;
    --star-empty: #3a3f4a;
    --danger: #f0604f;
    --chip-border: #3a404b;
    --chip-text: #9aa1ad;
    --tag-bg: rgba(0, 0, 0, 0.35);
    --pill-bg: rgba(255, 255, 255, 0.07);
    --link: #7ea2ff;
    --link-soft-bg: rgba(107, 147, 255, 0.14);
    --link-soft-text: #a9c0ff;
    --ep-bg: rgba(107, 147, 255, 0.16);
    --ep-text: #9db8ff;
    /* 未讀：整個網站只有未讀用亮橘色 */
    --backlog-bg: rgba(255, 145, 71, 0.15);
    --backlog-text: #ff9147;
    --note-text: #c9b27a;
    --flag-text: #e6b450;
    --due-text: #b9a6ef;
    --bar-bg: rgba(20, 23, 29, 0.97);
    --toolbar-bg: rgba(14, 16, 20, 0.94);
    /* 字：標誌字（웹툰、星期、封面大字）、窄體數字（話數、統計）從 Google 字型載入（檔案小）；
       中文、韓文內文用手機內建字型（中文、韓文網路字型很大，第一次打開會卡） */
    --f-mark: "Black Han Sans", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    --f-num: "Big Shoulders Display", "Arial Narrow", "PingFang TC", sans-serif;
    --f-kr: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    --f-body: "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
    /* 狀態色：同時用於徽章與圖表，已驗證在深色與淺色背景上彼此可區分（含色盲） */
    --status-ongoing: #219a52;
    --status-completed: #2d7dd2;
    --status-finished: #5d6b7e;
    --status-paused: #8a70c8;
    --status-dropped: #c8641a;
    --status-wishlist: #c2548f;
    /* 話數分區（標籤上也有寫數字）；超過 100 話用灰藍：橘色只留給未讀，土黃也太像橘色 */
    --ep-b1: #8a70c8;
    --ep-b2: #1f9e89;
    --ep-b3: #2d7dd2;
    --ep-b4: #7489ad;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 淺色模式：設定可選「跟隨手機／淺色／深色」，選擇存在 <html data-theme> */
:root[data-theme="light"] {
    color-scheme: light;
    --primary: #2f5fe0;
    --on-primary: #fff;
    --bg: #eceef1;
    --surface: #ffffff;
    --card-bg: #ffffff;
    --raised: #f1f2f5;
    --border: #dfe2e7;
    --border-strong: #b8bec8;
    --input-border: #cfd4dc;
    --text: #16181d;
    --text-strong: #0b0d11;
    --text-sub: #4b515c;
    --text-muted: #737b89;
    --text-kr: #667085;
    --text-faint: #9aa1ad;
    --star: #e8a70c;
    --star-empty: #d5d9e0;
    --danger: #c9302c;
    --chip-border: #cfd4dc;
    --chip-text: #5c6472;
    --tag-bg: rgba(0, 0, 0, 0.03);
    --pill-bg: rgba(0, 0, 0, 0.05);
    --link: #2f5fe0;
    --link-soft-bg: rgba(47, 95, 224, 0.1);
    --link-soft-text: #2448b8;
    --ep-bg: rgba(47, 95, 224, 0.1);
    --ep-text: #2448b8;
    --backlog-bg: rgba(226, 101, 28, 0.12);
    --backlog-text: #c2560f;
    --note-text: #8a6d1f;
    --flag-text: #a36d00;
    --due-text: #6a4fb0;
    --bar-bg: rgba(255, 255, 255, 0.97);
    --toolbar-bg: rgba(236, 238, 241, 0.94);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --primary: #2f5fe0;
        --on-primary: #fff;
        --bg: #eceef1;
        --surface: #ffffff;
        --card-bg: #ffffff;
        --raised: #f1f2f5;
        --border: #dfe2e7;
        --border-strong: #b8bec8;
        --input-border: #cfd4dc;
        --text: #16181d;
        --text-strong: #0b0d11;
        --text-sub: #4b515c;
        --text-muted: #737b89;
        --text-kr: #667085;
        --text-faint: #9aa1ad;
        --star: #e8a70c;
        --star-empty: #d5d9e0;
        --danger: #c9302c;
        --chip-border: #cfd4dc;
        --chip-text: #5c6472;
        --tag-bg: rgba(0, 0, 0, 0.03);
        --pill-bg: rgba(0, 0, 0, 0.05);
        --link: #2f5fe0;
        --link-soft-bg: rgba(47, 95, 224, 0.1);
        --link-soft-text: #2448b8;
        --ep-bg: rgba(47, 95, 224, 0.1);
        --ep-text: #2448b8;
        --backlog-bg: rgba(226, 101, 28, 0.12);
        --backlog-text: #c2560f;
        --note-text: #8a6d1f;
        --flag-text: #a36d00;
        --due-text: #6a4fb0;
        --bar-bg: rgba(255, 255, 255, 0.97);
        --toolbar-bg: rgba(236, 238, 241, 0.94);
    }
}
/* 淺色背景上，黃色等淺的平台色直接當文字看不清楚，改用加深的版本 */
:root[data-theme="light"] .tag, :root[data-theme="light"] .chip.selected { --tag-text: color-mix(in srgb, var(--tag-color, var(--opt-color)) 58%, black); --opt-text: color-mix(in srgb, var(--opt-color) 58%, black); }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .tag, :root:not([data-theme="dark"]) .chip.selected { --tag-text: color-mix(in srgb, var(--tag-color, var(--opt-color)) 58%, black); --opt-text: color-mix(in srgb, var(--opt-color) 58%, black); }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--f-body);
    background: var(--bg); color: var(--text);
    margin: 0; line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; }

/* 按鈕 */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 16px; border: none; border-radius: 10px;
    font-size: 0.95rem; font-weight: bold; cursor: pointer; color: var(--text); background: var(--raised);
    text-decoration: none;
}
.btn:active { opacity: 0.8; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-danger { background: #c0392b; color: #fff; }
.btn-ghost { background: transparent; color: var(--text-sub); }
.icon-btn {
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: transparent; color: var(--text); font-size: 1.4rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-btn:active { background: var(--raised); }

/* 狀態徽章與平台標籤 */
/* 狀態標籤：淡底色＋同色字（深色模式字調亮、淺色模式字調暗才讀得清楚）；封面上的用實心（.wall-status） */
.status-ongoing { --sc: var(--status-ongoing); }
.status-completed { --sc: var(--status-completed); }
.status-finished { --sc: var(--status-finished); }
.status-paused { --sc: var(--status-paused); }
.status-dropped { --sc: var(--status-dropped); }
.status-wishlist { --sc: var(--status-wishlist); }
.status-badge {
    display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 0.75rem; font-weight: bold; white-space: nowrap; line-height: 1.55;
    background: color-mix(in srgb, var(--sc, var(--status-ongoing)) 20%, transparent); color: color-mix(in srgb, var(--sc, var(--status-ongoing)) 62%, white);
}
:root[data-theme="light"] .status-badge { background: color-mix(in srgb, var(--sc, var(--status-ongoing)) 13%, transparent); color: color-mix(in srgb, var(--sc, var(--status-ongoing)) 80%, black); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .status-badge { background: color-mix(in srgb, var(--sc, var(--status-ongoing)) 13%, transparent); color: color-mix(in srgb, var(--sc, var(--status-ongoing)) 80%, black); } }

/* 線條圖示（common.js 的 svgIcon）：跟著文字大小和顏色 */
.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; }
.num { font-family: var(--f-num); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.tag {
    display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 0.68rem; font-weight: bold; line-height: 1.6;
    background: var(--tag-bg); border: 1px solid var(--tag-color, #ccc); color: var(--tag-text, var(--tag-color, #ccc));
}
/* 台版平台：虛線框（前面的「台·」在 PLATFORM_CONFIG.tag） */
.tag.tag-tw { border-style: dashed; }

/* 表單 */
.form-section { margin-bottom: 20px; }
.form-label { display: block; font-weight: bold; margin-bottom: 8px; color: var(--text-sub); font-size: 0.88rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.input {
    width: 100%; min-height: 44px; padding: 10px 12px;
    background: var(--bg); border: 1px solid var(--input-border); border-radius: 10px;
    color: var(--text); font-family: inherit;
    font-size: 16px; /* 16px 以上 iOS 才不會自動放大 */
}
.input:focus { outline: none; border-color: var(--primary); }
textarea.input { resize: vertical; line-height: 1.6; }
input[type="date"].input { -webkit-appearance: none; appearance: none; }

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    min-height: 40px; padding: 0 14px; border-radius: 20px; border: 2px solid var(--chip-border);
    background: var(--raised); color: var(--chip-text); font-size: 0.9rem; font-weight: bold; cursor: pointer;
}
.chip.selected {
    border-color: var(--opt-color, var(--primary)); color: var(--opt-text, var(--opt-color, var(--text-strong)));
    background: transparent; box-shadow: 0 0 8px var(--opt-color, var(--primary));
}
.chip-day { min-width: 44px; padding: 0; }

/* 發行平台：韓國、台灣兩區 */
.platform-region { font-size: 0.72rem; color: var(--text-muted); margin: 10px 0 6px; font-weight: bold; }
.platform-region:first-of-type { margin-top: 0; }
/* 我看的平台沒勾的那一區收起來，按「＋ 韓國平台」打開 */
.region-more:empty { display: none; }
.region-more { display: flex; gap: 14px; margin-top: 8px; }
.region-more button { background: none; border: none; padding: 4px 0; color: var(--primary); font-size: 0.8rem; font-weight: bold; cursor: pointer; }
.chip.chip-tw { border-style: dashed; }
.chip.chip-tw.selected { border-style: dashed; }
.link-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.link-field { display: flex; align-items: center; gap: 8px; }
.link-field .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.link-field .input { min-height: 40px; padding: 8px 12px; }
.link-fields:not(:has(.link-field:not([hidden]))) { display: none; }
/* 可點的平台標籤：外觀跟一般標籤一樣小，點擊範圍往外放大一點 */
/* 平台標籤（作品清單、本週）：灰底＋平台顏色小圓點，台版加虛線框 */
.ptag {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 10px;
    background: var(--pill-bg); color: var(--text-sub); font-size: 0.72rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.ptag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tag-color); flex-shrink: 0; }
.ptag.ptag-tw { outline: 1px dashed var(--tag-color); outline-offset: -1px; }
a.tag-link { text-decoration: none; position: relative; }
a.tag-link::after { content: ''; position: absolute; inset: -6px -3px; }
a.tag-link:active { background: var(--raised); }
.tag-icon { font-size: 0.85em; margin-left: 2px; opacity: 0.8; }

.episode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; }
.episode-grid .episode-label { font-size: 0.78rem; margin-bottom: 4px; font-weight: normal; }
.episode-grid .input { text-align: center; }

.star-input { display: flex; gap: 4px; align-items: center; }
.star-input .star {
    position: relative; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 34px; line-height: 1; color: var(--star-empty);
}
.star-input .star.on { color: var(--star); }
.star-input .star button { position: absolute; top: 0; bottom: 0; width: 50%; border: none; background: transparent; cursor: pointer; padding: 0; }
.star-input .star .half-left { left: 0; }
.star-input .star .half-right { right: 0; }
.rating-number { margin-left: 8px; color: var(--text-sub); font-weight: bold; font-variant-numeric: tabular-nums; }

/* 半顆星：左半邊上色 */
.star-input .star.half, .stars-display .half {
    background: linear-gradient(90deg, var(--star) 50%, var(--star-empty) 50%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stars-display { white-space: nowrap; }
.stars-display span { color: var(--star-empty); }
.stars-display .on { color: var(--star); }
.form-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }

/* 心得、筆記裡 @ 其他作品：存檔後只用字的顏色區分（沒有 @、沒有底色），可以點；作品刪掉後是灰色 */
.mention {
    display: inline; border: none; background: none; color: var(--link); font: inherit;
    padding: 0; margin: 0; cursor: pointer; line-height: inherit; text-align: inherit;
}
.mention.gone { color: var(--text-faint); cursor: default; }
/* 打「@」後在輸入框下面出現的作品清單 */
.mention-suggest { margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); overflow: hidden; }
.mention-suggest .mention-hint { font-size: 0.72rem; color: var(--text-muted); padding: 6px 12px 2px; }
.mention-suggest button {
    display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 42px; padding: 8px 12px; border: none;
    border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
}
.mention-suggest button:first-of-type { border-top: none; }
.mention-suggest button:active { background: var(--raised); }
.mention-suggest small { font-size: 0.75rem; color: var(--text-kr); }

/* 封面 */
.cover { flex-shrink: 0; object-fit: cover; border-radius: 6px; background: var(--raised); display: block; }
.cover-placeholder {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 0 0.06em 0.11em; /* 用 em：百分比會以外層寬度計算 */
    background: linear-gradient(160deg, var(--c1, #1e222a), var(--c2, #454c58)); color: rgba(255, 255, 255, 0.94);
    font-family: var(--f-mark); font-weight: 400; line-height: 0.9;
}
/* 網點：右上角最濃，往左下淡掉 */
.cover-placeholder::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1.35px); background-size: 5px 5px;
    -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%); mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
}
.cover-placeholder::after {
    content: attr(data-t); display: none; position: absolute; left: 8%; right: 8%; top: 7%;
    font-family: var(--f-kr); font-size: 8px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; opacity: 0.85;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 大字跟著封面大小；中型以上才寫小字標題 */
.cover-xs.cover-placeholder { font-size: 22px; }
.cover-sm.cover-placeholder { font-size: 26px; }
.cover-md.cover-placeholder { font-size: 50px; }
.cover-lg.cover-placeholder { font-size: 76px; }
.cover-md.cover-placeholder::after, .cover-lg.cover-placeholder::after, .cover-fill.cover-placeholder::after { display: block; }
.cover-lg.cover-placeholder::after { font-size: 10px; }
.cover-xs { width: 36px; height: 48px; border-radius: 5px; }
.cover-sm { width: 42px; height: 56px; border-radius: 6px; }
.cover-md { width: 68px; height: 92px; border-radius: 8px; }
.cover-lg { width: 104px; height: 140px; border-radius: 10px; }
/* 表單上方：封面在左（下面換封面、移除），作品名稱、韓文標題疊在右邊 */
.cover-title { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.cover-edit { display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: 104px; }
.cover-actions { display: flex; flex-direction: column; gap: 4px; }
.cover-actions .btn { min-height: 34px; padding: 0 8px; font-size: 0.8rem; }
.title-fields { display: grid; gap: 12px; min-width: 0; }

.team-details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.team-details summary {
    list-style: none; cursor: pointer; padding: 14px 16px; min-height: 48px;
    font-weight: bold; color: var(--text-sub); font-size: 0.9rem;
    display: flex; justify-content: space-between; align-items: center;
}
.team-details summary::-webkit-details-marker { display: none; }
.team-details summary::after { content: '▾'; transition: transform 0.2s; }
.team-details[open] summary::after { transform: rotate(180deg); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; padding: 0 16px 16px; }
.team-grid .form-label { font-size: 0.8rem; margin-bottom: 4px; }

@media (min-width: 640px) {
    .team-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 從平台自動填入 */
/* 從平台自動填入：大部分作品從這裡開始，放最上面、淡藍底 */
.form-section.autofill { background: var(--link-soft-bg); border-radius: 14px; padding: 10px; }
.autofill-btn { width: 100%; background: var(--card-bg); color: var(--link); }
/* 閱讀狀態選項：前面一顆狀態顏色的圓點；連載日用韓文字體（小字用標誌字會糊） */
.chip-status::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--opt-color); margin-right: 6px; vertical-align: 0.1em; }
.chip-day { font-family: var(--f-kr); }
.autofill-panel { margin-top: 10px; display: grid; gap: 10px; }
.autofill-status { font-size: 0.85rem; color: var(--text-sub); white-space: pre-line; }
.autofill-status:empty { display: none; }
.autofill-status.ok { color: var(--text); }
.autofill-status.bad { color: var(--danger, #e5484d); }
.autofill-results { display: grid; gap: 6px; }
.autofill-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font: inherit; cursor: pointer; }
.autofill-result:active { background: var(--border); }
.autofill-result-title { font-weight: bold; }
.autofill-result-tag { font-size: 0.75rem; color: var(--primary); }
.autofill-result-sub { flex-basis: 100%; font-size: 0.8rem; color: var(--text-sub); }
.autofill-diff { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); }
.autofill-diff-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 0.85rem; color: var(--text-sub); overflow-wrap: anywhere; }
.autofill-diff-label { font-weight: bold; color: var(--text); }
.autofill-diff-btn { flex-shrink: 0; min-height: 36px; padding: 0 12px; font-size: 0.85rem; }

/* 伺服器連線狀態小標籤（點一下重新連線） */
/* 綠：已連線；橘黃閃爍：喚醒中；紅：連不上（點了重試）；藍：背景更新中 */
.server-pill {
    display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-body); font-size: 0.68rem; font-weight: bold; letter-spacing: 0;
    height: 22px; padding: 0 9px; margin-left: 10px; border: none; border-radius: 999px; white-space: nowrap; vertical-align: middle; cursor: pointer;
    --sv: var(--text-muted); color: var(--sv); background: color-mix(in srgb, var(--sv) 14%, transparent);
}
.server-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sv); flex-shrink: 0; }
.server-pill.ok { --sv: var(--status-ongoing); }
.server-pill.wake { --sv: var(--star); }
.server-pill.bad { --sv: var(--danger); }
.server-pill.busy { --sv: var(--primary); }
@media (prefers-reduced-motion: no-preference) {
    .server-pill.wake::before, .server-pill.busy::before { animation: pill-blink 1.2s ease-in-out infinite; }
    @keyframes pill-blink { 50% { opacity: 0.25; } }
}

/* 底部分頁列（主頁、平台留言頁共用） */
.tab-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; background: var(--bar-bg); border-top: 1px solid var(--border);
    padding-bottom: var(--safe-bottom);
}
.tab-bar button {
    flex: 1; height: 56px; border: none; background: none; color: var(--text-muted); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.72rem;
}
.tab-bar button .tab-icon { width: 23px; height: 23px; }
.tab-bar button.active { color: var(--text-strong); font-weight: bold; }
.tab-bar button.active .tab-icon { color: var(--primary); }
.autofill-assign { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); }
.autofill-assign-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.autofill-assign-name { flex-basis: 100%; font-size: 0.9rem; }
.autofill-assign-row .chip { min-height: 32px; padding: 0 12px; font-size: 0.82rem; }