/* ============================================================
   我的工具箱 — 共用樣式
   新增工具頁面時不用改這個檔案
   ============================================================ */

:root{
  --paper:#EEF0F3;
  --card:#FFFFFF;
  --ink:#1B2430;
  --ink-soft:#5A6675;
  --line:#D3D8DF;
  --blue:#2E5E8C;
  --blue-dark:#1F4468;
  --amber:#B5791C;
}

*{box-sizing:border-box;margin:0;padding:0}

html{font-size:17px}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans TC",-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:760px;margin:0 auto;padding:0 24px}

/* ── 頁首 ───────────────────────────── */
.topbar{
  border-bottom:1px solid var(--line);
  background:var(--card);
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.sitename{font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.sitename a{color:var(--ink);text-decoration:none}
.topbar nav a{
  color:var(--ink-soft);text-decoration:none;
  font-size:.95rem;margin-left:20px;
}
.topbar nav a:hover{color:var(--blue)}

/* ── 開場 ───────────────────────────── */
.hero{padding:72px 0 56px}
.hero h1{
  font-size:2.3rem;font-weight:700;line-height:1.35;
  letter-spacing:-.01em;max-width:16em;
}
.hero p{
  margin-top:20px;color:var(--ink-soft);
  font-size:1.05rem;max-width:30em;
}

/* ── 區塊標題 ───────────────────────── */
.list-head{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:14px;border-bottom:2px solid var(--ink);
}
.list-head h2{font-size:1.15rem;font-weight:700}
.list-head span{color:var(--ink-soft);font-size:.9rem}

/* ── 首頁：工具一行一個 ─────────────── */
.row{
  display:flex;align-items:center;gap:24px;
  background:var(--card);
  border:1px solid var(--line);
  border-left:5px solid var(--blue);
  border-radius:3px;
  padding:22px 26px;margin-top:16px;
  text-decoration:none;color:inherit;
  transition:border-color .15s, transform .15s;
}
.row:hover{border-color:var(--blue);transform:translateX(3px)}
.row:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.row.wip{
  border-left-color:var(--line);
  pointer-events:none;opacity:.72;
}

.row-main{flex:1;min-width:0}
.row h3{font-size:1.25rem;font-weight:700;line-height:1.4}
.row .desc{margin-top:4px;color:var(--ink-soft);font-size:.98rem}

.row-side{
  flex-shrink:0;display:flex;align-items:center;gap:14px;
  color:var(--ink-soft);
}
.arrow{font-size:1.4rem;color:var(--blue);line-height:1}
.row.wip .arrow{display:none}

/* ── 首頁：有兩個按鈕的工具（線上使用型）─── */
.row.multi{cursor:default}
.row.multi:hover{border-color:var(--line);transform:none}
.row-btns{
  flex-shrink:0;display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:170px;
}
.row-btns .btn,.row-btns .btn2{
  display:block;text-decoration:none;text-align:center;white-space:nowrap;
  font-size:.92rem;padding:10px 20px;border-radius:3px;
}
.btn2{
  background:transparent;color:var(--blue);border:1px solid var(--line);
  transition:border-color .15s;
}
.btn2:hover{border-color:var(--blue)}
.btn2.off{color:var(--ink-soft);border-style:dashed;pointer-events:none}

/* ── 標籤 ───────────────────────────── */
.meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.tag{
  border:1px solid var(--line);border-radius:2px;
  padding:2px 9px;font-size:.82rem;color:var(--ink-soft);
  white-space:nowrap;
}
.tag.ver{border-color:var(--blue);color:var(--blue)}
.tag.net{border-color:var(--amber);color:var(--amber)}

/* ── 工具頁：下載區 ─────────────────── */
.backlink{
  display:inline-block;margin:28px 0 0;
  color:var(--ink-soft);text-decoration:none;font-size:.95rem;
}
.backlink:hover{color:var(--blue)}

.tool-head{padding:28px 0 40px}
.tool-head h1{font-size:2.1rem;font-weight:700;line-height:1.35}
.tool-head .lead{
  margin-top:14px;color:var(--ink-soft);
  font-size:1.05rem;max-width:32em;
}

.download{
  background:var(--card);
  border:1px solid var(--line);
  border-left:5px solid var(--blue);
  border-radius:3px;
  padding:26px 28px;margin-bottom:56px;
  display:flex;align-items:center;gap:28px;
}
.download-info{flex:1;min-width:0}
.download-info strong{display:block;font-size:1.05rem}
.download-info span{color:var(--ink-soft);font-size:.92rem}

.btn{
  display:inline-block;background:var(--blue);color:#fff;
  text-decoration:none;font-weight:500;font-size:1rem;
  padding:13px 28px;border-radius:3px;white-space:nowrap;
  transition:background .15s;
}
.btn:hover{background:var(--blue-dark)}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.side-note{
  display:block;margin-top:8px;font-size:.82rem;
  color:var(--ink-soft);text-align:center;
}

/* ── 內文段落 ───────────────────────── */
.section{margin-top:48px}
.section h2{
  font-size:1.15rem;font-weight:700;
  padding-bottom:12px;border-bottom:2px solid var(--ink);
}
.section p{margin-top:16px;color:var(--ink-soft)}
.section ul{margin-top:16px;padding-left:22px;color:var(--ink-soft)}
.section li{margin-top:8px}
.section li strong{color:var(--ink)}

.steps{
  counter-reset:step;list-style:none;padding:0;margin-top:20px;
}
.steps li{
  position:relative;padding-left:44px;margin-top:18px;
  color:var(--ink-soft);
}
.steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:2px;
  width:28px;height:28px;border-radius:50%;
  background:var(--blue);color:#fff;
  font-size:.88rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.steps li strong{display:block;color:var(--ink);margin-bottom:2px}

/* ── 說明卡 ─────────────────────────── */
.notice{
  margin-top:48px;background:var(--card);
  border:1px solid var(--line);border-radius:3px;
  padding:30px 32px;
}
.notice h2{font-size:1.15rem;font-weight:700;margin-bottom:6px}
.notice > p{color:var(--ink-soft);font-size:.98rem}
.notice dl{margin-top:22px}
.notice dt{
  font-weight:700;margin-top:20px;
  padding-left:14px;border-left:3px solid var(--amber);
}
.notice dd{margin-top:6px;padding-left:17px;color:var(--ink-soft)}

footer{
  margin-top:72px;border-top:1px solid var(--line);
  padding:28px 0 56px;color:var(--ink-soft);font-size:.9rem;
}
footer a{color:var(--blue)}

/* ── 手機 ───────────────────────────── */
@media(max-width:620px){
  html{font-size:16px}
  .hero{padding:48px 0 40px}
  .hero h1{font-size:1.8rem}
  .tool-head h1{font-size:1.7rem}

  .row{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .row-side{width:100%;justify-content:space-between}
  .row-btns{width:100%;flex-direction:row}
  .row-btns .btn,.row-btns .btn2{flex:1}

  .download{flex-direction:column;align-items:stretch;gap:18px;padding:22px}
  .btn{display:block;text-align:center}

  .notice{padding:24px 22px}
}