/*
課程行事曆頁（template-calendar.php）專用樣式。
獨立於 style.css（首頁用），因為來源設計稿 calendar.html 的 class 命名與部分數值
（如 .day 最小高度／字級）跟首頁內嵌行事曆區塊不完全相同，避免強行合併造成視覺跑掉。
:root token 與 style.css 重複定義是刻意的——兩份樣式表各自獨立可用，不互相依賴載入順序。
*/

:root{
  --paper:#F7F3ED; --cream:#FFFDF9; --sage-bg:#EDF0E8; --sage-bg-2:#E3E8DC;
  --ink:#33362E; --ink-soft:#565B4E; --ink-faint:#84887A;
  --sage:#7F8F6F; --sage-deep:#5F7052;
  --caramel:#B8754C; --caramel-deep:#9C5F3A;
  --warm:#EFD9C4; --moss:#55624B;
  --line:#DFD9CC; --shadow:51 54 46;
  --ok:#6E8B5E; --full:#B0603F; --done:#9A968A;
  --maxw:1080px;
  --serif:"Noto Serif TC","Songti TC","Source Han Serif TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --latin:"Avenir Next","Futura","Century Gothic",var(--sans);
}

:root{color-scheme:light}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:17.5px; line-height:1.9; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
h1,h2,h3{font-family:var(--serif); font-weight:900; margin:0; letter-spacing:.015em}
p{margin:0}
button{font-family:var(--sans)}

.kicker{font-family:var(--latin); font-size:13px; font-weight:700; letter-spacing:.32em;
  text-transform:uppercase; color:var(--caramel); margin-bottom:14px}

.top{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--cream) 92%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{font-family:var(--serif); font-weight:900; font-size:19px; color:var(--ink); text-decoration:none}
.brand small{font-family:var(--latin); font-weight:700; font-size:11px; letter-spacing:.24em; color:var(--ink-faint); margin-left:8px}

/* ---- 日之窗 識別（2026.08）---- */
.logo{height:46px; width:auto; display:block}
@media(max-width:520px){ .logo{height:38px} }

.head{background:var(--cream); padding:56px 0 46px; border-bottom:1px solid var(--line)}
.head h1{font-size:clamp(32px,4.6vw,46px); line-height:1.4}
.head p{margin-top:16px; color:var(--ink-soft); max-width:36em; font-size:18px}

.main{display:grid; grid-template-columns:1.25fr .75fr; gap:34px; padding:48px 0 72px; align-items:start}
@media(max-width:900px){ .main{grid-template-columns:1fr} }

/* ------- calendar ------- */
.cal{background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:26px 26px 20px;
  box-shadow:0 20px 48px -28px rgba(var(--shadow),.4)}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.cal-title{font-family:var(--serif); font-weight:900; font-size:24px}
.cal-title small{font-family:var(--latin); font-weight:700; font-size:12px; letter-spacing:.2em; color:var(--ink-faint); display:block}
.cal-nav{display:flex; gap:8px}
.cal-nav button{width:40px; height:40px; border-radius:10px; border:1.5px solid var(--line); background:none;
  color:var(--ink); font-size:17px; cursor:pointer; font-weight:700}
.cal-nav button:hover{border-color:var(--caramel); color:var(--caramel-deep)}
.dow, .grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.dow{margin-bottom:8px}
.dow span{text-align:center; font-size:13px; font-weight:700; color:var(--ink-faint); letter-spacing:.1em}
.day{position:relative; min-height:64px; border-radius:10px; padding:7px 8px; font-size:14.5px; font-weight:600;
  color:var(--ink-soft); background:transparent; border:1px solid transparent}
.day.other{opacity:.32}
.day.today{border-color:var(--sage); background:var(--sage-bg)}
.day.has{cursor:pointer; background:var(--cream); border-color:var(--line)}
.day.has:hover{border-color:var(--caramel); transform:translateY(-1px)}
.day .ev{display:block; margin-top:5px; font-size:11.5px; font-weight:700; line-height:1.35;
  padding:2px 6px; border-radius:6px; color:#fff; background:var(--sage-deep);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.day .ev.full{background:var(--full)} .day .ev.done{background:var(--done)}
@media(max-width:640px){
  .day{min-height:46px; padding:5px 6px}
  .day .ev{font-size:0; padding:0; height:7px; width:7px; border-radius:99px; margin:6px auto 0}
}
.cal-foot{display:flex; gap:18px; margin-top:16px; padding-top:14px; border-top:1.5px dashed var(--line);
  font-size:13.5px; color:var(--ink-soft); flex-wrap:wrap}
.cal-foot i{display:inline-block; width:10px; height:10px; border-radius:99px; margin-right:6px; font-style:normal}
.lg-ok{background:var(--sage-deep)} .lg-full{background:var(--full)} .lg-done{background:var(--done)}

/* ------- upcoming list ------- */
.up h2{font-size:22px; margin-bottom:16px}
.card{background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:20px 22px; cursor:pointer;
  transition:transform .15s, border-color .2s}
.course-card + .course-card{margin-top:14px}
.card-share{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--ink-soft);font:700 13px var(--sans);letter-spacing:.04em;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.card-share:hover{border-color:var(--sage);background:var(--sage-bg);color:var(--sage-deep)}
.card-share:focus-visible{outline:3px solid rgba(184,117,76,.35);outline-offset:3px}
.card:hover{transform:translateY(-2px); border-color:var(--caramel)}
.card .date{font-family:var(--latin); font-weight:800; font-size:13px; letter-spacing:.12em; color:var(--caramel)}
.card h3{font-size:19px; margin-top:6px; line-height:1.5; font-weight:700}
.card .meta{margin-top:8px; font-size:14.5px; color:var(--ink-soft); display:flex; gap:14px; flex-wrap:wrap}
.badge{display:inline-block; font-size:12.5px; font-weight:700; padding:3px 12px; border-radius:999px; color:#fff; margin-top:10px}
.b-ok{background:var(--ok)} .b-full{background:var(--full)} .b-done{background:var(--done)} .b-tba{background:var(--ink-faint)}
.empty{background:var(--sage-bg); border:1.5px dashed var(--sage); border-radius:14px; padding:28px; text-align:center;
  color:var(--ink-soft); font-size:16px}

/* ------- modal ------- */
.ovl{position:fixed; inset:0; background:rgba(30,30,24,.45); display:none; z-index:50;
  align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px)}
.ovl.show{display:flex}
.modal{background:var(--cream); border-radius:18px; max-width:520px; width:100%; max-height:88vh; overflow:auto;
  padding:34px 36px; border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(0,0,0,.4)}
.modal .date{font-family:var(--latin); font-weight:800; font-size:13.5px; letter-spacing:.12em; color:var(--caramel)}
.modal h3{font-size:26px; margin-top:8px; line-height:1.45}
.m-meta{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.m-meta li{display:grid; grid-template-columns:58px 1fr; gap:14px; font-size:16px; align-items:baseline}
.m-meta .lb{font-family:var(--latin); font-size:11px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage-deep); padding-top:3px}
.m-desc{margin-top:18px; padding-top:18px; border-top:1.5px dashed var(--line); color:var(--ink-soft);
  font-size:16px; white-space:pre-wrap}
.m-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; border:none; cursor:pointer;
  font-size:16px; font-weight:700; padding:13px 26px; border-radius:10px; letter-spacing:.03em}
.btn-primary{background:var(--caramel); color:#FFFDF9}
.btn-primary:hover{background:var(--caramel-deep)}
.btn-primary[aria-disabled="true"]{background:var(--done); cursor:not-allowed}
.btn-ghost{background:none; border:2px solid var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--sage)}

.lede{color:var(--ink-soft); font-size:18px; line-height:2.05}
.accent{color:var(--sage-deep)}
.nav{display:flex; gap:30px; font-size:16px; font-weight:600}
.nav a{text-decoration:none; color:var(--ink-soft); padding:6px 0; border-bottom:2.5px solid transparent; transition:.2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); border-color:var(--caramel)}
@media(max-width:760px){ .nav{display:none} }

/* ---------- mobile menu ---------- */
.menu-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; padding:10px; position:relative; z-index:50;
  -webkit-tap-highlight-color:transparent;
}
.menu-toggle span{
  display:block; width:22px; height:2px; background:var(--ink);
  border-radius:2px; transition:.3s; position:relative;
}
.menu-toggle span::before,
.menu-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:var(--ink);
  border-radius:2px; position:absolute; transition:.3s;
}
.menu-toggle span::before{top:-7px}
.menu-toggle span::after{top:7px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

@media(max-width:760px){
  .menu-toggle{display:flex; align-items:center; justify-content:center}
  .top:has(.nav.open){backdrop-filter:none; -webkit-backdrop-filter:none}
  .nav.open{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    position:fixed; inset:0; z-index:40;
    background:color-mix(in srgb, var(--cream) 97%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    gap:6px; animation:navFadeIn .25s ease;
  }
  .nav.open a{
    font-size:20px; font-weight:700; padding:16px 0; color:var(--ink);
    border-bottom:none; letter-spacing:.04em;
  }
  .nav.open a:hover,.nav.open a:active{color:var(--caramel)}
  @keyframes navFadeIn{from{opacity:0}to{opacity:1}}
}
#calmain,#about{scroll-margin-top:88px}
.about{padding:8px 0 64px}
.about h2{font-size:clamp(26px,3.6vw,36px); line-height:1.5}
.about .lede{margin-top:18px; max-width:40em}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
@media(max-width:800px){ .work-grid{grid-template-columns:1fr} }
.work-card{background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:28px 26px}
.work-card .no{font-family:var(--latin); font-size:13.5px; font-weight:800; letter-spacing:.26em; color:var(--caramel)}
.work-card h3{font-size:20px; margin-top:12px; line-height:1.6; font-weight:700}
.work-card p{margin-top:10px; color:var(--ink-soft); font-size:16px; line-height:1.95}
.site-foot{background:var(--ink); color:#D9D4C4; padding:34px 0; margin-top:40px; font-size:15px}
.site-foot .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
.site-foot a{color:#EDEAE0; font-weight:700; text-decoration:none}
.site-foot a:hover{color:var(--caramel)}
.demo-note{margin-top:10px; text-align:center; font-size:13px; color:var(--ink-faint); padding-bottom:40px}

/* ---------- 候補名單表單 ---------- */
.anohi-waitlist{margin-top:28px; max-width:34em}
.anohi-waitlist-form{display:flex; gap:12px; flex-wrap:wrap; align-items:stretch}
.anohi-waitlist-form input[type=text],.anohi-waitlist-form input[type=email]{
  flex:1 1 190px; min-width:0;
  padding:13px 20px; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.3;
  background:var(--cream); color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.anohi-waitlist-form input[type=email]{flex-grow:1.4}
.anohi-waitlist-form input::placeholder{color:var(--ink-faint); font-weight:400}
.anohi-waitlist-form input:focus{border-color:var(--caramel); outline:none; box-shadow:0 0 0 3px rgba(184,117,76,.15)}
.anohi-waitlist-form button{border:1.5px solid transparent; cursor:pointer; flex:0 0 auto; white-space:nowrap; line-height:1.3}
@media(max-width:520px){ .anohi-waitlist-form button{flex:1 0 100%} }
.anohi-waitlist-msg{padding:16px 20px; border-radius:10px; font-size:16px; font-weight:600; max-width:36em}
.anohi-waitlist-msg--ok{background:var(--sage-bg); color:var(--sage-deep); border:1.5px solid var(--sage)}
.anohi-waitlist-msg--err{background:#FBEAE5; color:var(--caramel-deep); border:1.5px solid var(--caramel)}

/* 2026-09-13：手作課程卡片與行事曆可及性 */
.card-photo{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:10px; margin:0 0 14px}
.card:focus-visible,.day.has:focus-visible{outline:3px solid var(--caramel); outline-offset:3px}
.m-actions [hidden]{display:none}
@media(max-width:640px){.modal{padding:26px 22px}.m-actions{gap:10px}.m-actions .btn{width:100%; justify-content:center}}


/* ANOHI shared home footer 2026-09-21 */
footer{background:var(--ink);color:#EDEAE0;padding:64px 0 36px;margin-top:40px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:44px}
@media(max-width:720px){footer .wrap{grid-template-columns:1fr}}
.foot-logo{height:58px;width:auto;display:block}
footer .fl{color:#BEB9A9;margin-top:16px;font-size:16.5px;max-width:28em;line-height:2}
.ft-nav{display:flex;flex-direction:column;gap:12px;font-size:16.5px;font-weight:600}
.ft-nav a{color:#D9D4C4;text-decoration:none}
.ft-nav a:hover{color:var(--caramel)}
.ft-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:24px;font-size:14px;color:#918C7C;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}