/* ==============================
   Live2D Param 使用说明页专属样式（live2d-guide.html）
   —— 左边一层叠一层的文档目录，右边正文

   ⚠️ 左侧目录刻意用 <aside> 而不是 <nav>：
      style.css 里有一条**裸元素选择器** `nav { height:44px; padding:0 20px; border-bottom:… }`，
      它会漏到页面上所有 <nav>（踩坑记录 #09）。用 aside 就完全躲开这条规则。

   样式只管本页，顶栏 / 底栏沿用 live2d.css 的 .lp-* 一套。
   ============================== */

/* 页内锚点跳转平滑一点（只有本页加载了这个文件） */
html {
    scroll-behavior: smooth;
}

/* ---------- 两栏骨架 ---------- */

.gd-layout {
    /* body 是纵向 flex：正文要 flex:1，底栏才会贴在页面底部 */
    flex: 1;

    display: flex;
    align-items: flex-start;

    gap: 30px;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 26px 22px 70px;

    box-sizing: border-box;
}

/* ==============================
   左侧：目录
   ============================== */

.gd-side {
    /* flex: 0 0 …：目录不吃剩余宽度，正文 flex:1 长大（见踩坑 H03） */
    flex: 0 0 244px;

    position: sticky;
    top: 16px;

    max-height: calc(100vh - 32px);

    overflow-y: auto;

    padding: 2px 2px 10px;

    box-sizing: border-box;

    /* 目录自己滚，但滚动条藏起来（跟全站子页面一个风格） */
    scrollbar-width: none;
    -ms-overflow-style: none;

    user-select: none;
}

.gd-side::-webkit-scrollbar {
    display: none;
}

/* 目录顶部那行「文档目录」（手机端它是个开合按钮） */
.gd-side-toggle {
    display: none; /* 桌面端不需要按钮 */

    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin: 0 0 8px;
    padding: 11px 14px;

    box-sizing: border-box;

    border: 1px solid #ececec;
    border-radius: 10px;

    background-color: var(--surface-color);

    font-family: inherit;
    font-size: 14.5px;
    font-weight: bold;

    color: var(--text-color);

    cursor: pointer;
}

.gd-side-label {
    margin: 0 0 6px;
    padding: 0 12px;

    font-size: 12.5px;
    letter-spacing: 0.08em;

    color: #aaaaaa;
}

/* ---------- 分组（<details>，点标题折叠） ---------- */

.gd-group {
    margin: 0 0 2px;
}

.gd-group-title {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 8px 10px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: bold;

    color: #5a5a5a;

    cursor: pointer;

    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 去掉 <details> 自带的小三角，自己画一个（收起时朝右、展开时朝下） */
.gd-group-title::-webkit-details-marker {
    display: none;
}

.gd-group-title::before {
    content: "";

    flex-shrink: 0;

    width: 0;
    height: 0;

    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;

    transform: rotate(90deg);

    transition: transform 0.18s ease;
}

.gd-group:not([open]) > .gd-group-title::before {
    transform: rotate(0deg);
}

.gd-group-title:hover {
    background-color: rgba(102, 204, 255, 0.12);

    color: var(--main-color);
}

/* ---------- 二级条目（分组里的一层） ---------- */

.gd-list {
    list-style: none;

    /* 左边那条竖线 = 「一层叠一层」的那层壳 */
    margin: 2px 0 8px 14px;
    padding: 0 0 0 10px;

    border-left: 1px solid #ededed;
}

.gd-item {
    margin: 0;
}

/* ---------- 三级条目（再往里缩一层） ---------- */

.gd-sublist {
    list-style: none;

    margin: 1px 0 4px 9px;
    padding: 0 0 0 9px;

    border-left: 1px dashed #eaeaea;
}

/* ---------- 目录里的链接 ---------- */

.gd-link {
    display: block;

    margin: 1px 0;
    padding: 4px 9px;

    border-radius: 6px;

    font-size: 14px;
    line-height: 1.5;

    color: #555555;

    text-decoration: none;

    transition: background-color 0.18s ease, color 0.18s ease;
}

.gd-link:hover {
    background-color: rgba(102, 204, 255, 0.12);

    color: var(--main-color);
}

.gd-link.active {
    background-color: rgba(102, 204, 255, 0.18);

    color: var(--main-color);

    font-weight: bold;
}

.gd-sublink {
    padding: 3px 9px;

    font-size: 13px;

    color: #777777;
}

/* ---------- 二级条目的折叠按钮（带子目录的条目才有，按钮由 JS 生成） ---------- */

.gd-item.gd-has-sub {
    position: relative;
}

.gd-fold {
    position: absolute;
    left: 0;
    top: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    padding: 0;

    border: 0;

    background: none;

    color: #b8b8b8;

    cursor: pointer;
}

/* 收起时箭头朝右，展开时朝下（与分组标题同一种画法） */
.gd-fold::before {
    content: "";

    width: 0;
    height: 0;

    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;

    transform: rotate(90deg);

    transition: transform 0.18s ease;
}

.gd-item.gd-collapsed > .gd-fold::before {
    transform: rotate(0deg);
}

.gd-fold:hover {
    color: var(--main-color);
}

/* 给折叠按钮腾出位置 */
.gd-item.gd-has-sub > .gd-link {
    padding-left: 20px;
}

/* 收起时隐藏子目录 */
.gd-item.gd-collapsed > .gd-sublist {
    display: none;
}

/* ---------- 左上角圆形返回按钮（与个人中心那一枚同款） ---------- */

.gd-head-left {
    display: flex;
    align-items: center;

    gap: 12px;
}

.gd-back {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    text-decoration: none;

    font-size: 17px;
    line-height: 1;

    color: var(--main-color);

    background-color: #ffffff;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gd-back:hover {
    transform: translateX(-2px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

/* ==============================
   右侧：正文
   ============================== */

.gd-content {
    flex: 1;

    min-width: 0;
    max-width: 760px;
}

.gd-h1 {
    margin: 0 0 8px;

    font-size: 27px;

    color: var(--main-color);
}

.gd-hero-sub {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #888888;
}

.gd-sec {
    margin-bottom: 46px;
}

.gd-content h2 {
    margin: 0 0 14px;
    padding-bottom: 10px;

    border-bottom: 1px solid #f0f0f0;

    font-size: 21px;

    color: var(--main-color);

    scroll-margin-top: 16px;
}

.gd-content h3 {
    margin: 30px 0 10px;

    font-size: 17px;

    color: var(--text-color);

    scroll-margin-top: 16px;
}

.gd-content h4 {
    margin: 22px 0 8px;

    font-size: 15px;

    color: #666666;

    scroll-margin-top: 16px;
}

.gd-content p {
    margin: 0 0 10px;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-color);
}

.gd-content ul,
.gd-content ol {
    margin: 8px 0 12px;
    padding-left: 22px;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-color);
}

.gd-content li {
    margin-bottom: 6px;
}

.gd-content li > ul,
.gd-content li > ol {
    margin: 6px 0 2px;
}

.gd-content b {
    color: #222222;
}

/* 正文里的小灰字（补充说明） */
.gd-muted {
    font-size: 13.5px !important;

    color: #999999 !important;
}

/* ---------- 行内代码 / 代码块 ---------- */

.gd-content code {
    padding: 1px 5px;

    border-radius: 4px;

    background-color: #f5f6f7;

    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;

    color: #4a4a4a;
}

.gd-code {
    margin: 10px 0 14px;
    padding: 13px 15px;

    border: 1px solid #ececec;
    border-radius: 10px;

    background-color: #f8f9fa;

    overflow-x: auto;

    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.75;

    color: #4a4a4a;

    white-space: pre;
}

.gd-code code {
    padding: 0;

    background: none;

    font-size: 13px;

    color: inherit;
}

/* ---------- 键盘按键 ---------- */

.gd-key {
    display: inline-block;

    padding: 1px 6px;

    border: 1px solid #dcdcdc;
    border-bottom-width: 2px;
    border-radius: 5px;

    background-color: #fafafa;

    font-size: 13px;

    color: #444444;

    white-space: nowrap;
}

/* ---------- 提示条 ---------- */

.gd-tip,
.gd-warn {
    margin: 12px 0 16px;
    padding: 11px 14px;

    border-left: 3px solid var(--main-color);
    border-radius: 0 8px 8px 0;

    background-color: rgba(102, 204, 255, 0.08);

    font-size: 14px;
    line-height: 1.8;

    color: #4a4a4a;
}

.gd-warn {
    border-left-color: #ffb454;

    background-color: rgba(255, 180, 84, 0.1);
}

.gd-tip b,
.gd-warn b {
    color: #333333;
}

/* ---------- 带序号的操作步骤 ---------- */

.gd-steps {
    list-style: none;

    margin: 12px 0 14px;
    padding: 0;

    counter-reset: gd-step;
}

.gd-steps > li {
    position: relative;

    padding-left: 34px;

    margin-bottom: 14px;

    font-size: 15px;
    line-height: 1.85;

    color: var(--text-color);
}

.gd-steps > li::before {
    counter-increment: gd-step;

    content: counter(gd-step);

    position: absolute;
    left: 0;
    top: 3px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background-color: rgba(102, 204, 255, 0.18);

    font-size: 12.5px;
    font-weight: bold;

    color: #3d9fd0;
}

/* ---------- 表格（表格本身沿用小节里的 .lp-table） ---------- */

.gd-tablewrap {
    margin: 12px 0 16px;

    overflow-x: auto;
}

.gd-tablewrap .lp-table {
    margin: 0;

    min-width: 420px;

    font-size: 13.5px;
}

/* ---------- 常见问题（每条可展开/收起） ---------- */

.gd-faq-item {
    margin-bottom: 10px;

    border: 1px solid #eeeeee;
    border-radius: 10px;

    background-color: var(--surface-color);

    overflow: hidden;
}

.gd-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 11px 14px;

    cursor: pointer;

    font-size: 15px;
    font-weight: bold;

    color: var(--text-color);

    transition: background-color 0.2s ease;
}

.gd-faq-item > summary::-webkit-details-marker {
    display: none;
}

.gd-faq-item > summary::after {
    content: "＋";

    flex-shrink: 0;

    font-size: 14px;
    font-weight: normal;

    color: #aaaaaa;
}

.gd-faq-item[open] > summary::after {
    content: "－";
}

.gd-faq-item > summary:hover {
    background-color: rgba(102, 204, 255, 0.1);

    color: var(--main-color);
}

.gd-faq-body {
    padding: 2px 14px 12px;

    font-size: 14.5px;
    line-height: 1.85;

    color: #4a4a4a;
}

.gd-faq-body p {
    margin: 0 0 8px;

    font-size: 14.5px;
}

.gd-faq-body ul {
    margin: 6px 0 8px;
    padding-left: 20px;

    font-size: 14.5px;
}

.gd-faq-body .gd-code {
    margin: 8px 0 10px;
}

/* ---------- 正文里的页内跳转链接（胶囊样式） ---------- */

.gd-ref {
    display: inline-block;

    padding: 1px 9px 2px;

    border: 1px solid rgba(102, 204, 255, 0.4);
    border-radius: 999px;

    background-color: rgba(102, 204, 255, 0.14);

    font-size: 0.95em;
    line-height: 1.5;

    color: #2b96c9;

    text-decoration: none;

    white-space: nowrap;

    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.gd-ref:hover {
    border-color: rgba(102, 204, 255, 0.7);

    background-color: rgba(102, 204, 255, 0.24);

    color: #1f88b9;
}

/* ---------- 正文里的外链（GitHub 图标 + 文字） ---------- */

.gd-gh {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: var(--main-color);

    text-decoration: none;

    vertical-align: baseline;
}

.gd-gh svg {
    flex-shrink: 0;

    /* 图标跟着文字基线走，别把行高顶起来 */
    position: relative;
    top: 1px;
}

.gd-gh:hover {
    text-decoration: underline;
}

/* ==============================
   手机端（目录变成可开合的一块，压在正文上面）
   ============================== */

@media (max-width: 900px) {

    .gd-layout {
        flex-direction: column;

        /* ⚠️ 必须把 align-items 从 flex-start 改回 stretch：
           纵向 flex 里 flex-start = 子项按内容宽度收缩，
           正文就会被最长的一行撑到比屏幕还宽（实测 568 > 464 → 整页横向溢出）。 */
        align-items: stretch;

        gap: 16px;

        padding: 18px 16px 48px;
    }

    .gd-side {
        position: static;

        flex: none;

        width: 100%;
        max-height: none;

        overflow: visible;

        padding: 0;
    }

    .gd-side-toggle {
        display: flex;
    }

    /* 顶栏那枚返回按钮在手机端收小一点 */
    .gd-head-left {
        gap: 8px;
    }

    .gd-back {
        width: 32px;
        height: 32px;

        font-size: 15px;
    }

    /* 默认收起，点「文档目录」才展开 */
    .gd-nav {
        display: none;
    }

    .gd-side.gd-open .gd-nav {
        display: block;
    }

    .gd-side-label {
        display: none;
    }

    .gd-content {
        width: 100%;

        max-width: none;
    }

    .gd-h1 {
        font-size: 23px;
    }

    .gd-content h2 {
        font-size: 19px;
    }

    .gd-content h3 {
        margin-top: 24px;

        font-size: 16px;
    }

    .gd-content p,
    .gd-content ul,
    .gd-content ol,
    .gd-steps > li {
        font-size: 14.5px;
    }

    .gd-sec {
        margin-bottom: 36px;
    }
}