/* ─ · ·  日流 daysflow · 視覺基底（依 03 品牌視覺規範書） */

:root{
  /* 主色 */
  --amber:#BA7517; --sea-green:#1D9E75;
  /* 暖色階（琥珀） */
  --warm-900:#412402; --warm-700:#633806; --warm-500:#854F0B; --warm-400:#BA7517;
  --warm-300:#FAC775; --warm-100:#FAEEDA; --warm-50:#FBEAE0;
  /* 冷色階（海綠） */
  --cool-900:#04342C; --cool-700:#085041; --cool-500:#0F6E56; --cool-400:#1D9E75;
  --cool-300:#5DCAA5; --cool-100:#9FE1CB; --cool-50:#E1F5EE;
  /* 中性 */
  --charcoal-deep:#1A1A19; --charcoal:#2C2C2A; --border:#D5C7A8; --border-warm:#B9A989;
  /* 語意 */
  --text:#412402; --text-body:#633806; --muted:#854F0B;
  --bg:#FBEAE0; --bg-card:#FAEEDA; --bg-dark:#2C2C2A; --bg-dark-deep:#04342C;
  /* 字體 */
  --serif:"Lora","Noto Serif TC",serif;
  --sans:"Inter","Noto Sans TC",sans-serif;
  --mono:"JetBrains Mono",monospace;
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text-body);
  font-family:var(--sans); font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cool-500); text-decoration:none;}
a:hover{color:var(--cool-700);}
h1,h2,h3,h4{font-family:var(--serif); color:var(--text); font-weight:400; line-height:1.3;}
img{max-width:100%; display:block;}

/* ── 摩斯元件：劃 + 點 ── */
.dash,.dot{display:inline-block; vertical-align:middle;}
.dash{width:26px; height:4px; border-radius:2px; background:var(--sea-green); margin-right:8px;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--warm-300); margin-right:6px;}
.morse-label{font-family:var(--mono); font-size:12px; letter-spacing:3px; color:var(--muted); text-transform:uppercase;}

/* ── 導覽列 ── */
.nav{position:sticky; top:0; z-index:50; background:rgba(251,234,224,.88);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:12px; color:var(--text);}
.brand-mark{display:inline-flex; align-items:center;}
.brand-mark .dash{width:22px; margin-right:7px;} .brand-mark .dot{width:6px; height:6px; margin-right:5px;}
.brand-name{font-family:var(--serif); font-size:21px; letter-spacing:4px;}
.brand-en{font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:3px;
  color:var(--amber); text-transform:uppercase; align-self:center; padding-top:3px;}
@media(max-width:480px){.brand-en{display:none;}}

/* ── 工具介面截圖藝廊 ── */
.shot-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px;}
.shot-gallery .shot{margin:0;}
.shot-gallery .shot img{width:100%; border:1px solid var(--border); border-radius:10px;
  background:var(--bg-card); box-shadow:0 6px 22px rgba(65,36,2,.10);}
.shot-gallery figcaption{font-family:var(--mono); font-size:12px; color:var(--muted);
  margin-top:8px; letter-spacing:.5px;}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{color:var(--text-body); font-size:14px; letter-spacing:1px; padding:4px 0; border-bottom:2px solid transparent;}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--text); border-bottom-color:var(--sea-green);}
.nav-toggle{display:none; background:none; border:none; font-size:24px; color:var(--text); cursor:pointer;}

/* ── 版面通用 ── */
main{min-height:60vh;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.section{max-width:var(--maxw); margin:0 auto; padding:64px 24px;}
.section-head{margin-bottom:32px;}
.section-num{font-family:var(--mono); font-size:12px; letter-spacing:4px; color:var(--cool-500); margin-bottom:10px;}
.section-title{font-size:30px; letter-spacing:1px;}
.section-sub{color:var(--muted); margin-top:6px;}

/* ── 按鈕 ── */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
  font-size:14px; letter-spacing:1px; padding:11px 22px; border-radius:999px;
  border:1px solid var(--border-warm); color:var(--text); background:transparent;
  cursor:pointer; transition:.18s; text-decoration:none;}
.btn:hover{border-color:var(--sea-green); color:var(--text); transform:translateY(-1px);}
.btn-primary{background:var(--sea-green); border-color:var(--sea-green); color:#fff;}
.btn-primary:hover{background:var(--cool-700); border-color:var(--cool-700); color:#fff;}
.btn-amber{background:var(--amber); border-color:var(--amber); color:#fff;}
.btn-amber:hover{background:var(--warm-500); border-color:var(--warm-500); color:#fff;}
.btn-ghost-dark{border-color:rgba(255,255,255,.35); color:var(--cool-50);}
.btn-ghost-dark:hover{border-color:var(--sea-green); color:#fff;}

/* ── HERO（深海綠模式 B）── */
.hero{background:var(--bg-dark-deep); color:var(--cool-50); position:relative; overflow:hidden;}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:110px 24px 96px; position:relative; z-index:2;}
.hero-signal{display:flex; align-items:center; margin-bottom:26px;}
.hero-signal .dash{width:40px; height:5px; animation:sig 2.6s ease-in-out infinite;}
.hero-signal .dot{width:9px; height:9px;}
.hero-signal .dot:nth-child(2){animation:sig 2.6s ease-in-out .35s infinite;}
.hero-signal .dot:nth-child(3){animation:sig 2.6s ease-in-out .7s infinite;}
@keyframes sig{0%,100%{opacity:.35;} 18%{opacity:1;}}
.hero-kicker{font-family:var(--mono); font-size:13px; letter-spacing:5px; color:var(--cool-300); margin-bottom:22px;}
.hero h1{color:#fff; font-size:clamp(34px,5.4vw,60px); font-weight:300; letter-spacing:2px; margin:0 0 24px; line-height:1.2;}
.hero p.lead{max-width:640px; font-size:17px; color:var(--cool-100); margin:0 0 36px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.hero-glow{position:absolute; right:-160px; top:-120px; width:520px; height:520px; z-index:1;
  background:radial-gradient(circle, rgba(29,158,117,.22), transparent 62%);}

/* ── 工具卡片 ── */
.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
  padding:24px; transition:.18s; display:flex; flex-direction:column;}
.card:hover{transform:translateY(-3px); border-color:var(--border-warm); box-shadow:0 10px 28px rgba(65,36,2,.08);}
.card .morse-label{margin-bottom:12px;}
.card h3{font-size:19px; margin:0 0 8px; letter-spacing:1px;}
.card .tagline{color:var(--text-body); font-size:14.5px; flex:1;}
.card-body{display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none;}
.card .card-foot{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.card-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end;}
.card-go{font-size:13px; letter-spacing:1px; color:var(--sea-green); border:1px solid var(--sea-green);
  border-radius:999px; padding:4px 13px; transition:.15s; white-space:nowrap;}
.card-go:hover{background:var(--sea-green); color:#fff;}
.badge{font-family:var(--mono); font-size:11px; letter-spacing:1px; padding:3px 10px; border-radius:999px;}
.badge-live{background:var(--cool-50); color:var(--cool-700);}
.badge-building{background:var(--warm-100); color:var(--warm-500);}
.badge-concept{background:#eee; color:#777;}
.card-link{font-size:13px; color:var(--cool-500); letter-spacing:1px;}
.card-link:hover{color:var(--cool-700);}

/* ── 區塊：深色（給 wishbox 預覽等）── */
.band-dark{background:var(--bg-dark); color:var(--cool-50);}
.band-dark .section-title{color:#fff;}
.band-dark .section-num{color:var(--cool-300);}
.band-dark .muted, .band-dark .section-sub{color:var(--cool-100);}

/* ── 願望 / 列表 ── */
.wish-wall{display:grid; gap:14px; grid-template-columns:repeat(2,1fr);}
.wish{background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:16px 18px;}
.wish .wish-meta{display:flex; gap:10px; align-items:center; margin-top:10px;}
.band-dark .wish{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); color:var(--cool-50);}

/* ── 表單 ── */
.form{max-width:560px;}
.form label{display:block; font-size:14px; color:var(--text); margin:16px 0 6px; letter-spacing:.5px;}
.form input, .form textarea{width:100%; padding:12px 14px; border:1px solid var(--border-warm);
  border-radius:10px; background:#fff; font-family:var(--sans); font-size:15px; color:var(--text);}
.form textarea{min-height:130px; resize:vertical;}
.form input:focus, .form textarea:focus{outline:none; border-color:var(--sea-green); box-shadow:0 0 0 3px rgba(29,158,117,.14);}
.hp{position:absolute; left:-9999px;}

/* ── flash ── */
.flashes{max-width:var(--maxw); margin:18px auto 0; padding:0 24px;}
.flash{padding:12px 16px; border-radius:10px; margin-bottom:10px; font-size:14px;}
.flash.success{background:var(--cool-50); color:var(--cool-700); border:1px solid var(--cool-100);}
.flash.error{background:#fbe4e4; color:#9a2b2b; border:1px solid #f3c7c7;}

/* ── 文字頁（about / notes 內頁）── */
.prose{max-width:680px;}
.prose p{margin:0 0 18px; color:var(--text-body);}
.prose h2{font-size:24px; margin:36px 0 14px;}
.prose ul{margin:0 0 18px; padding-left:22px; color:var(--text-body);}
.prose li{margin:0 0 9px; line-height:1.7;}
.prose li::marker{color:var(--cool-400);}
.prose strong{color:var(--text); font-weight:500;}
.prose a{color:var(--cool-500); text-decoration:underline; text-underline-offset:2px;}
.lead-quiet{color:var(--muted); font-size:15px;}

/* ── 工具總覽分類 ── */
.tool-filter{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 38px;}
.chip{font-family:var(--sans); font-size:14px; padding:7px 17px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-card); color:var(--text-body);
  cursor:pointer; transition:.15s; line-height:1;}
.chip:hover{border-color:var(--sea-green); color:var(--text);}
.chip.is-on{background:var(--cool-900); border-color:var(--cool-900); color:#fff;}
.filter-empty{color:var(--muted); padding:20px 0;}
.cat-block{margin-bottom:48px;}
.cat-head{display:flex; align-items:baseline; gap:14px; margin-bottom:18px; border-bottom:1px solid var(--border); padding-bottom:10px;}
.cat-head h2{font-size:22px;} .cat-head .en{font-family:var(--mono); font-size:12px; letter-spacing:3px; color:var(--cool-500);}

/* ── 空狀態 ── */
.empty{padding:48px 24px; text-align:center; color:var(--muted); border:1px dashed var(--border-warm); border-radius:14px;}

/* ── 訊號中斷頁 ── */
.lost{min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--bg-dark-deep); color:var(--cool-50);}
.lost h1{color:#fff; font-weight:300; letter-spacing:4px; font-size:40px;}
.lost .morse-label{color:var(--cool-300);}

/* ── footer ── */
.footer{background:var(--charcoal-deep); color:#cfc4b3; margin-top:40px;}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:44px 24px; text-align:center;}
.footer-signal{display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.footer-brand{font-family:var(--serif); letter-spacing:2px; color:#e7dccb; margin:0 0 14px;}
.footer-links{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:16px;}
.footer-links a{color:#a99e8c; font-size:13px; letter-spacing:1px;}
.footer-links a:hover{color:var(--cool-300);}
.footer-end{font-family:var(--mono); font-size:11px; letter-spacing:3px; color:#8a8073; margin:0;}

/* ── 響應式 ── */
@media(max-width:860px){
  .nav-toggle{display:block;}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    gap:0; background:var(--warm-50); border-bottom:1px solid var(--border); padding:8px 0;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 24px; border-bottom:none;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .wish-wall{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .section{padding:48px 22px;} .hero-inner{padding:80px 22px 64px;}
}