/* 教程视频合集页（public/guide.html）。
壳和下载页同一套：tokens.css 给色和字，home.css 给页眉和品牌锁版。
## 布局照搬挑人墙（styles.css 的 .character-pick-*）
同一个产品里不该有两套「一排卡片让你挑一个」的样子。所以标题、标签栏、
卡片网格、卡片里「图在上、名字和一句话在下」的分块，全部按那边的尺寸和
间距复制过来，只换两处：
- **图是 16:9 不是 3:4。** 那边是立绘，竖的；这边是录屏，横的。
所以每列更宽（260 起，那边 180），一排少站两个。
- **还没做的那几集**套用那边「未体验」的处理：名字压淡、说明那一块沉到
纸下一档，右下角那枚朱印换成一个「还在做」的小标。是同一句话的两种说法。
app 里那套别名（--panel/--line/--accent/--text/--muted）定义在 styles.css，
这一页不载它——直接用 tokens.css 的原名，两边是 1:1 的（styles.css:16-21）。 */
/* 双语显隐。只用属性选择器，**不要用 :lang()**：中文下 ，
:lang(zh) 会命中每一个继承了语言的容器，整块内容 display:none，只剩页眉。
规则也**只限定在内容区里**——页眉的品牌「あのね」和语言开关的 JP 按钮
自己带 lang="ja"，挂到整页会把它们一起抹掉（login.html 那段注释写过）。
灯箱 .gd-box 是 的兄弟不在内容区里，得单列一份，否则「閉じる」
和「关闭」会一起印在按钮上。 */
.gd-main [lang="zh"], .gd-main [lang="en"],
.gd-box [lang="zh"], .gd-box [lang="en"] { display: none; }
:root[data-lang="zh"] .gd-main [lang="ja"], :root[data-lang="zh"] .gd-main [lang="en"],
:root[data-lang="zh"] .gd-box [lang="ja"], :root[data-lang="zh"] .gd-box [lang="en"] { display: none; }
:root[data-lang="zh"] .gd-main [lang="zh"],
:root[data-lang="zh"] .gd-box [lang="zh"] { display: revert; }
:root[data-lang="en"] .gd-main [lang="ja"], :root[data-lang="en"] .gd-main [lang="zh"],
:root[data-lang="en"] .gd-box [lang="ja"], :root[data-lang="en"] .gd-box [lang="zh"] { display: none; }
:root[data-lang="en"] .gd-main [lang="en"],
:root[data-lang="en"] .gd-box [lang="en"] { display: revert; }
.gd-main {
width: min(960px, 100%);
margin: 0 auto;
padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.1rem, 4vw, 2rem) 4rem;
}
/* 标题的字号、字重、字距都取自 .character-pick-header h2。 */
.gd-title {
margin: 0 0 6px;
font-family: var(--mincho);
font-weight: 500;
font-size: 1.35rem;
letter-spacing: 0.08em;
color: var(--ink);
}
.gd-lead {
margin: 0 0 22px;
font-size: 0.8rem;
line-height: 1.75;
color: var(--ink-3);
max-width: 42em;
}
/* 标签栏：.character-pick-tabs 原样。选中那栏底下压一道朱线，
往下顶 1px 盖住整排下面那条淡线，不顶的话朱线看着短一截。 */
.gd-tabs {
display: flex;
align-items: stretch;
gap: 4px;
margin: 0 0 16px;
border-bottom: 1px solid var(--rule);
overflow-x: auto;
}
.gd-tab {
display: flex;
align-items: baseline;
gap: 6px;
padding: 8px 12px 9px;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: none;
font: inherit;
font-family: var(--mincho);
font-size: 1rem;
letter-spacing: 0.08em;
color: var(--ink-3);
cursor: pointer;
white-space: nowrap;
}
.gd-tab:hover { color: var(--ink); }
.gd-tab:focus-visible { outline: 2px solid var(--shu); outline-offset: -2px; }
.gd-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--shu); }
.gd-tab-count {
font-family: var(--gothic);
font-size: 0.76rem;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.gd-tab[aria-selected="true"] .gd-tab-count { color: var(--shu); }
/* 网格：.character-pick-grid 的 gap 原样，列宽从 180 放到 260——
横片比竖立绘要宽才看得清里面在点什么。 */
.gd-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.gd-grid[hidden] { display: none; }
/* 一张卡就是一集：封面在上，名字和一句话在下。整张都能点。 */
.gd-card {
display: flex;
flex-direction: column;
padding: 0;
text-align: left;
font: inherit;
color: inherit;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
width: 100%;
}
.gd-card:hover,
.gd-card:focus-visible { border-color: var(--shu); outline: none; }
.gd-thumb {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--paper-3) center / cover no-repeat;
}
/* 压一层很淡的暗角：白底封面上的白圆圈不压住就浮不起来。 */
.gd-thumb::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10, 8, 6, 0.26), transparent 55%);
}
.gd-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background: rgba(255, 253, 248, 0.92);
display: grid;
place-items: center;
}
.gd-play::before {
content: "";
border-left: 0.7rem solid var(--shu);
border-top: 0.44rem solid transparent;
border-bottom: 0.44rem solid transparent;
margin-left: 0.16rem;
}
/* .character-pick-meta 原样：flex:1 让同一排的卡片底边对齐，
一行说明的卡片不会在底下露出一条自己的白底。 */
.gd-meta {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px 14px;
flex: 1;
}
.gd-name {
font-family: var(--mincho);
font-weight: 500;
font-size: 0.98rem;
letter-spacing: 0.05em;
}
.gd-why {
font-size: 0.74rem;
line-height: 1.55;
color: var(--ink-3);
}
.gd-len {
margin-top: auto;
padding-top: 6px;
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* 还没做的那几集：和挑人墙上「未体验」同一套处理——说明那一块沉到纸下一档、
名字压淡。那边右下角盖一枚朱印，这边盖一个小标，说的是同一件事。 */
.gd-card[data-state="soon"] { cursor: default; }
.gd-card[data-state="soon"] .gd-meta { background: var(--paper-3); }
.gd-card[data-state="soon"] .gd-name { color: var(--ink-3); }
.gd-card[data-state="soon"] .gd-thumb { background: var(--paper-3); }
.gd-card[data-state="soon"] .gd-thumb::before { display: none; }
.gd-card[data-state="soon"]:hover { border-color: var(--rule); }
.gd-soon-tag {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 0.66rem;
letter-spacing: 0.1em;
color: var(--ink-3);
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 2px;
padding: 1px 6px;
}
/* 空的一栏。照 .character-pick-empty 的意思：不留白，把话说出来。 */
.gd-empty {
padding: 28px 4px;
font-size: 0.8rem;
color: var(--ink-3);
line-height: 1.8;
}
.gd-empty[hidden] { display: none; }
/* 灯箱。点一张卡在整版上打开，不在卡片里就地展开——16:9 的片子塞进
网格里一格只有两百多像素宽，字幕根本看不清。 */
.gd-box {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(10, 8, 6, 0.78);
}
.gd-box[hidden] { display: none; }
.gd-box-inner { width: min(1100px, 100%); display: grid; gap: 10px; }
.gd-box video {
width: 100%;
aspect-ratio: 16 / 9;
display: block;
background: #131210;
border-radius: var(--radius-sm, 4px);
}
/* 这一条 bar 压在灯箱那块 rgba(10,8,6,.78) 的幕布上，幕布不跟主题走——
两种主题下它都是黑的。所以字色不能用 --paper-2：暗色主题里 tokens.css
会把它翻成 #1c1a17，标题和「閉じる」当场沉进幕布里看不见。这里钉死浅色。 */
.gd-box-bar { display: flex; align-items: baseline; gap: 10px; color: #fffdf8; }
.gd-box-title { font-family: var(--mincho); font-size: 1rem; letter-spacing: 0.06em; }
.gd-box-sub { font-size: 0.74rem; opacity: 0.7; }
.gd-box-close {
margin-left: auto;
background: none;
border: 1px solid rgba(255, 253, 248, 0.4);
border-radius: 2px;
color: #fffdf8;
font: inherit;
font-size: 0.76rem;
letter-spacing: 0.08em;
padding: 3px 10px;
cursor: pointer;
}
.gd-box-close:hover { border-color: #fffdf8; background: rgba(255, 253, 248, 0.1); }
.gd-foot {
margin-top: 2.4rem;
padding-top: 1rem;
border-top: 1px solid var(--rule);
font-size: 0.76rem;
color: var(--ink-3);
line-height: 1.9;
display: grid;
gap: 0.3rem;
}
.gd-foot a { color: var(--shu); }
/* 手机端：一排一张。挑人墙那边一页 2×2，横片再挤成两列就看不清了。 */
@media (max-width: 640px) {
.gd-grid { grid-template-columns: 1fr; }
}