/* GTC 老師招募站 v2 · 共用設計系統 牛皮紙底＋墨色字＋唯一的磚紅（只用在按鈕、連結、章節號）。 規則出處：~/.claude/skills/web-craft/SKILL.md */ :root{ --paper:#F4EFE6; --paper-2:#EBE3D6; --sheet:#FBF8F2; --ink:#1C1A17; --ink-2:#3A352E; --muted:#6B645A; --rule:rgba(28,26,23,.16); --rule-2:rgba(28,26,23,.08); --accent:#B3431B; --accent-ink:#8E3313; --on-accent:#FBF8F2; --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --zh:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif; --zh-head:"LXGW WenKai TC","PingFang TC","Noto Serif TC",serif; --wrap:1180px; --gut:clamp(16px,4vw,40px); font-synthesis:none; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:84px} body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased} html.zh body{font-family:var(--sans),var(--zh)} img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-thickness .15s,color .15s} a:hover{text-decoration-thickness:2px;color:var(--accent-ink)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} p{margin:0 0 1em;text-wrap:pretty} h1,h2,h3{margin:0;font-weight:500;color:var(--ink)} /* 語言：。inline 用 data-lang，區塊用 data-lang-block */ html.en [data-lang="zh"],html.zh [data-lang="en"], html.en [data-lang-block="zh"],html.zh [data-lang-block="en"]{display:none!important} /* 中英排版 */ :lang(en) h1,:lang(en) h2,:lang(en) h3{text-wrap:balance;font-family:var(--serif);font-optical-sizing:auto} :lang(en){hanging-punctuation:first allow-end} :lang(zh-Hant){line-break:strict;text-autospace:normal;text-spacing-trim:trim-start} :lang(zh-Hant) body{line-height:1.8;letter-spacing:.02em} :lang(zh-Hant) h1,:lang(zh-Hant) h2,:lang(zh-Hant) h3{font-family:var(--zh-head);text-wrap:pretty;letter-spacing:.01em} .num,.tab-nums{font-variant-numeric:lining-nums tabular-nums} /* 版心 */ .wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto} .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px)} .measure{max-width:64ch} /* ── 頂列 ── */ .top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)} .top .wrap{display:flex;align-items:center;gap:20px;min-height:64px} .mark{display:flex;align-items:baseline;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap} .mark:hover{color:var(--ink)} .mark b{font:600 22px/1 var(--serif);letter-spacing:-.01em} .mark span{font-size:13px;color:var(--muted)} .route{display:flex;gap:22px;margin-left:auto;list-style:none;padding:0;margin-block:0} .route a{color:var(--ink-2);text-decoration:none;font-size:15px;display:flex;gap:7px;align-items:baseline;padding:6px 0;border-bottom:1px solid transparent} .route a i{font-style:normal;font:500 13px/1 var(--serif);color:var(--accent)} .route a:hover{border-bottom-color:var(--ink)} .route a[aria-current="page"]{border-bottom:2px solid var(--accent);color:var(--ink)} .lang{display:flex;gap:2px;font-size:14px;color:var(--muted)} .lang button{all:unset;cursor:pointer;padding:6px 7px;border-radius:3px} .lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px} .lang button:focus-visible{outline:2px solid var(--accent)} .top .btn{padding:10px 14px;font-size:14px} /* ── 按鈕 ── */ .btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:13px 20px;border-radius:4px;font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s,transform .08s} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--accent);color:var(--on-accent)} .btn.primary:hover{background:var(--accent-ink);color:var(--on-accent)} .btn.quiet{background:transparent;color:var(--ink);border-color:var(--ink)} .btn.quiet:hover{background:var(--ink);color:var(--paper)} .btn .arr{transition:transform .15s} .btn:hover .arr{transform:translateX(3px)} button.btn{font-family:var(--sans)} /* ── 字級 ── */ .kicker{font-size:14px;color:var(--muted);margin:0 0 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .kicker .step{color:var(--accent);font-weight:600} .h-display{font-size:clamp(40px,6.2vw,80px);line-height:1.02;letter-spacing:-.022em} :lang(zh-Hant) .h-display{font-size:clamp(34px,5.2vw,64px);line-height:1.22;letter-spacing:.01em;font-weight:700} .h-sec{font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.015em} :lang(zh-Hant) .h-sec{font-size:clamp(26px,3vw,38px);line-height:1.3;font-weight:700} .lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-2);max-width:40ch} :lang(zh-Hant) .lead{max-width:30em;line-height:1.85} .small{font-size:14px;color:var(--muted)} /* ── 區塊 ── */ section{padding-block:clamp(64px,9vw,128px)} .rule-top{border-top:1px solid var(--rule)} .band{background:var(--paper-2)} /* 圖（真實截圖）*/ .fig{margin:0} .fig .frame{background:#fff;border:1px solid var(--rule);border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(28,26,23,.05),0 18px 40px -24px rgba(28,26,23,.35)} .fig figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);display:flex;gap:8px} .fig figcaption b{color:var(--ink);font-weight:600;white-space:nowrap} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%} } } @keyframes rise{from{opacity:.001;translate:0 28px}} /* 表格式清單（取代卡片網格）*/ .rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)} .rows .k{font-weight:600} .rows .v{color:var(--muted)} /* 摺疊（原生 details）*/ .qa{border-top:1px solid var(--ink)} .qa details{border-bottom:1px solid var(--rule)} .qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:clamp(18px,1.6vw,21px);font-weight:500} :lang(en) .qa summary{font-family:var(--serif)} :lang(zh-Hant) .qa summary{font-family:var(--zh-head);font-weight:700} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"+";font:300 26px/1 var(--sans);color:var(--accent);transition:transform .2s;flex:none;margin-top:-2px} .qa details[open] summary::after{transform:rotate(45deg)} .qa .ans{padding:0 0 24px;max-width:66ch;color:var(--ink-2)} .qa .ans p:last-child{margin:0} .qa .sub{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:4px 24px;padding:10px 0;border-top:1px dashed var(--rule)} .qa .sub:first-child{border-top:0} .qa .sub b{font-weight:600;color:var(--ink)} .qa .sub p{margin:0;color:var(--muted)} /* 下一步 */ .next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 28px;align-items:center;padding:32px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)} .next .n{font:500 clamp(44px,5vw,64px)/1 var(--serif);color:var(--accent)} .next h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2} .next p{margin:4px 0 0;color:var(--muted)} /* 預約區（全站唯一深色帶）*/ .talk{background:var(--ink);color:var(--paper)} .talk h2{color:var(--paper)} .talk .lead{color:#D9D1C3} .talk .btn.primary{background:var(--accent);color:var(--on-accent)} .talk .btn.quiet{color:var(--paper);border-color:rgba(244,239,230,.5)} .talk .btn.quiet:hover{background:var(--paper);color:var(--ink)} .talk a:not(.btn){color:#F0C9B5} .talk .facts{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid rgba(244,239,230,.22)} .talk .facts li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid rgba(244,239,230,.14);font-size:16px} .talk .facts b{min-width:7.5em;font-weight:600;color:var(--paper)} .talk .facts span{color:#CFC6B7} .talk .quote{font:400 clamp(22px,2.4vw,30px)/1.35 var(--serif);color:var(--paper);margin:0} :lang(zh-Hant) .talk .quote{font-family:var(--zh-head)} .talk .who{margin-top:14px;font-size:14px;color:#B9B0A1} /* 頁尾 */ .foot{padding:40px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);font-size:14px;color:var(--muted)} .foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between} .foot a{color:var(--ink-2)} /* 手機底部預約列 */ .dock{display:none} @media (max-width:760px){ .route{display:none} .top .wrap{gap:10px;min-height:56px} .mark span{display:none} .lang{margin-left:auto} .top .btn{display:none} .dock{display:flex;position:fixed;inset:auto 0 0 0;z-index:45;background:var(--paper);border-top:1px solid var(--rule);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center;justify-content:space-between;transform:translateY(0);transition:transform .25s} .dock.hide{transform:translateY(110%)} .dock .small{line-height:1.3} .dock .btn{padding:11px 16px;font-size:15px;white-space:nowrap} body{padding-bottom:76px} .rows li{grid-template-columns:1fr;gap:2px} .qa .sub{grid-template-columns:1fr} .next{grid-template-columns:1fr} .next .n{font-size:40px} } /* 子頁手機版路線條 */ .route-strip{display:none;gap:18px;overflow-x:auto;scrollbar-width:none;padding:10px var(--gut);border-bottom:1px solid var(--rule);font-size:14px;white-space:nowrap} .route-strip::-webkit-scrollbar{display:none} .route-strip a{color:var(--ink-2);text-decoration:none} .route-strip a i{font-style:normal;color:var(--accent);margin-right:5px;font-family:var(--serif)} .route-strip a[aria-current="page"]{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px} @media (max-width:760px){.route-strip{display:flex}} [hidden]{display:none!important} /* 語言切換淡入 */ ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s} @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}} /* ═════ 首頁 ═════ */ .hero{padding-top:clamp(40px,7vw,96px);padding-bottom:0} .hero-l{grid-column:1/span 6;align-self:center} .hero-fig{grid-column:7/span 6;align-self:center} .hero-cta{margin:36px 0 14px} .hero-alt a{color:var(--ink-2)} .frame.crop img{aspect-ratio:16/11;object-fit:cover;object-position:top left;width:100%} .facts-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:clamp(56px,7vw,96px) 0 0;padding:28px 0 clamp(64px,8vw,104px);border-top:1px solid var(--ink)} .facts-line div{margin:0} .facts-line dt{font:500 clamp(34px,3.6vw,48px)/1 var(--serif);letter-spacing:-.02em} .facts-line dt small{font-size:.45em;color:var(--muted);margin-left:3px;letter-spacing:0} .facts-line dd{margin:10px 0 0;color:var(--muted);font-size:15px;max-width:22ch} .patch-l{grid-column:1/span 5} .tools{grid-column:6/span 7} .tools li{grid-template-columns:minmax(0,11em) minmax(0,1fr);align-items:baseline} .tools .k{font-weight:500;color:var(--ink-2)} .tools li.one{border-top:2px solid var(--ink);border-bottom:0;margin-top:-1px;padding-top:22px} .tools li.one .k{font:600 26px/1 var(--serif);color:var(--ink)} .tools li.one .v{color:var(--ink);font-weight:500} .why-l{grid-column:1/span 4;align-self:start;position:sticky;top:100px} .why-r{grid-column:6/span 7} .thesis{font:400 clamp(26px,2.6vw,34px)/1.28 var(--serif);letter-spacing:-.01em;margin:0} :lang(zh-Hant) .thesis{font-family:var(--zh-head);line-height:1.5} .path-l{grid-column:1/span 4} .steps{grid-column:6/span 7;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .steps li{display:grid;grid-template-columns:4.2rem minmax(0,1fr) auto;gap:8px 20px;padding:28px 0;border-bottom:1px solid var(--rule);align-items:start} .steps .n{font:500 clamp(34px,3.4vw,46px)/.95 var(--serif);color:var(--accent)} .steps h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin-bottom:8px} .steps h3 a{color:var(--ink);text-decoration-color:var(--rule)} .steps h3 a:hover{text-decoration-color:var(--accent)} .steps p{margin:0;color:var(--muted);max-width:52ch} .steps .t{color:var(--muted);font-size:14px;padding-top:8px;white-space:nowrap} .cost-l,.faq-l{grid-column:1/span 4} .cost-r,.faq-r{grid-column:6/span 7} .cost-r li{grid-template-columns:minmax(0,10em) minmax(0,1fr);align-items:baseline} .cost-r .k{font:500 22px/1.2 var(--serif)} :lang(zh-Hant) .cost-r .k{font-family:var(--serif),var(--zh-head)} .cost-r .v{color:var(--ink-2)} .letter-k{grid-column:1/span 2} .letter-body{grid-column:3/span 7} .letter-p{font:400 clamp(21px,2vw,26px)/1.5 var(--serif);color:var(--ink-2)} :lang(zh-Hant) .letter-p{font-family:var(--zh-head);line-height:1.8} .sig{font:italic 400 30px/1 var(--serif);margin-top:28px} .talk-l{grid-column:1/span 7} .talk-r{grid-column:9/span 4;align-self:end;margin:0;padding-top:32px;border-top:1px solid rgba(244,239,230,.22)} @media (max-width:900px){ .hero-l,.hero-fig,.patch-l,.tools,.why-l,.why-r,.path-l,.steps,.cost-l,.cost-r,.faq-l,.faq-r,.letter-k,.letter-body,.talk-l,.talk-r{grid-column:1/-1} .hero-fig{margin-top:40px} .why-l{position:static;margin-bottom:28px} .patch-l,.path-l,.cost-l,.faq-l{margin-bottom:32px} .talk-r{margin-top:48px} } @media (max-width:560px){ .facts-line{grid-template-columns:1fr;gap:18px} .facts-line div{display:flex;gap:16px;align-items:baseline} .facts-line dd{margin:0} .steps li{grid-template-columns:3rem minmax(0,1fr)} .steps .t{grid-column:2;padding-top:0} .tools li,.cost-r li{grid-template-columns:1fr} } .nb{white-space:nowrap} :lang(zh-Hant) h3{font-weight:700} .letter-k{align-self:start;padding-top:10px} .talk-k{display:inline-block;margin:0 0 22px;padding:6px 12px;border:1px solid rgba(244,239,230,.35);border-radius:3px;font-size:14px;color:var(--paper);letter-spacing:.02em} .h-talk{font-size:clamp(38px,5.4vw,68px);line-height:1.04;letter-spacing:-.02em;color:var(--paper)} :lang(zh-Hant) .h-talk{font-size:clamp(32px,4.4vw,54px);line-height:1.3;font-weight:700} /* ═════ 子頁共用 ═════ */ .page-head{padding:clamp(40px,6vw,88px) 0 clamp(28px,4vw,48px)} .page-head .lead{max-width:48ch} .after{padding-top:0} a.next:hover .btn.primary{background:var(--accent-ink)} a.next:hover h3{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em} /* ═════ 第 1 步 · 導覽 ═════ */ .tour{padding-top:0} .tour-nav{grid-column:1/span 3;align-self:start;position:sticky;top:88px} .tour-nav ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .tour-nav button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:14px 2px;border-bottom:1px solid var(--rule);font-size:16px;color:var(--ink-2)} .tour-nav button:hover .nm{text-decoration:underline;text-underline-offset:.2em} .tour-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .tour-nav button[aria-current="true"]{color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent);padding-left:14px} .tour-nav button.seen .nm::after{content:" ✓";color:var(--muted);font-weight:400} .tour-nav .ct{font-size:13px;color:var(--muted)} .tour-card{grid-column:5/span 8;min-height:60vh} .tc-meta{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin:0 0 10px} .tc-bar{height:2px;background:var(--rule);margin-bottom:34px} .tc-bar i{display:block;height:100%;background:var(--accent);transition:width .3s} .tc-h{font-size:clamp(28px,3.2vw,42px);line-height:1.1;letter-spacing:-.015em;outline:none} :lang(zh-Hant) .tc-h{font-size:clamp(24px,2.6vw,34px);line-height:1.35;font-weight:700} .tc-d{margin:16px 0 28px;font-size:18px;color:var(--ink-2);max-width:62ch} .tfig{margin:8px 0 28px} .tfig .frame img{width:100%} .tc-li{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--rule)} .tc-li li{padding:12px 0 12px 22px;border-bottom:1px solid var(--rule);position:relative;color:var(--ink-2)} .tc-li li::before{content:"";position:absolute;left:3px;top:.95em;width:5px;height:5px;background:var(--accent)} .tc-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid var(--ink)} .tc-nav .btn.primary{margin-left:auto} /* 導覽裡的示意 */ .mock{border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:#fff;margin:8px 0 28px} .mock-bar{display:flex;gap:6px;padding:10px 12px;background:var(--paper-2);border-bottom:1px solid var(--rule)} .mock-bar i{width:9px;height:9px;border-radius:50%;background:rgba(28,26,23,.18)} .mock-brand{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--rule-2)} .mock-brand .lg{width:28px;height:28px;border-radius:5px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:600 14px/1 var(--serif)} .mock-brand .yours{margin-left:auto;font-size:12px;color:var(--accent);border:1px solid currentColor;padding:2px 8px;border-radius:3px} .mock-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--rule-2);font-size:13px;color:var(--muted)} .mock-tabs span{padding:5px 10px;border-radius:3px} .mock-tabs .on{background:var(--ink);color:var(--paper)} .mock-body{padding:18px 16px;display:grid;gap:10px} .mock-body i{height:10px;border-radius:2px;background:var(--paper-2)} .mock-body .m{width:72%}.mock-body .s{width:48%} .price-v{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin:8px 0 28px;padding:24px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)} .price-v .amt{font:500 72px/1 var(--serif);letter-spacing:-.03em} .price-v .amt span{font-size:22px;color:var(--muted);margin-left:4px} .price-v p{margin:6px 0 0;color:var(--muted)} .pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:8px 0 28px;border-top:1px solid var(--rule)} .pairs div{padding:14px 0;border-bottom:1px solid var(--rule)} .pairs dt{font-weight:600} .pairs dd{margin:4px 0 0;color:var(--muted);font-size:15px} .tv{margin:8px 0 28px} .seq{list-style:none;margin:8px 0 28px;padding:0} .seq-h{display:flex;gap:12px;align-items:baseline;font-weight:600;margin:0 0 12px} .seq-h .n{font:500 22px/1 var(--serif);color:var(--accent);flex:none} .seq-then{margin:-6px 0 26px 34px;font-size:14px;color:var(--muted);font-style:italic} :lang(zh-Hant) .seq-then{font-style:normal} .cmp{margin:8px 0 20px;border-top:1px solid var(--ink)} .cmp .r{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px} .cmp .hd{font-weight:600;color:var(--ink)} .cmp .r span{color:var(--ink-2)} @media (max-width:900px){ .tour-nav{grid-column:1/-1;position:sticky;top:56px;z-index:5;background:var(--paper);margin:0 calc(-1*var(--gut)) 28px;padding:0 var(--gut)} .tour-nav ol{display:flex;gap:4px;overflow-x:auto;border-top:0;border-bottom:1px solid var(--rule);scrollbar-width:none} .tour-nav ol::-webkit-scrollbar{display:none} .tour-nav li{flex:none} .tour-nav button{padding:12px 10px;border-bottom:0;font-size:15px} .tour-nav button[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--accent);padding-left:10px} .tour-nav button.seen .nm::after{content:""} .tour-card{grid-column:1/-1} .pairs,.cmp .r{grid-template-columns:1fr} .cmp .hd{display:none} .cmp .r b{margin-bottom:-6px} } @media (max-width:760px){.tour-nav{top:0}} /* ═════ 第 2 步 · 建置指南 ═════ */ .gh-l{grid-column:1/span 7} .gh-r{grid-column:9/span 4;align-self:end} .gprog{padding:18px 0;border-top:1px solid var(--ink)} .gprog-top{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font-size:15px} .gprog-top b{font:500 26px/1 var(--serif)} .gprog .tc-bar{margin-bottom:10px} .gplan{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .gplan summary{cursor:pointer;padding:14px 0;font-size:15px;color:var(--ink-2);list-style:none;display:flex;justify-content:space-between} .gplan summary::-webkit-details-marker{display:none} .gplan summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1} .gplan[open] summary::after{content:"−"} .gplan p{font-size:15px;color:var(--ink-2)} .guide{padding-top:0} .g-nav{grid-column:1/span 3;align-self:start;position:sticky;top:88px} .g-nav ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .g-nav button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:13px 2px;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2)} .g-nav button:hover .nm{text-decoration:underline;text-underline-offset:.2em} .g-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .g-nav .no{font:500 15px/1 var(--serif);color:var(--accent)} .g-nav .nm em{font-style:normal;font-size:12px;color:var(--muted);margin-left:4px} .g-nav .ct{font-size:13px;color:var(--muted)} .g-nav button.done .ct{color:var(--ink);font-weight:600} .g-nav button[aria-current="true"]{color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent);padding-left:12px} .g-mod{grid-column:5/span 8} .g-eye{font-size:14px;color:var(--muted);margin:0 0 12px;display:flex;gap:10px;align-items:center} .badge{font-size:12px;padding:2px 8px;border:1px solid var(--ink);border-radius:3px;color:var(--ink)} .badge.opt{border-style:dashed;color:var(--muted);border-color:var(--muted)} .g-h{font-size:clamp(28px,3.2vw,42px);line-height:1.1;letter-spacing:-.015em;outline:none} :lang(zh-Hant) .g-h{font-size:clamp(24px,2.6vw,34px);line-height:1.35;font-weight:700} .g-intro{margin:16px 0 20px;font-size:18px;color:var(--ink-2);max-width:62ch} .g-out{margin:0 0 28px;padding:14px 0 14px 18px;border-left:3px solid var(--ink);color:var(--ink-2);max-width:62ch} .g-out b{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:2px} .gsteps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .gstep{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:0 18px;padding:24px 0;border-bottom:1px solid var(--rule)} .gcheck{all:unset;box-sizing:border-box;width:26px;height:26px;border:1.5px solid var(--ink);border-radius:3px;cursor:pointer;margin-top:3px;display:grid;place-items:center;background:var(--sheet)} .gcheck:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .gcheck:hover{background:var(--paper-2)} .gstep.on .gcheck{background:var(--ink)} .gstep.on .gcheck::after{content:"";width:11px;height:6px;border:2px solid var(--paper);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)} .gbody h3{font-size:20px;line-height:1.3;margin-bottom:8px;cursor:pointer} :lang(zh-Hant) .gbody h3{font-size:19px} .gstep.on .gbody h3{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(28,26,23,.35)} .snum{font:500 15px/1 var(--serif);color:var(--accent);margin-right:10px;text-decoration:none;display:inline-block} .gbody p{color:var(--ink-2);max-width:60ch} .gbody code{font:13.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--paper-2);padding:1px 6px;border-radius:3px;color:var(--ink)} .gchips{list-style:none;margin:4px 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--muted)} .gchips li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--muted);margin:0 8px 2px 0;vertical-align:middle} .gnote{font-size:15px;padding:10px 14px;background:var(--paper-2);border-radius:3px} .gcopy{margin:8px 0 12px;border:1px solid var(--rule);border-radius:4px;background:var(--sheet);padding:16px} .gcopy-h{font-size:14px;font-weight:600;margin:0 0 8px} .gcopy-t{white-space:pre-wrap;font:14.5px/1.65 var(--sans),var(--zh);margin:0 0 14px;color:var(--ink-2);max-height:220px;overflow:auto} .glink{margin:10px 0 4px} .gshots{display:flex;flex-direction:column;gap:10px;width:148px} .gshot{all:unset;cursor:zoom-in;position:relative;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:#fff} .gshot img{width:100%;height:96px;object-fit:cover;object-position:top left} .gshot span{position:absolute;right:6px;bottom:6px;font-size:11px;background:var(--ink);color:var(--paper);padding:2px 6px;border-radius:2px;opacity:0;transition:opacity .15s} .gshot:hover span,.gshot:focus-visible span{opacity:1} .gshot:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .g-tip{margin:28px 0 0;padding:14px 0 14px 18px;border-left:3px solid var(--accent);color:var(--ink-2);max-width:62ch} .g-tip b{display:block;font-size:13px;color:var(--accent);margin-bottom:2px} .gfin{padding:32px 0 8px} .zoom{border:0;padding:0;max-width:min(1200px,94vw);max-height:92vh;background:transparent} .zoom::backdrop{background:rgba(28,26,23,.82)} .zoom img{max-height:92vh;width:auto;border-radius:4px;cursor:zoom-out} @media (max-width:900px){ .gh-l,.gh-r,.g-mod{grid-column:1/-1} .gh-r{margin-top:28px} .g-nav{grid-column:1/-1;position:sticky;top:56px;z-index:5;background:var(--paper);margin:0 calc(-1*var(--gut)) 28px;padding:0 var(--gut)} .g-nav ol{display:flex;overflow-x:auto;border-top:0;border-bottom:1px solid var(--rule);scrollbar-width:none} .g-nav ol::-webkit-scrollbar{display:none} .g-nav li{flex:none} .g-nav button{display:flex;gap:6px;padding:12px 10px;border-bottom:0} .g-nav .ct{display:none} .g-nav button[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--accent);padding-left:10px} .gstep{grid-template-columns:2.2rem minmax(0,1fr)} .gshots{grid-column:2;flex-direction:row;width:auto;overflow-x:auto;margin-top:6px} .gshot{flex:none;width:132px} } @media (max-width:760px){.g-nav{top:0}} /* ═════ 第 3 步 · GTC ═════ */ .gt-l{grid-column:1/span 8} .now-l,.mk-l{grid-column:1/span 4} .now-r{grid-column:6/span 7} .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border-top:1px solid var(--ink);padding-top:22px} .cols h3{font-size:21px;line-height:1.25;margin-bottom:10px} .cols p{color:var(--muted);font-size:15.5px;margin:0} .mk-r{grid-column:6/span 7} .eco-k{grid-column:1/span 2;align-self:start;padding-top:10px} .eco-body{grid-column:3/span 8} /* ═════ 找 KC 聊聊 ═════ */ .talk-page{padding-top:clamp(56px,8vw,112px)} .btn.big{padding:17px 26px;font-size:18px} .book{margin-top:36px} .cover-h{font-size:14px;color:#B9B0A1;margin:0 0 10px} .talk-page .talk-r{border-top:0;padding-top:0;align-self:start} .talk-page .facts li{display:block} .talk-page .facts li span{color:var(--paper)} .wr-l{grid-column:1/span 4} .wr-r{grid-column:6/span 7} .form{display:grid;gap:26px} .f{border:0;margin:0;padding:0;min-width:0} .f > label,.f legend{display:block;font-weight:600;margin-bottom:8px;padding:0} .f .req{color:var(--accent)} .f .opt{font-weight:400;color:var(--muted);font-size:14px;margin-left:6px} .form input[type=text],.form input[type=email],.form textarea,.form select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--sheet);border:1px solid rgba(28,26,23,.3);border-radius:4px;padding:12px 14px;min-height:46px} .form textarea{resize:vertical;line-height:1.6} .form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent} .opts{display:flex;flex-wrap:wrap;gap:8px} .opts label{position:relative;cursor:pointer} .opts input{position:absolute;opacity:0;inset:0;cursor:pointer} .opts input + span{display:inline-flex;align-items:center;min-height:42px;padding:9px 16px;border:1px solid rgba(28,26,23,.3);border-radius:4px;background:var(--sheet);font-size:15px} .opts.sm input + span{min-height:38px;padding:7px 12px;font-size:14px} .opts input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)} .opts input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px} .tgroup{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:8px 14px;align-items:start;padding:10px 0;border-top:1px dashed var(--rule)} .tgroup .gl{font-size:14px;color:var(--muted);padding-top:9px} .crow{display:grid;grid-template-columns:9em minmax(0,1fr);gap:8px;margin-bottom:8px} .linkbtn{all:unset;cursor:pointer;color:var(--accent);font-size:15px;text-decoration:underline;text-underline-offset:.2em} .linkbtn:focus-visible{outline:2px solid var(--accent)} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .ferr{color:var(--accent-ink);font-weight:600;margin:0} .form .btn{justify-self:start} .fdone{padding:40px 0;outline:none} @media (max-width:900px){ .gt-l,.now-l,.now-r,.mk-l,.mk-r,.eco-k,.eco-body,.wr-l,.wr-r{grid-column:1/-1} .now-l,.mk-l,.eco-k,.wr-l{margin-bottom:28px} .cols{grid-template-columns:1fr} } @media (max-width:560px){.tgroup{grid-template-columns:1fr}.tgroup .gl{padding-top:0}.crow{grid-template-columns:1fr}} body.no-dock .dock{display:none!important} body.no-dock{padding-bottom:0}