.gi-usage-guide {
    --gi-bg:#F9F4F0;--gi-ink:#564B46;--gi-accent:#BB6553;--gi-tab-normal:#CACACA;--gi-card-radius:9px;
    --gi-font-heading:18px;--gi-font-tab:14px;--gi-font-card-title:18px;--gi-font-step-en:15px;--gi-font-step-local:14px;
    --gi-font-description:13px;--gi-font-caption:12px;--gi-font-divider:12px;--gi-brace-size:40px;
    --gi-nav-width:180px;--gi-column-gap:28px;--gi-card-gap:10px;--gi-block-gap:28px;--gi-media-gap:26px;--gi-divider-width:48px;--gi-image-max-height:240px;--gi-brace-gap:10px;--gi-brace-offset-y:0px;
    --gi-inner-pt:24px;--gi-inner-pr:18px;--gi-inner-pb:30px;--gi-inner-pl:18px;
    --gi-nav-pt:0px;--gi-nav-pr:0px;--gi-nav-pb:0px;--gi-nav-pl:0px;
    --gi-tab-pt:6px;--gi-tab-pr:4px;--gi-tab-pb:6px;--gi-tab-pl:18px;
    --gi-content-pt:0px;--gi-content-pr:0px;--gi-content-pb:0px;--gi-content-pl:0px;
    --gi-card-pt:28px;--gi-card-pr:32px;--gi-card-pb:30px;--gi-card-pl:32px;
    --gi-step-pt:0px;--gi-step-pr:4px;--gi-step-pb:0px;--gi-step-pl:4px;
    --gi-divider-label-pt:6px;--gi-divider-label-pr:4px;--gi-divider-label-pb:6px;--gi-divider-label-pl:4px;
    --gi-mobile-card-gap:8px;--gi-mobile-block-gap:24px;--gi-mobile-media-gap:14px;--gi-mobile-divider-width:30px;
    --gi-mobile-image-max-height:190px;--gi-mobile-side-image-max-height:150px;--gi-mobile-brace-gap:8px;--gi-mobile-brace-offset-y:0px;
    --gi-mobile-inner-pt:0px;--gi-mobile-inner-pr:12px;--gi-mobile-inner-pb:26px;--gi-mobile-inner-pl:12px;
    --gi-mobile-nav-pt:0px;--gi-mobile-nav-pr:0px;--gi-mobile-nav-pb:0px;--gi-mobile-nav-pl:0px;
    --gi-mobile-tab-pt:10px;--gi-mobile-tab-pr:8px;--gi-mobile-tab-pb:9px;--gi-mobile-tab-pl:8px;
    --gi-mobile-content-pt:8px;--gi-mobile-content-pr:0px;--gi-mobile-content-pb:0px;--gi-mobile-content-pl:0px;
    --gi-mobile-card-pt:22px;--gi-mobile-card-pr:14px;--gi-mobile-card-pb:24px;--gi-mobile-card-pl:14px;
    --gi-mobile-step-pt:0px;--gi-mobile-step-pr:3px;--gi-mobile-step-pb:0px;--gi-mobile-step-pl:3px;
    --gi-mobile-divider-label-pt:4px;--gi-mobile-divider-label-pr:8px;--gi-mobile-divider-label-pb:4px;--gi-mobile-divider-label-pl:8px;
    width:100%;max-width:none;min-width:0;margin:0;background:var(--gi-bg);color:var(--gi-ink);font-family:"Noto Serif TC",serif;
}
.gi-usage-guide *,.gi-usage-guide *::before,.gi-usage-guide *::after{box-sizing:border-box}

/* Journal Row / Site Container is the only width authority. */
.gi-usage-guide__inner{
    display:grid;grid-template-columns:minmax(80px,var(--gi-nav-width)) minmax(0,1fr);gap:var(--gi-column-gap);
    width:100%;max-width:none;min-width:0;margin:0;
    padding:var(--gi-inner-pt) var(--gi-inner-pr) var(--gi-inner-pb) var(--gi-inner-pl);
}
.gi-usage-guide__nav{position:static;width:auto;min-width:0;padding:var(--gi-nav-pt) var(--gi-nav-pr) var(--gi-nav-pb) var(--gi-nav-pl)}
.gi-usage-guide__heading{margin:0 0 14px;color:var(--gi-ink);font:600 var(--gi-font-heading)/1.35 "Noto Serif TC",serif;letter-spacing:.06em}
.gi-usage-guide__tabs{display:flex;flex-direction:column;gap:4px;min-width:0}
.gi-usage-guide__tab{
    position:relative;display:block;width:100%;min-width:0;margin:0;
    padding:var(--gi-tab-pt) var(--gi-tab-pr) var(--gi-tab-pb) var(--gi-tab-pl);
    border:0;background:transparent;color:var(--gi-tab-normal);font:500 var(--gi-font-tab)/1.45 "Noto Serif TC",serif;
    letter-spacing:.02em;text-align:left;cursor:pointer
}
.gi-usage-guide__tab::before{content:"›";position:absolute;left:2px;top:50%;transform:translateY(-52%);color:transparent;font-size:1.1em;line-height:1}
.gi-usage-guide__tab:hover,.gi-usage-guide__tab:focus,.gi-usage-guide__tab.is-active{color:var(--gi-accent);outline:0}
.gi-usage-guide__tab.is-active::before{color:var(--gi-accent)}

.gi-usage-guide__content{width:100%;min-width:0;padding:var(--gi-content-pt) var(--gi-content-pr) var(--gi-content-pb) var(--gi-content-pl)}
.gi-usage-guide__panel{width:100%;min-width:0}.gi-usage-guide__panel[hidden]{display:none!important}
.gi-usage-guide__card{
    width:100%;margin:0 0 var(--gi-card-gap);padding:var(--gi-card-pt) var(--gi-card-pr) var(--gi-card-pb) var(--gi-card-pl);
    border:1px solid rgba(86,75,70,.72);border-radius:var(--gi-card-radius);background:var(--gi-bg)
}
.gi-usage-guide__card:last-child{margin-bottom:0}
.gi-usage-guide__card-title{margin:0 0 10px;color:var(--gi-accent);font:600 var(--gi-font-card-title)/1.4 "Noto Serif TC",serif;letter-spacing:.04em;text-align:center}
.gi-usage-guide__blocks{display:flex;flex-direction:column;gap:var(--gi-block-gap)}
.gi-usage-guide__block{min-width:0}

.gi-usage-guide__step{display:flex;align-items:center;justify-content:center;width:max-content;max-width:100%;margin:0 auto 9px;gap:var(--gi-brace-gap)}
.gi-usage-guide__step-copy{min-width:56px;padding:var(--gi-step-pt) var(--gi-step-pr) var(--gi-step-pb) var(--gi-step-pl);text-align:center}
.gi-usage-guide__step-en{color:var(--gi-ink);font:400 var(--gi-font-step-en)/1.18 "Noto Serif TC",serif}
.gi-usage-guide__step-local{margin-top:1px;color:var(--gi-ink);font:600 var(--gi-font-step-local)/1.18 "Noto Serif TC",serif;letter-spacing:.06em}
.gi-usage-guide__brace{position:relative;width:15px;min-height:34px;flex:0 0 15px}
.gi-usage-guide__brace::before{position:absolute;top:calc(50% + var(--gi-brace-offset-y));left:50%;color:var(--gi-ink);font-family:"Noto Serif TC","Times New Roman",serif;font-size:var(--gi-brace-size);font-weight:400;line-height:1;transform-origin:50% 50%;white-space:nowrap}
.gi-usage-guide__brace::after{content:none}
.gi-usage-guide__brace--left::before{content:"{";transform:translate(-50%,-50%) scaleX(.72) scaleY(1.04)}
.gi-usage-guide__brace--right::before{content:"}";transform:translate(-50%,-50%) scaleX(.72) scaleY(1.04)}

.gi-usage-guide__description{max-width:780px;margin:0 auto 16px;color:var(--gi-ink);font:400 var(--gi-font-description)/1.65 "Noto Serif TC",serif;letter-spacing:.02em;text-align:center;white-space:pre-line}
.gi-usage-guide__media-pair{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;justify-items:stretch;width:100%;min-width:0}
.gi-usage-guide__media-pair.has-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gi-media-gap)}
.gi-usage-guide__media-pair.has-two.has-divider{grid-template-columns:minmax(0,1fr) var(--gi-divider-width) minmax(0,1fr);gap:0}
.gi-usage-guide__media{display:grid;grid-template-rows:auto 1fr;align-items:start;justify-items:center;width:100%;min-width:0;max-width:none;margin:0;color:var(--gi-ink);text-align:center}
.gi-usage-guide__caption{display:flex;align-items:flex-start;justify-content:center;width:100%;min-height:calc(var(--gi-font-caption) * 2.1);margin:0 0 8px;font:400 var(--gi-font-caption)/1.5 "Noto Serif TC",serif;letter-spacing:.02em;text-align:center}
.gi-usage-guide__visual{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:90px}
.gi-usage-guide__visual img{display:block;width:auto;max-width:100%;height:auto;max-height:var(--gi-image-max-height);margin:0 auto;object-fit:contain}
.gi-usage-guide__cover,.gi-usage-guide__image{position:relative;z-index:1}

/* Verified ghost-image fix retained. */
.gi-usage-guide__visual img.gi-usage-guide__gif{display:none!important;position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%)}
.gi-usage-guide__media.is-playing .gi-usage-guide__visual img.gi-usage-guide__gif{display:block!important}
.gi-usage-guide__media.is-playing .gi-usage-guide__cover{visibility:hidden!important;opacity:0!important}
.gi-usage-guide__media:not(.is-playing) .gi-usage-guide__cover{visibility:visible;opacity:1}
.gi-usage-guide__media[data-gi-no-cover] .gi-usage-guide__visual img.gi-usage-guide__gif{display:block!important;position:relative;top:auto;left:auto;transform:none}

.gi-usage-guide__divider{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:150px;color:var(--gi-ink);font:400 var(--gi-font-divider)/1 "Noto Serif TC",serif}
.gi-usage-guide__divider::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(86,75,70,.55);transform:translateX(-50%)}
.gi-usage-guide__divider span{position:relative;z-index:1;padding:var(--gi-divider-label-pt) var(--gi-divider-label-pr) var(--gi-divider-label-pb) var(--gi-divider-label-pl);background:var(--gi-bg)}

@media(max-width:767px){
    .gi-usage-guide__inner{display:block;width:100%;max-width:none;min-width:0;margin:0;padding:var(--gi-mobile-inner-pt) var(--gi-mobile-inner-pr) var(--gi-mobile-inner-pb) var(--gi-mobile-inner-pl)}
    .gi-usage-guide__nav{width:100%;padding:var(--gi-mobile-nav-pt) var(--gi-mobile-nav-pr) var(--gi-mobile-nav-pb) var(--gi-mobile-nav-pl)}
    .gi-usage-guide__heading{display:none}
    .gi-usage-guide__tabs{display:grid;grid-template-columns:repeat(var(--gi-tab-count,1),minmax(0,1fr));gap:0;width:100%;overflow:hidden;border-bottom:0}
    .gi-usage-guide__tabs.is-scrollable{display:flex;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .gi-usage-guide__tabs.is-scrollable::-webkit-scrollbar{display:none}
    .gi-usage-guide__tabs.is-scrollable .gi-usage-guide__tab{flex:0 0 33.333333%}
    .gi-usage-guide__tab{min-width:0;padding:var(--gi-mobile-tab-pt) var(--gi-mobile-tab-pr) var(--gi-mobile-tab-pb) var(--gi-mobile-tab-pl);color:var(--gi-tab-normal);font-size:var(--gi-font-tab-mobile);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .gi-usage-guide__tab::before{display:none}
    .gi-usage-guide__tab::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:1px;background:transparent}
    .gi-usage-guide__tab.is-active::after{background:var(--gi-accent)}

    .gi-usage-guide__content{width:100%;padding:var(--gi-mobile-content-pt) var(--gi-mobile-content-pr) var(--gi-mobile-content-pb) var(--gi-mobile-content-pl)}
    .gi-usage-guide__card{margin-bottom:var(--gi-mobile-card-gap);padding:var(--gi-mobile-card-pt) var(--gi-mobile-card-pr) var(--gi-mobile-card-pb) var(--gi-mobile-card-pl)}
    .gi-usage-guide__card-title{margin-bottom:8px;font-size:var(--gi-font-card-title-mobile)}
    .gi-usage-guide__blocks{gap:var(--gi-mobile-block-gap)}
    .gi-usage-guide__step{margin-bottom:7px;gap:var(--gi-mobile-brace-gap)}
    .gi-usage-guide__step-copy{padding:var(--gi-mobile-step-pt) var(--gi-mobile-step-pr) var(--gi-mobile-step-pb) var(--gi-mobile-step-pl)}
    .gi-usage-guide__step-en{font-size:var(--gi-font-step-en-mobile)}
    .gi-usage-guide__step-local{font-size:var(--gi-font-step-local-mobile)}
    .gi-usage-guide__brace::before{font-size:var(--gi-brace-size-mobile);top:calc(50% + var(--gi-mobile-brace-offset-y))}
    .gi-usage-guide__description{max-width:88%;margin-bottom:12px;font-size:var(--gi-font-description-mobile);line-height:1.6}
    .gi-usage-guide__media-pair.has-two{gap:var(--gi-mobile-media-gap)}
    .gi-usage-guide__block--stacked .gi-usage-guide__media-pair.has-two,
    .gi-usage-guide__block--stacked .gi-usage-guide__media-pair.has-two.has-divider{grid-template-columns:minmax(0,1fr);gap:var(--gi-mobile-media-gap)}
    .gi-usage-guide__block--stacked .gi-usage-guide__divider{width:100%;min-height:20px;align-self:auto}
    .gi-usage-guide__block--stacked .gi-usage-guide__divider::before{top:50%;bottom:auto;left:0;width:100%;height:1px;transform:translateY(-50%)}
    .gi-usage-guide__block--side_by_side .gi-usage-guide__media-pair.has-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gi-mobile-media-gap)}
    .gi-usage-guide__block--side_by_side .gi-usage-guide__media-pair.has-two.has-divider{grid-template-columns:minmax(0,1fr) var(--gi-mobile-divider-width) minmax(0,1fr);gap:0}
    .gi-usage-guide__divider{min-height:120px;font-size:var(--gi-font-divider-mobile)}
    .gi-usage-guide__divider span{padding:var(--gi-mobile-divider-label-pt) var(--gi-mobile-divider-label-pr) var(--gi-mobile-divider-label-pb) var(--gi-mobile-divider-label-pl)}
    .gi-usage-guide__caption{min-height:calc(var(--gi-font-caption-mobile) * 2.1);margin-bottom:6px;font-size:var(--gi-font-caption-mobile)}
    .gi-usage-guide__visual{min-height:70px}
    .gi-usage-guide__visual img{max-height:var(--gi-mobile-image-max-height)}
    .gi-usage-guide__block--side_by_side .gi-usage-guide__visual img{max-height:var(--gi-mobile-side-image-max-height)}
}