/* 霧光玻璃 · 海鹽珊瑚。疊在 editorial.css、studio.css 之上：只改配色、圓角、玻璃與動態。 */
:root {
  --ink: #22302f;
  --accent: #b04f3c;
  --accent-hover: #963f2f;
  --muted: #5d6a69;
  --meta: #606b6a;
  --paper: #f3f6f6;
  --white: #fbfdfd;
  --line: #d5e0df;
  --tint: #e6efee;
  --glow-1: #cde6e6;
  --glow-2: #f6d4c9;
  --glow-3: #f1e6c4;
  --shadow: 0 20px 50px -30px #3f555466;
  --glass: #ffffff8c;
  --glass-edge: #ffffffcc;
  --r-lg: 32px;
  --r-md: 22px;
  --r-sm: 14px;
}
html { scrollbar-color: #a9b6b5 var(--paper); }
body { background: var(--paper); overflow-x: hidden; }
::selection { background: var(--glow-2); color: var(--ink); }
h1, h2, h3 { font-weight: 600; }

/* 背景柔光 */
.mist { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mist i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7; }
.mist i:nth-child(1) { width: 46vw; height: 46vw; background: var(--glow-1); left: -10vw; top: -10vw; }
.mist i:nth-child(2) { width: 40vw; height: 40vw; background: var(--glow-2); right: -8vw; top: 22vh; }
.mist i:nth-child(3) { width: 36vw; height: 36vw; background: var(--glow-3); left: 30vw; bottom: -14vw; }

/* 玻璃面 */
.site-header, .page-hero, .home-hero, .enquiry-band, .site-footer,
.tuner, .metronome, .longtone, .fingering, .cards, .contact-builder, .practice-sheet,
.advisor-result, .assessment-result, .glass {
  background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
}

/* 頁頭：膠囊 */
.site-header { top: 12px; margin: 12px clamp(12px, 3vw, 40px) 0; min-height: 72px; padding: 10px 14px 10px 24px; border-radius: 999px; }
.brand strong { font-weight: 600; color: var(--ink); }
.main-nav a { color: var(--muted); }
.main-nav a:hover, .main-nav a[aria-current=page] { color: var(--accent); }
.main-nav .nav-enquiry { margin-left: 4px; padding: 9px 20px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; }
.main-nav .nav-enquiry:hover { background: var(--accent-hover); color: #fff; }

/* 按鈕：膠囊珊瑚 */
.btn { border-radius: 999px; border-color: var(--line); background: #ffffffaa; color: var(--ink); padding-inline: 28px; }
.btn:hover { background: #fff; border-color: var(--accent); color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 24px -14px var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn[aria-pressed=true] { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn:disabled:hover { background: #ffffffaa; border-color: var(--line); }
.btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.text-link { color: var(--accent); }

/* 一般頁首 */
.page-hero { width: min(var(--measure), calc(100% - var(--gutter)*2)); margin-top: 28px; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px); border-radius: var(--r-lg); }
.page-hero h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.45; letter-spacing: .04em; }
.page-hero h1 + p, .page-hero p { color: var(--muted); }

.band + .band { border-top: 0; }

/* 首頁 */
.home-hero { margin-top: 28px; padding: 0; border-radius: 40px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; }
.home-hero .hero-copy { display: block; padding: clamp(40px, 8vh, 88px) clamp(28px, 4vw, 60px); align-self: center; }
.home-hero .hero-copy h1 { writing-mode: horizontal-tb; height: auto; margin: 0 0 18px; font-size: clamp(32px, 4vw, 56px); line-height: 1.32; letter-spacing: .03em; text-wrap: balance; word-break: keep-all; justify-self: auto; }
.home-hero .hero-copy h1 span { display: block; }
.home-hero .hero-copy h1 span + span { margin: 0; color: var(--accent); }
.home-hero .hero-copy p { max-width: 460px; margin: 0 0 8px; font-size: 16px; color: var(--muted); }
.home-hero .hero-copy .hero-credit { margin: 18px 0 0; color: var(--meta); font-size: 13px; }
.home-hero .hero-actions { margin-top: 26px; gap: 12px; }
.home-hero .hero-actions .btn { padding: 12px 28px; min-height: 48px; border: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #ffffffaa; }
.home-hero .hero-actions .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.home-hero .hero-actions .btn.primary:hover { background: var(--accent-hover); }
.home-hero > .editorial-figure { grid-column: 2; grid-row: 1; align-self: stretch; position: relative; min-height: 460px; padding: 0; border: 0; background: none; }
.home-hero > .editorial-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento > * { position: relative; overflow: hidden; min-height: 210px; padding: 26px; border-radius: 28px; color: var(--ink); text-decoration: none; }
.bento h3 { margin: 0 0 4px; font-size: 21px; line-height: 1.6; }
.bento p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--muted); }
.bento .s2 { grid-column: span 2; } .bento .s3 { grid-column: span 3; } .bento .s4 { grid-column: span 4; }
.bento .pic { display: flex; align-items: flex-end; padding: 0; min-height: 280px; color: #fff; }
.bento .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.bento .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, #22302fb8); }
.bento .pic > div { position: relative; z-index: 1; padding: 22px 24px; }
.bento .pic h3 { color: #fff; }
.bento .pic p { color: #ffffffe0; }
.bento .pic:hover img { transform: scale(1.04); }
.bento a.glass:hover h3 { color: var(--accent); }
.bento .num { display: block; font: 600 clamp(44px, 5vw, 64px)/1 var(--serif); color: var(--accent); margin-bottom: 12px; }
.bento .shot { display: block; width: 100%; margin-top: 14px; border-radius: var(--r-sm); aspect-ratio: 16/9; object-fit: cover; object-position: top; }
.bento .label { display: inline-block; margin-bottom: 14px; font: 12px/1 var(--sans); letter-spacing: .14em; color: var(--accent); }
.ring { position: relative; width: 76px; height: 76px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #b04f3c40; }
.ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); clip-path: inset(0 0 50% 50%); }
.ring b { font: 600 22px var(--serif); color: var(--accent); }
.beat { display: flex; gap: 8px; height: 76px; align-items: center; margin-bottom: 14px; }
.beat span { width: 14px; height: 14px; border-radius: 50%; background: #b04f3c33; }
.beat span:first-child { width: 18px; height: 18px; }
.keys { display: flex; flex-direction: column; gap: 6px; height: 76px; justify-content: center; margin-bottom: 14px; }
.keys span { width: 18px; height: 10px; border-radius: 6px; border: 1.5px solid var(--ink); }
.keys span.on { background: var(--ink); }

/* 卡片類 */
.route-list { border-top: 0; display: grid; gap: 12px; }
.route-list > a { padding: 26px 30px; border: 1px solid var(--glass-edge); border-radius: var(--r-md); background: var(--glass); box-shadow: var(--shadow); }
.route-list > a:hover { border-color: #fff; }
.route-list span { text-decoration: none; }
.page-home .band:has(.route-list) { display: block; }
.page-home .band:has(.route-list) > h2 { writing-mode: horizontal-tb; justify-self: start; margin: 0 0 26px; }
.course-index .editorial-figure img, .card-image img, .split figure img, .work-figure img, .product-shot img, .teacher-intro > img, .article-body .editorial-figure img, .article-diagram img { border-radius: var(--r-md); }
.journal-card { padding: 14px 14px 22px; border-radius: 26px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.journal-card .card-content { padding: 0 8px; }
.card-image { margin-bottom: 18px; overflow: hidden; border-radius: var(--r-md); }
.card-image img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.journal-card:hover .card-image img { transform: scale(1.04); }
.journal-grid { gap: 22px; }
.topic-list { gap: 14px; }
.topic-list a { padding: 24px 26px; border: 1px solid var(--glass-edge); border-radius: var(--r-md); background: var(--glass); }
.resource-directory article, .practice-timeline > div, .teaching-columns > * { border-top: 0; padding: 26px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--glass-edge); }
.journal-entry-paths { padding: 26px 28px; border: 1px solid var(--glass-edge); border-radius: var(--r-md); background: var(--glass); }
.journal-entry-links a { border-top-color: var(--line); }
.faq-list details { padding: 22px 28px; margin-bottom: 12px; border: 1px solid var(--glass-edge); border-radius: var(--r-md); background: var(--glass); }
.faq-list details:last-child { border-bottom: 1px solid var(--glass-edge); }
.faq-list summary::before, .faq-list summary::after { right: 0; }
.work-list { border-top: 0; gap: 16px; }
.work-item { padding: 28px; border: 1px solid var(--glass-edge); border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--shadow); }
.home-tools { border-top: 0; gap: 12px; }
.home-tools a, .home-tools a + a { padding: 24px; border: 1px solid var(--glass-edge); border-radius: var(--r-md); background: var(--glass); }
.choice-card { border-radius: var(--r-sm); background: #ffffff80; }
.choice-card:has(input:checked) { border-color: var(--accent); background: #fff; }
.advisor-result, .assessment-result, .practice-sheet, .contact-builder { border-radius: var(--r-md); }
.learning-steps li::marker { color: var(--accent); }
input:not([type=checkbox]):not([type=radio]), textarea, select { border-color: #a9b6b5; border-radius: 12px; background: #fff; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.search-form > div { border-bottom-color: #a9b6b5; }
.search-form button, .pagination button { border-radius: 999px; background: #ffffffaa; }
.pagination button[aria-current=page] { background: var(--accent); border-color: var(--accent); }
.pagination button:disabled { background: transparent; }
.blog-filters button[aria-pressed=true] { color: var(--accent); }
table { border-radius: var(--r-sm); overflow: hidden; }
th, td { border-color: var(--line); }
th { background: var(--tint); }
.article-side { border-top-color: var(--line); }
.article-end, .related-band { border-top-color: var(--line); }

/* 工具面板 */
.tuner, .metronome, .longtone, .fingering, .cards { border-radius: var(--r-lg); }
.trainer, .fingering-staff, .note-row button { border-radius: var(--r-sm); }
.note-row button { background: #ffffffb0; }
.note-row button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); }
.metro-dots span.on { background: var(--ink); }
.metro-tempo input[type=range] { accent-color: var(--accent); }
.fingering-svg .fk.is-on { fill: var(--ink); }

/* 查詢區與頁尾 */
.enquiry-band { padding: clamp(30px, 4vw, 48px) clamp(24px, 4vw, 52px); border-radius: var(--r-lg); }
.site-footer { margin: 64px clamp(12px, 3vw, 40px) 16px; padding: 56px clamp(24px, 5vw, 64px) 26px; border-radius: var(--r-lg); }
.site-footer .footer-title { font-weight: 600; }
.copyright { border-top-color: var(--line); }

/* 動態：只在允許動態時加入 */
@media (prefers-reduced-motion: no-preference) {
  .mist i { animation: mist-drift 22s ease-in-out infinite alternate; }
  .mist i:nth-child(2) { animation-delay: -8s; }
  .mist i:nth-child(3) { animation-delay: -14s; }
  @keyframes mist-drift { 50% { transform: translate(6vw, 4vh) scale(1.08); } 100% { transform: translate(-4vw, 8vh) scale(.95); } }
  .js [data-r] { opacity: 0; transform: translateY(18px); transition: opacity .3s ease-out, transform .3s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
  .js [data-r].in { opacity: 1; transform: none; }
  .home-hero > .editorial-figure img { clip-path: inset(0 0 0 100%); animation: wipe 1.1s .3s cubic-bezier(.65,0,.35,1) forwards; }
  @keyframes wipe { to { clip-path: inset(0); } }
  .ring::after { animation: ring-spin 4s linear infinite; }
  @keyframes ring-spin { to { transform: rotate(360deg); } }
  .beat span { animation: beat 3.333s steps(1) infinite; }
  .beat span:nth-child(2) { animation-delay: .833s; } .beat span:nth-child(3) { animation-delay: 1.666s; } .beat span:nth-child(4) { animation-delay: 2.5s; }
  @keyframes beat { 0% { background: var(--accent); } 25% { background: #b04f3c33; } }
  .btn { transition: transform .16s ease-out, background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out; }
  .btn:active { transform: scale(.97); }
  .tilt { transition: transform .2s ease-out; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .page-hero, .home-hero, .enquiry-band, .site-footer, .glass, .journal-card, .route-list > a { background: #fbfdfd; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (max-width: 920px) {
  .site-header { min-height: 64px; padding: 8px 10px 8px 18px; }
  .main-nav { top: calc(100% + 8px); left: 0; right: 0; border-radius: var(--r-md); border: 1px solid var(--glass-edge); background: #fbfdfdf2; box-shadow: var(--shadow); }
  .main-nav .nav-enquiry { margin-top: 10px; text-align: center; justify-content: center; }
  .home-hero { grid-template-columns: 1fr; }
  .home-hero > .editorial-figure { grid-column: 1; grid-row: 2; min-height: 300px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .s2, .bento .s3, .bento .s4 { grid-column: span 2; }
  .bento .half { grid-column: span 1; }
}
@media (max-width: 680px) {
  .site-header { margin-inline: 10px; }
  .home-hero { margin-top: 18px; border-radius: 30px; }
  .home-hero .hero-copy { padding: 34px 24px 30px; }
  .home-hero .hero-copy h1 { font-size: 31px; }
  .home-hero > .editorial-figure { min-height: 240px; }
  .page-hero { margin-top: 18px; padding: 32px 24px; border-radius: 26px; }
  .page-hero h1 { font-size: 28px; }
  .bento > * { min-height: 0; padding: 22px; border-radius: 24px; }
  .bento .pic { min-height: 220px; }
  .bento .half { grid-column: span 2; }
  .route-list > a, .topic-list a, .faq-list details, .work-item { padding: 22px; }
  .journal-entry-paths { padding: 22px; }
  .site-footer { margin-inline: 10px; padding: 40px 22px 22px; }
  .enquiry-band { padding: 30px 22px; }
}
@media print {
  .mist { display: none; }
  .site-header, .page-hero, .home-hero, .journal-card { background: none; box-shadow: none; backdrop-filter: none; border: 0; }
}

/* 主選單子選單（2026-10-24） */
.nav-item { position: relative; display: flex; align-items: center; }
.sub-toggle { display: inline-grid; place-items: center; width: 26px; height: 40px; margin-left: 1px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.sub-toggle:hover, .has-sub.open .sub-toggle { color: var(--accent); }
.sub-toggle svg { transition: transform 180ms var(--ease-settle, ease); }
.has-sub.open .sub-toggle svg { transform: rotate(180deg); }
.sub { position: absolute; top: calc(100% + 14px); left: 50%; z-index: 5; display: flex; gap: 32px; padding: 20px 26px 18px; background: #fbfdfdf7; border: 1px solid var(--glass-edge); border-radius: var(--r-md); box-shadow: 0 24px 60px -28px #3f555480; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-sub.open .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) and (min-width: 921px) { .has-sub:hover .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .has-sub:hover .sub-toggle svg { transform: rotate(180deg); } }
.sub-col { display: flex; flex-direction: column; min-width: 128px; }
.sub-title { margin: 0 0 6px; font-size: 12px; letter-spacing: .14em; color: var(--meta); }
.main-nav .sub a { padding: 7px 0; font-size: 14px; color: var(--ink); letter-spacing: .04em; }
.main-nav .sub a::after { display: none; }
.main-nav .sub a:hover, .main-nav .sub a:focus-visible { color: var(--accent); }
@media (max-width: 920px) {
  .nav-item { flex-wrap: wrap; }
  .nav-item > a { flex: 1; }
  .sub-toggle { width: 44px; height: 44px; }
  .sub { position: static; display: none; width: 100%; flex-direction: column; gap: 10px; padding: 0 4px 12px 14px; margin: 0; background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .sub::before { display: none; }
  .has-sub.open .sub { display: flex; transform: none; }
  .main-nav .sub a { font-size: 15px; padding: 8px 4px; }
}
@media (prefers-reduced-motion: reduce) { .sub, .sub-toggle svg { transition: none; } }
@media (max-width: 920px) { .main-nav { background: var(--white); } }
.brand img { width: 58px; height: auto; }
@media (max-width: 680px) { .brand img { width: 48px; } }
.journal-grid.noimg .card-image { display: none; }

/* 文章目錄與長文 */
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.article-side { max-height: calc(100vh - 140px); overflow-y: auto; }
.article-side a { margin-bottom: 12px; line-height: 1.6; }
.article-side a[aria-current="true"] { color: var(--accent); }
.article-heading h1 { text-wrap: balance; }
.article-side .side-course { margin-top: 20px; color: var(--muted); }
.article-body h3 { margin: 32px 0 10px; font-size: 20px; line-height: 1.7; }
.article-body ul, .article-body ol { margin: 0 0 24px; padding-left: 1.4em; }
.article-body li { margin-bottom: 8px; }
@media (max-width: 820px) {
  .article-side { max-height: none; overflow: visible; display: block; padding: 18px 20px; border: 1px solid var(--glass-edge); border-radius: var(--r-md); background: var(--glass); }
  .article-side p { margin-bottom: 10px; }
  .article-side a { display: flex; align-items: center; min-height: 44px; margin: 0; font-size: 16px; }
  .article-side .side-course { margin-top: 6px; }
}