/* 日日開口 視覺定版「現代和風・紺朱書卷」
   主色：勝色／紺色（深靛）｜重點：朱色｜底：生成り和紙｜文字：墨色｜成就：金茶（小面積）
   色票 token 正式名為 --kon 系列；--ai 系列僅作相容別名，不得在新樣式中優先使用。
   紋樣只用青海波（seigaiha）與麻の葉（asa-no-ha）幾何紋，極低透明度，只出現在主視覺與頁尾。 */
:root{
  --kon:#141C2E;
  --kon-2:#26365A;
  --kon-soft:#E8ECF3;
  --ai:var(--kon);
  --ai-2:var(--kon-2);
  --ai-soft:var(--kon-soft);
  --washi:#F7F3EA;
  --card:#FFFDF8;
  --shu:#E4572E;
  --sumi:#20242A;
  --hai:#68707D;
  --line:#DED6C6;
  --kincha:#C68A2E;
  --shu-soft:#FBE9E2;
  --kincha-soft:#F7ECD4;
  --grad:linear-gradient(92deg,#E4572E,#E8A33D);
  --font-serif:"Noto Serif CJK TC","Noto Serif CJK JP",serif;
  --font-sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-ja-serif:"Noto Serif CJK JP","Noto Serif CJK TC",serif;
  --font-ja-sans:"Noto Sans JP","Noto Sans TC",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--washi);color:var(--sumi);font-family:var(--font-sans);font-size:16px;line-height:1.75}
body:not(.admin-body){padding-bottom:76px}
img{max-width:100%}
a{color:var(--kon-2)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:680px}
h1,h2,h3,.serif{font-family:var(--font-serif);letter-spacing:.05em;line-height:1.45}
.ja,[lang="ja"]{font-family:var(--font-ja-sans)}
.ja-serif{font-family:var(--font-ja-serif)}
.nb{white-space:nowrap}
.note{font-size:13.5px;color:var(--hai);line-height:1.8}
.small{font-size:13px;color:var(--hai)}

/* 頁首 */
header.site{background:var(--kon);color:#F7F3EA;position:sticky;top:0;z-index:50}
.hbar{display:flex;align-items:center;gap:18px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:#F7F3EA;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:9px}
.bname{display:flex;flex-direction:column;line-height:1.25}
.bname b{font-family:var(--font-serif);font-size:19px;letter-spacing:.14em}
.bname small{font-size:11px;letter-spacing:.3em;color:#B9C4DA}
nav.main{display:flex;gap:16px;margin-left:12px}
nav.main a{color:#D9E2F2;text-decoration:none;font-size:14.5px;white-space:nowrap}
nav.main a:hover{color:#fff}
.hactions{margin-left:auto;display:flex;align-items:center;gap:12px;white-space:nowrap}
.hactions a{color:#F7F3EA;text-decoration:none;font-size:14.5px}
.nav-cta,.adm-entry{background:var(--grad);padding:7px 14px;border-radius:999px;font-weight:700}
.streak-chip{background:var(--kon-2);border:1px solid #3A4C77;padding:5px 11px;border-radius:999px;font-size:13px;color:#F7ECD4}

/* 主視覺與紋樣（只用主視覺與頁尾） */
.hero{position:relative;background:var(--kon);color:#F7F3EA;overflow:hidden}
.hero .wrap{position:relative;padding-top:48px;padding-bottom:48px;z-index:1}
.hero h1{font-size:32px;margin:0 0 12px}
.hero p{color:#C7D2E8;max-width:620px}
.pattern-hero::before,.pattern-foot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23F7F3EA' stroke-width='1.4'%3E%3Cpath d='M0 28a14 14 0 0 1 28 0 14 14 0 0 1 28 0'/%3E%3Cpath d='M-14 14a14 14 0 0 1 28 0 14 14 0 0 1 28 0 14 14 0 0 1 28 0'/%3E%3Cpath d='M0 28a7 7 0 0 1 14 0 7 7 0 0 1 14 0 7 7 0 0 1 14 0 7 7 0 0 1 14 0'/%3E%3C/g%3E%3C/svg%3E");}
.pattern-foot{position:relative}
/* 頁尾改純色收尾：麻の葉紋在深底上對比過強、搶眼，2026-11-03 Mars 指正後移除 */
.pattern-foot::before{display:none}
.tate{writing-mode:vertical-rl;letter-spacing:.35em;font-family:var(--font-serif);font-size:13px;color:#8FA1C4;position:absolute;right:26px;top:44px;z-index:1}

/* 印章完成標記 */
.hanko{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:5px;background:var(--shu);color:var(--washi);font-family:var(--font-ja-serif);font-size:17px;transform:rotate(-3deg);flex:none}
.hanko.big{width:44px;height:44px;font-size:22px}

/* 按鈕與訊息 */
.btn{display:inline-block;border:1px solid var(--kon);background:var(--kon);color:#fff;padding:11px 22px;border-radius:12px;font-size:15.5px;font-weight:700;text-decoration:none;cursor:pointer;line-height:1.4;text-align:center}
.btn.grad{background:var(--grad);border-color:transparent}
.btn.shu{background:var(--shu);border-color:var(--shu)}
.btn.ghost{background:var(--card);color:var(--kon);border-color:var(--line)}
.btn.light{background:#fff;color:var(--kon);border-color:#fff}
.btn.dark{background:var(--kon);color:#fff}
.btn.sm{padding:6px 13px;font-size:13.5px;border-radius:9px}
.btn[disabled]{opacity:.45;cursor:default}
.msg{border-radius:12px;padding:13px 16px;font-size:14.5px;line-height:1.7}
.msg.err{background:var(--shu-soft);border:1px solid var(--shu);color:#8F2E12}
.msg.ok{background:var(--kincha-soft);border:1px solid var(--kincha);color:#6d4c10}

/* 卡片與版式 */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:0 1px 10px rgba(20,28,46,.05)}
.grid{display:grid;gap:16px}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
section.blk{margin:52px 0}
.ptitle{font-size:27px;margin:30px 0 6px}
.psub{color:var(--hai);margin:0 0 20px}
.tag{display:inline-block;background:var(--kon-soft);color:var(--kon-2);border-radius:999px;padding:2.5px 11px;font-size:12.5px;font-weight:700}
.tag.shu{background:var(--shu-soft);color:#A83A1C}
.tag.kin{background:var(--kincha-soft);color:#7A5510}
.progressbar{height:8px;background:var(--kon-soft);border-radius:99px;overflow:hidden}
.progressbar i{display:block;height:100%;background:var(--grad);border-radius:99px}
.secttl{font-size:20px;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}

/* 表單 */
.frow{margin-bottom:16px}
.frow label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
.frow input[type=text],.frow input[type=email],.frow input[type=password],.frow input[type=date],.frow input[type=time],.frow input[type=number],.frow select,.frow textarea{width:100%;font-size:16px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--card);font-family:inherit}
.frow textarea{min-height:88px}
.frowrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checkline{display:flex;gap:9px;align-items:flex-start;font-size:14.5px}
.pwmatch{font-size:13px;margin-top:5px}
.pwmatch:empty{display:none}
.pwmatch.bad{color:#A83A1C}.pwmatch.good{color:#7A5510}
.pathpick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pathpick label{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card);cursor:pointer;display:block}
.pathpick label:has(input:checked){border-color:var(--kon);background:var(--kon-soft)}
.pathpick input{margin-right:7px}
.pathpick b{font-family:var(--font-serif);letter-spacing:.05em}
.pathpick span{display:block;font-size:13px;color:var(--hai);margin-top:4px;line-height:1.65}

/* 課程與句子 */
.ja-line{font-family:var(--font-ja-sans);font-size:19px;line-height:2.15}
.ja-line ruby rt{font-size:11px;color:var(--hai)}
.part{color:var(--shu);font-weight:700;cursor:pointer;border-bottom:1px dotted var(--shu)}
.sent{border-bottom:1px solid var(--line);padding:14px 0}
.sent:last-child{border-bottom:none}
.spkbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--kon);background:var(--card);color:var(--kon);cursor:pointer;vertical-align:middle;margin-left:8px;font-size:14px}
.spkbtn:hover{background:var(--kon);color:#fff}
.furi-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.furi-switch button{border:none;background:transparent;padding:7px 14px;font-size:13.5px;cursor:pointer;font-family:inherit}
.furi-switch button.on{background:var(--kon);color:#fff;font-weight:700}
.jobcard{background:var(--shu-soft);border:1px solid var(--shu);border-radius:12px;padding:12px 15px;font-size:14px;margin-top:10px}
.pitchline{display:flex;align-items:flex-end;gap:3px;height:30px;margin:6px 0}
.pitchline i{display:block;width:16px;background:var(--kon-2);border-radius:2px}
.pitchline i.drop{background:var(--shu)}
.pitchcurve{margin:8px 0 4px}
.pitchcurve .pitchline{margin-top:5px}
.wavebox{margin:10px 0 4px}
.wavebox canvas{display:block;width:100%;height:64px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.wavebox .wave-cap{font-size:12.5px;color:var(--hai);line-height:1.7;margin:4px 0 0}
.stepnav{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.stepnav .stp{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font-size:13.5px}
.stepnav .stp.on{background:var(--kon);color:#fff;border-color:var(--kon);font-weight:700}
.stepnav .stp.done{border-color:var(--kincha);color:#7A5510;background:var(--kincha-soft)}
.optbtn{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin:8px 0;font-size:15.5px;cursor:pointer;font-family:inherit;line-height:1.7}
.optbtn:hover{border-color:var(--kon-2)}
.optbtn.right{border-color:var(--kincha);background:var(--kincha-soft)}
.optbtn.wrong{border-color:var(--shu);background:var(--shu-soft)}
.feedback{border-radius:12px;padding:13px 16px;margin-top:12px;font-size:14.5px;line-height:1.8}
.feedback.good{background:var(--kincha-soft);border:1px solid var(--kincha)}
.feedback.bad{background:var(--shu-soft);border:1px solid var(--shu)}

/* 助詞燈號 */
.lamp{display:inline-block;width:13px;height:13px;border-radius:50%;vertical-align:middle;margin-right:6px;border:1px solid var(--line)}
.lamp.green{background:var(--kincha);border-color:var(--kincha)}
.lamp.yellow{background:#E8C87A;border-color:var(--kincha)}
.lamp.red{background:var(--shu);border-color:var(--shu)}
.lamp.off{background:#E4DFD2}
.particle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}

/* 五十音 */
.kana-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.kana-cell{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.kana-cell .k{font-family:var(--font-ja-serif);font-size:27px;line-height:1.3}
.kana-cell .r{font-size:12px;color:var(--hai)}

/* 語彙翻卡 */
.vcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 1px 10px rgba(20,28,46,.05)}
.vword{font-family:var(--font-ja-serif);font-size:34px;text-align:center;line-height:1.5}
.vrow{margin-top:15px;text-align:left}
.vrow .vlab{display:inline-block;background:var(--kon-soft);color:var(--kon-2);border-radius:999px;padding:2px 11px;font-size:12.5px;font-weight:700;margin-bottom:5px}
.vrow p{margin:0;line-height:1.85}
.vrow.alert{background:var(--shu-soft);border-radius:12px;padding:12px 14px}
.vrow.alert .vlab{background:var(--card);color:#A83A1C}

/* 方案 */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.plan-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column}
.plan-card .price{font-size:28px;font-weight:800;white-space:nowrap;font-family:var(--font-sans)}
.plan-cta{margin-top:auto;padding-top:14px}

/* 頁尾 */
footer.site{background:var(--kon);color:#C7D2E8;margin-top:64px;overflow:hidden}
footer.site .wrap{position:relative;z-index:1;padding-top:36px;padding-bottom:calc(24px + 68px + env(safe-area-inset-bottom, 0px))}
.flogo{display:flex;align-items:center;gap:10px;color:#F7F3EA;margin-bottom:20px}
.flogo img{width:36px;height:36px;border-radius:9px;flex:none;object-fit:contain}
.flogo .bname{min-width:0}
.fnav{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcol h3{color:#F7F3EA;font-size:15px;margin:0 0 8px}
.fcol a{display:block;color:#C7D2E8;text-decoration:none;font-size:14px;padding:5px 0;min-height:32px}
.fstate{font-size:12.5px;line-height:1.9;border-top:1px solid #33436B;padding-top:14px;margin-top:16px}
.flogout a{display:inline-block;border:1px solid #3A4C77;color:#F7F3EA;border-radius:999px;padding:8px 18px;text-decoration:none;font-size:14px}

/* 底部導覽 */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:var(--kon);display:flex;z-index:60;border-top:1px solid #33436B}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 10px;color:#93A5C4;text-decoration:none;font-size:12px}
.tabbar .tab svg{width:22px;height:22px}
.tabbar .tab.on{color:#F7ECD4}

/* 後台 */
.admnav{display:flex;gap:8px;flex-wrap:wrap;background:var(--kon);border-radius:14px;padding:12px 14px;margin:18px 0}
.admnav-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.admnav-gname{color:#8FA1C4;font-size:12px;letter-spacing:.15em;margin:0 2px}
.admnav-item{color:#D9E2F2;text-decoration:none;padding:7px 13px;border-radius:999px;font-size:14px;white-space:nowrap}
.admnav-item.on{background:var(--grad);color:#fff;font-weight:700}
.admnav-badge{background:#E8A33D;color:#141C2E;border-radius:99px;font-size:11px;padding:0 7px;margin-left:6px;font-weight:800}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.stat b{font-size:24px;display:block;line-height:1.3}
.stat span{font-size:13px;color:var(--hai)}
table.adm{width:100%;border-collapse:collapse;font-size:14px;background:var(--card)}
table.adm th,table.adm td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top;white-space:nowrap}
table.adm td.wrap{white-space:normal;min-width:180px}
.tbl-scroll{overflow-x:auto}
.urow{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 10px}
html[data-theme="dark"] .urow{background:#26365A;border-color:#3A4C77}
.urow-main{flex:1;min-width:0}
.urow-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.urow-name{font-size:16px}
.urow-until{margin-left:auto;font-weight:700;white-space:nowrap}
.urow-sub{color:var(--hai);font-size:13px;margin-top:3px;overflow-wrap:anywhere}
.urow-act{display:flex;gap:8px;align-items:center;flex:none;flex-wrap:wrap}
.urow-act form{display:flex;gap:6px;align-items:center}
.urow-act input[type="number"]{width:64px;font-size:14px;padding:5px}
.urow-act select{font-size:14px;padding:5px 6px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:inherit;font-family:inherit}
html[data-theme="dark"] .urow-act select{background:#141C2E;color:#F7F3EA;border-color:#3A4C77}
.badge{display:inline-block;border-radius:999px;padding:1.5px 10px;font-size:12px;font-weight:700}
.badge.ok{background:var(--kincha-soft);color:#7A5510}
.badge.warn{background:#FBE9C9;color:#7A5510}
.badge.off{background:#ECE8DC;color:var(--hai)}
.badge.info{background:var(--kon-soft);color:var(--kon-2)}
.badge.bad{background:var(--shu-soft);color:#A83A1C}
.filterform{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.filterform select,.filterform input{font-size:16px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.filterform select{min-width:220px}
.bar7{display:flex;gap:6px;align-items:flex-end;height:90px}
.bar7 .bcol{flex:1;text-align:center;font-size:11.5px;color:var(--hai)}
.bar7 .bar{background:var(--kon-2);border-radius:4px 4px 0 0;margin:0 auto;width:70%}

@media (max-width:900px){
  nav.main{display:none}
  .course-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:15.5px}
  section.blk{margin:38px 0}
  .hero .wrap{padding-top:38px;padding-bottom:42px}
  .hero h1{font-size:26px}
  .tate{display:none}
  .feats,.course-grid,.plans,.pathpick,.frowrow{grid-template-columns:1fr}
  .fnav{grid-template-columns:1fr;gap:26px}
  .fcol{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .fcol h3{grid-column:1/-1;margin-bottom:4px}
  .fcol a{display:flex;align-items:center;min-height:40px;padding:7px 0;line-height:1.4}
  .brand img{width:34px;height:34px;flex:none}
  .bname b{font-size:17px}
  .bname small{letter-spacing:.18em}
  .hbar{gap:10px}
  .hactions{gap:9px}
  .hactions a{font-size:14px}
  .nav-cta,.adm-entry{padding:7px 12px}
  .streak-chip{display:none}
  .card{padding:18px}
  .ja-line{font-size:18px}
  .filterform{flex-direction:column}
  .admnav{flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:14px;padding:14px}
  .admnav-group{flex-wrap:wrap;gap:6px;align-items:stretch}
  .admnav-gname{flex:0 0 100%;margin:0 0 2px}
  .admnav-item{flex:1 1 30%;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:8px 6px;background:var(--kon-2);border-radius:12px}
  .tbl-scroll:has(>table.cards){overflow:visible}
  table.cards{display:block;background:transparent}
  table.cards tbody{display:block}
  table.cards tr{display:block}
  table.cards tr:first-child{display:none}
  table.cards tr:not(:first-child){display:flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:0 0 12px}
  html[data-theme="dark"] table.cards tr:not(:first-child){background:#26365A;border-color:#3A4C77}
  table.cards td{display:flex;flex:1 1 42%;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1px;white-space:normal;border:0;padding:5px 10px 5px 0;text-align:left;overflow-wrap:anywhere}
  table.cards td::before{content:attr(data-th);flex:none;color:var(--hai);font-size:12px;letter-spacing:.06em;text-align:left}
  table.cards td.wrap,table.cards td[data-th=""]{flex-basis:100%}
  table.cards td[data-th=""]{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
  table.cards td[data-th=""]::before{display:none}
  .urow{flex-direction:column;align-items:stretch}
  .urow-act{justify-content:flex-start}
}

/* ===== C4 組三：質感型科技感（深色模式／微互動／全站搜尋） =====
   深色覆寫只用色票與本檔既有色值，不新增任何顏色：
   底 --kon #141C2E、卡面 --kon-2 #26365A、線 #33436B／#3A4C77（頁首頁尾既有邊線色）、
   主文字 #F7F3EA（--washi）、次文字 #C7D2E8／#93A5C4（主視覺與頁尾既有文字色）、
   --shu／--kincha／--grad 不變。主視覺與頁尾本來就是深色，不覆寫。 */

[hidden]{display:none!important}
/* 頁首圖示鈕（搜尋／主題切換） */
.hiconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid #3A4C77;background:transparent;color:#F7F3EA;cursor:pointer;flex:none;padding:0}
.hiconbtn:hover{background:var(--kon-2)}
.hiconbtn svg{width:19px;height:19px}
.hiconbtn .icon-sun{display:none}
html[data-theme="dark"] .hiconbtn .icon-sun{display:block}
html[data-theme="dark"] .hiconbtn .icon-moon{display:none}

/* 頁首搜尋列（展開時獨立一列、全寬，不擠壓品牌列） */
.searchbar{border-top:1px solid #33436B;padding:12px 0 14px}
.searchform{display:flex;gap:10px}
.searchform input{flex:1;min-width:0;font-size:16px;padding:11px 13px;border:1px solid #3A4C77;border-radius:11px;background:var(--washi);color:var(--sumi);font-family:inherit}
.search-suggest{background:var(--card);color:var(--sumi);border:1px solid var(--line);border-radius:12px;margin-top:10px;padding:8px;box-shadow:0 8px 24px rgba(20,28,46,.14)}
.sg-group{font-size:12.5px;font-weight:700;color:var(--hai);letter-spacing:.12em;padding:8px 10px 2px}
.sg-item{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:9px;color:var(--sumi);text-decoration:none;line-height:1.5}
.sg-item:hover,.sg-item:focus{background:var(--kon-soft)}
.sg-title{font-size:15px}
.sg-sub{font-size:13px;color:var(--hai)}
.sg-empty{padding:10px;font-size:14px;color:var(--hai)}
.search-results .sg-item{display:block}

/* 卡片按壓回饋（克制：120ms 微縮放與陰影收斂） */
.card{transition:transform 120ms ease,box-shadow 120ms ease}
.card:active{transform:scale(.99);box-shadow:0 1px 4px rgba(20,28,46,.08)}

/* 骨架屏工具類（深淺色皆可讀；底與掃光都用既有色票變數） */
.skel{border-radius:10px;background:linear-gradient(100deg,var(--kon-soft) 40%,var(--card) 50%,var(--kon-soft) 60%);background-size:200% 100%;animation:jp-shimmer 1.2s linear infinite;min-height:14px}
.skel-line{height:14px;margin:8px 10px}
.skel-line.short{width:55%}
@keyframes jp-shimmer{from{background-position:180% 0}to{background-position:-20% 0}}

/* 完成印章蓋印動畫（celebrate.js 只在本次完成操作後掛上 .stamp-in） */
.hanko.stamp-in{animation:jp-stamp .45s ease-out}
@keyframes jp-stamp{0%{transform:scale(2.2) rotate(5deg);opacity:0}60%{transform:scale(.92) rotate(-4deg);opacity:1}100%{transform:scale(1) rotate(-3deg);opacity:1}}
#jp-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:300}

[data-countup]{font-variant-numeric:tabular-nums}

/* 深色模式（勝色夜版）：變數覆寫 */
html[data-theme="dark"]{
  --washi:#141C2E;
  --card:#26365A;
  --sumi:#F7F3EA;
  --hai:#C7D2E8;
  --line:#33436B;
  --kon-soft:#33436B;
  --shu-soft:#33436B;
  --kincha-soft:#33436B;
}
/* 深色模式：寫死淺色值的元件逐一覆寫（色值皆為本檔既有值） */
html[data-theme="dark"] a{color:#C7D2E8}
html[data-theme="dark"] .btn{border-color:#3A4C77}
html[data-theme="dark"] .btn.grad{border-color:transparent}
html[data-theme="dark"] .btn.shu{border-color:var(--shu)}
html[data-theme="dark"] .btn.ghost{background:var(--card);color:#F7F3EA;border-color:#3A4C77}
html[data-theme="dark"] .tag{color:#C7D2E8}
html[data-theme="dark"] .tag.shu{color:#FBE9E2}
html[data-theme="dark"] .tag.kin{color:#F7ECD4}
html[data-theme="dark"] .msg.err{color:#FBE9E2}
html[data-theme="dark"] .msg.ok{color:#F7ECD4}
html[data-theme="dark"] .frow input[type=text],html[data-theme="dark"] .frow input[type=email],html[data-theme="dark"] .frow input[type=password],html[data-theme="dark"] .frow input[type=date],html[data-theme="dark"] .frow input[type=time],html[data-theme="dark"] .frow input[type=number],html[data-theme="dark"] .frow select,html[data-theme="dark"] .frow textarea{background:#141C2E;color:#F7F3EA;border-color:#3A4C77}
html[data-theme="dark"] .frow input::placeholder,html[data-theme="dark"] .frow textarea::placeholder{color:#93A5C4}
html[data-theme="dark"] .filterform select,html[data-theme="dark"] .filterform input{background:#141C2E;color:#F7F3EA;border-color:#3A4C77}
html[data-theme="dark"] .pathpick label{background:#26365A}
html[data-theme="dark"] .furi-switch{background:#141C2E;border-color:#3A4C77}
html[data-theme="dark"] .furi-switch button{color:#F7F3EA}
html[data-theme="dark"] .furi-switch button.on{background:#33436B}
html[data-theme="dark"] .spkbtn{background:#141C2E;color:#F7F3EA;border-color:#C7D2E8}
html[data-theme="dark"] .spkbtn:hover{background:#C7D2E8;color:#141C2E}
html[data-theme="dark"] .optbtn{background:#141C2E;color:#F7F3EA;border-color:#3A4C77}
html[data-theme="dark"] .stepnav .stp{background:#26365A;color:#F7F3EA;border-color:#3A4C77}
html[data-theme="dark"] .stepnav .stp.on{background:#33436B;border-color:#33436B}
html[data-theme="dark"] .stepnav .stp.done{color:#F7ECD4}
html[data-theme="dark"] .kana-cell{background:#26365A}
html[data-theme="dark"] table.adm{background:#26365A}
html[data-theme="dark"] .wavebox canvas{background:#141C2E;border-color:#3A4C77}
html[data-theme="dark"] .pitchline i{background:#C7D2E8}
html[data-theme="dark"] .pitchline i.drop{background:var(--shu)}
html[data-theme="dark"] .vrow .vlab{color:#C7D2E8}
html[data-theme="dark"] .vrow.alert .vlab{background:#141C2E;color:#FBE9E2}
html[data-theme="dark"] .badge.ok{color:#F7ECD4}
html[data-theme="dark"] .badge.info{color:#C7D2E8}
html[data-theme="dark"] .badge.bad{color:#FBE9E2}
html[data-theme="dark"] .badge.off{background:#33436B;color:#C7D2E8}
html[data-theme="dark"] .pwmatch.bad{color:#FBE9E2}
html[data-theme="dark"] .pwmatch.good{color:#F7ECD4}
html[data-theme="dark"] .bar7 .bar{background:#C7D2E8}

@media (max-width:640px){
  .hiconbtn{width:34px;height:34px}
  .searchform .btn{flex:none}
}
@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .card:active{transform:none}
  .skel{animation:none}
  .hanko.stamp-in{animation:none}
}

/* ===== C6 美感升級（2026-11-03）：節奏修繕／主視覺圖像／節氣條／日文微文案 =====
   色值只用定版色票與本檔既有深底色（#33436B／#3A4C77／#8FA1C4／#C7D2E8／#93A5C4）。 */

/* 頁標日文小標（型態甲改橫式 kicker：雜誌式眉題，不再用浮置縱書） */
.kicker{display:block;font-family:var(--font-ja-serif);font-size:13px;letter-spacing:.35em;color:var(--hai);margin-top:30px}
.kicker + .ptitle{margin-top:8px}
/* 節標日文副標（型態乙）與空狀態／完成句的日文行 */
.secttl .jp-sub,.dash-ptitle .jp-sub{font-family:var(--font-ja-sans);font-size:14px;font-weight:400;letter-spacing:.06em;color:var(--hai);margin-left:10px;white-space:nowrap}
.jp-line{font-family:var(--font-ja-sans);margin:0 0 4px}
.jp-line.big{font-size:17px;margin-bottom:6px}

/* 課程卡：內容直向撐滿、按鈕列釘底（G6，比照 .plan-cta 模式） */
.course-grid > .card{display:flex;flex-direction:column}
.course-grid > .card .btnrow{margin-top:auto;padding-top:14px}

/* 二十四節氣條（頁首帶，全站共用；資料驅動 includes/sekki_data.php） */
.sekki-strip{background:var(--card);border-bottom:1px solid var(--line);font-size:13.5px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding:8px max(20px,calc(50% - 540px))}
.sekki-strip p{margin:0}
.sekki-strip__label{font-size:11.5px;letter-spacing:.25em;color:var(--hai);font-family:var(--font-ja-serif)}
.sekki-strip__kanji{font-family:var(--font-ja-serif);font-size:16.5px;letter-spacing:.12em;color:var(--sumi)}
.sekki-strip__kana{color:var(--hai);font-size:12px;margin-left:6px}
.sekki-strip__date{color:var(--hai);font-size:12px}
.sekki-strip__greeting{font-family:var(--font-ja-sans);color:var(--sumi)}
.sekki-strip__note{color:var(--hai);font-size:12.5px}
.sekki-strip--tint-kon{box-shadow:inset 3px 0 0 var(--kon)}
.sekki-strip--tint-kon-2{box-shadow:inset 3px 0 0 var(--kon-2)}
.sekki-strip--tint-shu{box-shadow:inset 3px 0 0 var(--shu)}
.sekki-strip--tint-kincha{box-shadow:inset 3px 0 0 var(--kincha)}
.sekki-strip--tint-washi{box-shadow:inset 3px 0 0 var(--line)}

/* 主視覺圖像版式（首頁）：左文右圖，圖為原創和紙書卷靜物 */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:38px;align-items:center}
.hero-fig{margin:0;border-radius:16px;overflow:hidden;border:1px solid #3A4C77;box-shadow:0 10px 34px rgba(0,0,0,.28)}
.hero-fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:74% 50%;aspect-ratio:16/10.2}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:22px}
  .hero-fig img{aspect-ratio:16/9}
}
/* 麻の葉紋（節氣 pattern=asanoha 時，hero 改用此紋；同青海波的低透明度規格） */
.pattern-asanoha::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cg fill='none' stroke='%23F7F3EA' stroke-width='1.1'%3E%3Cpath d='M28 2 54 46H2Z'/%3E%3Cpath d='M28 2v44M28 2 15 24M28 2l13 22M15 24h26M15 24 2 46M41 24l13 22M15 24l13 22M41 24 28 46'/%3E%3C/g%3E%3C/svg%3E");}

/* 專區頁首圖（橫幅，版心內） */
.pagebanner{margin:20px 0 4px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.pagebanner img{display:block;width:100%;height:208px;object-fit:cover}
@media (max-width:640px){.pagebanner{margin-top:16px}.pagebanner img{height:128px}}

/* 專區錨點導覽列（發音專區用；敬語頁 .keigo-nav 同型） */
.pagenav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.pagenav a{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 15px;font-size:14px;text-decoration:none;color:var(--sumi);min-height:40px;display:inline-flex;align-items:center}
.pagenav a:hover{border-color:var(--kon)}

/* 發音專區：音調詞卡改兩欄（S7），手機回單欄 */
#pitchList{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#pitchList .card{margin-bottom:0}
@media (max-width:760px){#pitchList{grid-template-columns:1fr}}

/* 頁尾一期一会小字（F-01） */
.fichigo{font-size:12.5px;line-height:1.9;margin-top:10px;color:#93A5C4}
.fichigo .ichigo{font-family:var(--font-ja-serif);letter-spacing:.3em;color:#C7D2E8;font-size:13.5px}

/* 深色模式 C6 補強：tag 語意改以文字＋邊框分工（G3）、按鈕分離度（G3/S14）、節氣條 */
html[data-theme="dark"] .tag{border:1px solid #3A4C77}
html[data-theme="dark"] .tag.shu{border-color:var(--shu)}
html[data-theme="dark"] .tag.kin{border-color:var(--kincha)}
html[data-theme="dark"] .btn.dark{border-color:#8FA1C4}
html[data-theme="dark"] .btn.light{background:var(--card);color:#F7F3EA;border-color:#3A4C77}
html[data-theme="dark"] .pathpick label:has(input:checked){background:#33436B;border-color:#C7D2E8}
html[data-theme="dark"] .pitch-filter button{background:#141C2E;color:#F7F3EA;border-color:#3A4C77}
html[data-theme="dark"] .pitch-filter button.on{background:var(--kon-2);color:#F7ECD4;border-color:var(--kincha)}
html[data-theme="dark"] .sekki-strip__kanji,html[data-theme="dark"] .sekki-strip__greeting{color:#F7F3EA}

/* C7 付費自然化：升級提示、鎖定卡、體驗倒數、方案對照表 */
.nudge{position:relative;margin-top:16px;padding:14px 40px 14px 16px;border:1px solid var(--line,#33436B);border-left:4px solid #C68A2E;border-radius:10px;background:var(--card,#fff)}
.nudge p{margin:0}
.nudge .nudge-x{position:absolute;top:6px;right:8px;margin:0}
.nudge-xbtn{background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:inherit;opacity:.55;padding:4px 6px}
.nudge-xbtn:hover{opacity:1}
.cx-lock{border-left:4px solid #E4572E}
.dash-trialtag{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;background:#C68A2E;color:#141C2E;font-size:13px;font-weight:700;vertical-align:middle}
table.cmp{width:100%;border-collapse:collapse;margin-top:12px}
table.cmp th,table.cmp td{border:1px solid var(--line,#33436B);padding:8px 10px;text-align:left;vertical-align:top}
table.cmp th{background:var(--kon-2,#1B2740);color:#F7F3EA}
.tbl-scroll{overflow-x:auto}

/* ===== C8 第一組：旅程地圖＋御朱印帳（2026-11-04） =====
   色值只用定版色票變數；紋樣沿用既有青海波／麻の葉 data-uri、極低透明度，只作路線區點綴。 */
.journey-summary{margin-top:6px}
.journey-route{position:relative}
.journey-route::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cg fill='none' stroke='%23141C2E' stroke-width='1.1'%3E%3Cpath d='M28 2 54 46H2Z'/%3E%3Cpath d='M28 2v44M28 2 15 24M28 2l13 22M15 24h26M15 24 2 46M41 24l13 22M15 24l13 22M41 24 28 46'/%3E%3C/g%3E%3C/svg%3E");}
.journey-route > *{position:relative}
.jroute-track{display:block;width:100%;height:auto;margin:2px 0 14px}
.jroute-line{stroke:var(--line);stroke-width:2}
.jdot{fill:var(--kon-2)}
.jdot-done{fill:var(--kincha)}
.jdot-progress{fill:var(--shu)}
.jdot-locked{fill:var(--hai)}
.jstations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.jstation{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;min-width:0}
.jstation-dot{flex:none;width:15px;height:15px;border-radius:50%;border:2px solid var(--kon-2);background:var(--card);margin-top:7px}
.jstation.is-done .jstation-dot{background:var(--kincha);border-color:var(--kincha)}
.jstation.is-progress .jstation-dot{background:var(--shu);border-color:var(--shu)}
.jstation.is-locked{opacity:.82}
.jstation.is-locked .jstation-dot{border-color:var(--hai);background:var(--kon-soft)}
.jstation-main{min-width:0;flex:1}
.jstation-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0}
.jstation-state{font-size:12.5px;font-weight:700}
.jstation-state.state-done{color:var(--kincha)}
.jstation-state.state-progress{color:var(--shu)}
.jstation-state.state-locked{color:var(--hai)}
.jstation-title{font-size:17.5px;margin:7px 0 4px;line-height:1.5}
.jstation-title a{color:var(--sumi);text-decoration:none}
.jstation-title a:hover{text-decoration:underline}
.jstation-act{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* 御朱印帳 */
.stamp-summary{margin-top:6px}
.stamp-count{font-size:19px;margin:0 0 10px}
.stamp-count b{font-size:26px;color:var(--kincha)}
.stamp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.stamp{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--sumi);min-width:0}
.stamp-seal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;background:var(--card);border:2px solid var(--shu);border-radius:10px;padding:16px 10px 14px;min-height:132px;position:relative}
.stamp-seal::after{content:"";position:absolute;inset:5px;border:1px solid var(--shu);border-radius:6px;opacity:.55;pointer-events:none}
.stamp-path{font-size:12px;letter-spacing:.22em;color:var(--shu);font-weight:700}
.stamp-title{font-family:var(--font-serif);font-size:15px;line-height:1.55;letter-spacing:.03em}
.stamp-hanko{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--shu);color:var(--washi);font-family:var(--font-ja-serif);font-size:14px;transform:rotate(-3deg)}
.stamp-date{font-size:12.5px;color:var(--hai);text-align:center}
.stamp.is-empty .stamp-seal{border:1.5px dashed var(--line);background:transparent}
.stamp.is-empty .stamp-seal::after{display:none}
.stamp.is-empty .stamp-path{color:var(--hai)}
.stamp.is-empty .stamp-title{color:var(--hai)}
@media (max-width:640px){
  .jstations{grid-template-columns:1fr}
  .jstation{border-left:3px solid var(--line)}
  .jstation.is-done{border-left-color:var(--kincha)}
  .jstation.is-progress{border-left-color:var(--shu)}
  .stamp-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stamp-seal{min-height:118px;padding:12px 8px 11px}
  .stamp-title{font-size:13.5px}
}