@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --hm-ink:#0F1115;--hm-ink-2:#4A505C;--hm-desk:#EEF0F3;--hm-sheet:#FFFFFF;
  --hm-line:#D9DDE3;--hm-line-2:#C9CED6;--hm-rec:#FF3366;--hm-rec-text:#C8103E;--hm-rec-soft:#FFE3EA;
  --hm-sans:system-ui,-apple-system,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --hm-display:"Space Grotesk",var(--hm-sans);
  --hm-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --hm-radius:24px;--hm-nav-h:64px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hm-desk);color:var(--hm-ink);font:16px/1.6 var(--hm-sans);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.hm-main{flex:1 0 auto;padding-bottom:56px}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--hm-rec);outline-offset:2px}
.hm-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hm-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--hm-ink);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}
.hm-skip:focus{top:12px}

/* 頁首 */
.hm-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);border-bottom:1px solid var(--hm-line)}
@supports (backdrop-filter:blur(8px)){.hm-header{background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.hm-bar{max-width:1260px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:28px}
.hm-brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
.hm-mark{width:34px;height:34px;display:block}
.hm-brand span{font:700 21px/1 var(--hm-display);letter-spacing:-.5px}
.hm-nav{display:flex;gap:4px}
.hm-nav a{height:40px;padding:0 16px;border-radius:999px;display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;text-decoration:none;color:var(--hm-ink)}
.hm-nav a:hover{background:var(--hm-desk)}
.hm-nav a[aria-current="page"]{background:var(--hm-ink);color:#fff}
.hm-nav .hm-nav-about{margin-left:auto}
.hm-nav svg{display:none}
.hm-bar .hm-nav{flex:1}

/* 頁尾 */
.hm-footer{flex:none;border-top:1px solid var(--hm-line);background:var(--hm-sheet)}
.hm-footer-in{max-width:1260px;margin:0 auto;padding:24px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:13px;color:var(--hm-ink-2)}
.hm-footer-in a{color:var(--hm-ink-2)}
.hm-footer-in .hm-footer-brand{font:700 15px var(--hm-display);color:var(--hm-ink);margin-right:auto}

/* 通用版面 */
.hm-wrap{max-width:1260px;margin:0 auto;padding:0 24px}
.hm-eyebrow{font:500 12px/1 var(--hm-mono);letter-spacing:.04em;color:var(--hm-ink-2);text-transform:uppercase}
.hm-rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hm-rec)}
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--hm-ink);color:#fff;font:700 16px var(--hm-sans);text-decoration:none;cursor:pointer}
.hm-btn:hover{background:#2A2F3A}
.hm-btn-ghost{background:#fff;color:var(--hm-ink);border:1.5px solid var(--hm-ink)}
.hm-btn-ghost:hover{background:var(--hm-desk)}

/* 首頁 */
.hm-hero{padding:48px 0 24px}
.hm-hero h1{margin:0 0 8px;font-size:clamp(28px,4.2vw,44px);line-height:1.2;letter-spacing:-.5px}
.hm-hero p{margin:0;color:var(--hm-ink-2);font-size:17px}
.hm-drop{position:relative;margin-top:28px;min-height:260px;border-radius:var(--hm-radius);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 20px;text-align:center;cursor:pointer;transition:background .15s}
.hm-drop.is-over{background:var(--hm-rec-soft)}
.hm-corners{position:absolute;inset:18px;pointer-events:none;background:
  linear-gradient(var(--hm-ink),var(--hm-ink)) left top/22px 2px,linear-gradient(var(--hm-ink),var(--hm-ink)) left top/2px 22px,
  linear-gradient(var(--hm-ink),var(--hm-ink)) right top/22px 2px,linear-gradient(var(--hm-ink),var(--hm-ink)) right top/2px 22px,
  linear-gradient(var(--hm-ink),var(--hm-ink)) left bottom/22px 2px,linear-gradient(var(--hm-ink),var(--hm-ink)) left bottom/2px 22px,
  linear-gradient(var(--hm-ink),var(--hm-ink)) right bottom/22px 2px,linear-gradient(var(--hm-ink),var(--hm-ink)) right bottom/2px 22px;background-repeat:no-repeat}
.hm-drop strong{font-size:22px}
.hm-drop small{color:var(--hm-ink-2);font-size:14px}
.hm-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.hm-tool{position:relative;border-radius:20px;background:#fff;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-decoration:none;transition:transform .15s;min-width:0}
.hm-tool:hover{transform:translateY(-2px)}
.hm-tool h2{margin:6px 0 0;font-size:22px;line-height:1.2}
.hm-tool p{margin:-6px 0 0;font-size:14px;color:var(--hm-ink-2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-tool svg{width:30px;height:30px;fill:none;stroke:var(--hm-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hm-about-strip{margin-top:12px;border-radius:20px;background:var(--hm-ink);color:#fff;padding:20px 22px;display:flex;align-items:center;gap:16px;text-decoration:none}
.hm-about-strip span{flex:1}
.hm-about-strip small{display:block;color:#B8BEC8;font-size:13px}

/* 說明區（工具頁下方） */
.hm-info{max-width:1260px;margin:48px auto 0;padding:0 24px;width:100%}
.hm-info h2{font-size:22px;margin:0 0 16px}
.hm-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:0;margin:0 0 32px;list-style:none;counter-reset:s}
.hm-steps li{background:#fff;border-radius:20px;padding:20px;counter-increment:s}
.hm-steps li::before{content:"STEP " counter(s);display:block;font:500 12px var(--hm-mono);color:var(--hm-rec-text);margin-bottom:6px}
.hm-steps h3{margin:0 0 4px;font-size:17px}
.hm-steps p{margin:0;font-size:14px;color:var(--hm-ink-2)}
.hm-faq{background:#fff;border-radius:20px;padding:4px 20px}
.hm-faq details{border-top:1px solid var(--hm-line);padding:16px 0}
.hm-faq details:first-of-type{border-top:0}
.hm-faq summary{cursor:pointer;font-weight:600}
.hm-faq p{margin:8px 0 0;color:var(--hm-ink-2);font-size:15px}
.hm-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 32px}
.hm-specs div{background:#fff;border-radius:16px;padding:14px 16px}
.hm-specs dt{font:500 12px var(--hm-mono);color:var(--hm-ink-2)}
.hm-specs dd{margin:2px 0 0;font-weight:600}
.hm-related{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.hm-related a{height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--hm-line-2);background:#fff;display:inline-flex;align-items:center;text-decoration:none;font-weight:600;font-size:14px}
.hm-related a:hover{border-color:var(--hm-ink)}

/* 關於 */
.hm-about{max-width:760px;margin:0 auto;padding:48px 24px 0}
.hm-about-head{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.hm-about-head svg{width:72px;height:72px;flex:none}
.hm-about h1{margin:0;font:700 clamp(32px,6vw,48px)/1.1 var(--hm-display);letter-spacing:-1px}
.hm-about .hm-lead{font-size:clamp(19px,2.6vw,23px);line-height:1.6;margin:0 0 28px;font-weight:600}
.hm-card{background:#fff;border-radius:var(--hm-radius);padding:24px;margin-bottom:12px}
.hm-card h2{margin:0 0 8px;font-size:18px}
.hm-card p{margin:0;color:var(--hm-ink-2)}
.hm-card ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.hm-card li{display:flex;gap:10px;align-items:baseline}
.hm-card li b{font:500 12px var(--hm-mono);color:var(--hm-rec-text);flex:none;width:28px}

/* 404 */
.hm-404{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:48px 24px}
.hm-404 b{font:500 14px var(--hm-mono);color:var(--hm-rec-text)}
.hm-404 h1{margin:0;font-size:32px}

/* 手機：底部分頁列 */
@media (max-width:720px){
  .hm-bar{height:56px;padding:0 16px}
  .hm-mark{width:30px;height:30px}
  .hm-brand span{font-size:19px}
  .hm-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--hm-nav-h) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--hm-line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
  .hm-nav a{height:var(--hm-nav-h);flex-direction:column;justify-content:center;gap:3px;padding:0;border-radius:0;font-size:12px;font-weight:600;color:var(--hm-ink-2)}
  .hm-nav a:hover{background:transparent}
  .hm-nav a[aria-current="page"]{background:transparent;color:var(--hm-ink)}
  .hm-nav a[aria-current="page"] svg{stroke:var(--hm-rec)}
  .hm-nav svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .hm-nav .hm-nav-about{margin-left:0}
  .hm-footer{padding-bottom:calc(var(--hm-nav-h) + env(safe-area-inset-bottom))}
  .hm-wrap,.hm-info{padding:0 16px}
  .hm-hero{padding:24px 0 8px}
  .hm-hero p{font-size:15px}
  .hm-drop{margin-top:16px;min-height:220px}
  .hm-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-tool{padding:16px}
  .hm-tool h2{font-size:19px}
  .hm-main{padding-bottom:40px}
  .hm-footer-in{padding:20px 16px}
  .hm-about{padding-top:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.hm-mark-invert circle[fill="none"]{stroke:#fff}
.hm-about-strip .hm-mark{width:40px;height:40px}
.hm-about-mark{width:72px;height:72px;flex:none}
.hm-toolhead{padding:24px 0 12px}
.hm-toolhead h1{margin:0;font-size:clamp(22px,3vw,28px);letter-spacing:-.3px}
@media (max-width:720px){.hm-toolhead{padding:14px 0 8px}}
@media (max-width:720px){.hm-header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#fff!important;position:static}}

@media (max-width:1000px) and (min-width:721px){.hm-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 選單 */
.hm-select{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.hm-select select{appearance:none;-webkit-appearance:none;height:46px;padding:0 40px 0 14px;border:1.5px solid transparent;border-radius:12px;background:var(--hm-desk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px;color:var(--hm-ink);font:600 15px var(--hm-sans);cursor:pointer}
.hm-select select:hover{border-color:var(--hm-line-2)}
.hm-select select:focus-visible{border-color:var(--hm-ink);outline:none;box-shadow:0 0 0 3px var(--hm-rec-soft)}