/* 元鴻茶間 — 風味輪樣式 */

.fw{ --fw-ink:#231f1a; --fw-paper:#fffdf7; --fw-line:rgba(68,95,76,.16); }

.fw-stage{ position:relative; max-width:640px; margin-inline:auto; }
.fw-svg{ width:100%; height:auto; display:block; overflow:visible; }

/* 輪盤底的紙感陰影 */
.fw-ground{
  fill:rgba(31,46,33,.05);
  filter:blur(1px);
}

/* 中心 */
.fw-hub-bg{ fill:var(--fw-paper); filter:drop-shadow(0 2px 10px rgba(31,46,33,.10)); }
.fw-hub-ring{ fill:none; stroke:rgba(68,95,76,.18); stroke-width:1; }
.fw-hub-tx{
  font-family:"Noto Serif TC",serif; font-weight:600;
  fill:#2f4337; letter-spacing:.06em;
}

/* 大類環 */
.fw-cat{
  opacity:.46; cursor:pointer; outline:none;
  transition:opacity .3s cubic-bezier(.22,.61,.36,1);
  stroke:var(--fw-paper); stroke-width:1.2;
}
.fw-cat:hover{ opacity:.74; }
.fw-cat.open{ opacity:.88; }
.fw-cat:focus-visible{ stroke:#231f1a; stroke-width:2.4; }

/* 大類名（沿弧線的 textPath） */
.fw-cat-tx{
  font-family:"Noto Serif TC",serif; font-size:15px; font-weight:600;
  fill:#fffdf7; letter-spacing:.22em; pointer-events:none;
  paint-order:stroke; stroke:rgba(35,31,26,.2); stroke-width:2.2;
}

/* 大類線條圖示 */
.fw-ico{ pointer-events:none; opacity:.78; }
.fw-ico *{
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* 外圈詞彙 */
.fw-term{
  opacity:.15; cursor:pointer; outline:none;
  transition:opacity .3s cubic-bezier(.22,.61,.36,1);
  stroke:var(--fw-paper); stroke-width:.6;
}
.fw-term.open{ opacity:.3; }
.fw-term:hover{ opacity:.62; }
.fw-term.hit{ opacity:.88; }
.fw-term.hit:hover{ opacity:1; }
.fw-term:focus-visible{ stroke:#231f1a; stroke-width:2; }

/* 外圈標籤：字 + 引線 + 圓點 */
.fw-term-tx{
  font-family:"Noto Sans TC",sans-serif; font-size:11.5px;
  fill:rgba(35,31,26,.52); letter-spacing:.05em; pointer-events:none;
}
.fw-term-tx.hit{ fill:#2f4337; font-weight:500; font-size:12.5px; }
.fw-leader{ stroke-width:1; opacity:.4; }
.fw-leader.hit{ opacity:.75; }
.fw-dot{ opacity:.5; }
.fw-dot.hit{ opacity:.95; }

/* 標籤群組錯落淡入（transition-delay 由 JS 逐一給） */
.fw-lb{
  opacity:0;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1);
}
.fw-lb.fw-in{ opacity:1; }

/* 收合的大類：頂部色票扇（依群組細切的馬賽克） */
.fw-fan-t{
  opacity:.5; pointer-events:none;
  stroke:var(--fw-paper); stroke-width:.8;
}
.fw-fan-t.alt{ opacity:.68; }
.fw-fan-t.hit{ opacity:.94; }
.fw-fan{
  fill:transparent; cursor:pointer; outline:none;
  stroke:var(--fw-paper); stroke-width:1.2;
  pointer-events:all;
}
.fw-fan:focus-visible{ stroke:#231f1a; stroke-width:2.4; }

/* 葉片標記：本款具備的風味 */
.fw-leaf{
  filter:drop-shadow(0 1px 2px rgba(31,46,33,.28));
}
.fw-leaf-g .fw-leaf{
  transform-box:fill-box; transform-origin:center;
  transform:scale(.3) rotate(-40deg);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1);
}
.fw-leaf-g.fw-in .fw-leaf{ transform:scale(1) rotate(0deg); }

/* 環境漂浮葉片 */
.fw-amb{
  opacity:.32;
  transform-box:fill-box; transform-origin:center;
  animation:fw-drift 12s ease-in-out infinite alternate;
}
@keyframes fw-drift{
  0%  { transform:translateY(-5px) rotate(-10deg); }
  100%{ transform:translateY(7px)  rotate(12deg); }
}

/* 詳情氣泡 */
.fw-tip{
  position:absolute; right:0; top:50%; translate:0 -50%;
  background:var(--fw-paper); border:1px solid var(--fw-line);
  border-left:3px solid var(--c,#445f4c);
  border-radius:12px; padding:12px 16px; min-width:132px;
  box-shadow:0 8px 26px rgba(31,46,33,.13);
  pointer-events:none;
}
.fw-tip b{ display:block; font-family:"Noto Serif TC",serif; font-size:1.02rem; color:#2f4337; }
.fw-tip span{ display:block; margin-top:.35em; font-size:.74rem; color:rgba(35,31,26,.5); letter-spacing:.05em; }
.fw-tip em{
  display:inline-block; margin-top:.6em; font-style:normal;
  font-size:.7rem; letter-spacing:.08em; color:#fffdf7;
  background:var(--c,#445f4c); padding:.24em .7em; border-radius:999px;
}

/* 圖例 */
.fw-legend{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin-top:clamp(18px,2.6vw,28px);
}
.fw-chip{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em 1em; border-radius:999px; cursor:pointer;
  border:1px solid var(--fw-line); background:var(--fw-paper);
  font-size:.85rem; letter-spacing:.05em; color:rgba(35,31,26,.66);
  transition:all .3s cubic-bezier(.22,.61,.36,1);
}
.fw-chip i{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 9px; }
.fw-chip em{
  font-style:normal; font-size:.7rem; color:#fffdf7;
  background:var(--c); min-width:17px; text-align:center;
  padding:.1em .4em; border-radius:999px;
}
.fw-chip:hover{ border-color:var(--c); color:#231f1a; }
.fw-chip.on{ background:var(--c); border-color:var(--c); color:#fffdf7; }
.fw-chip.on i{ background:#fffdf7; }
.fw-chip.on em{ background:rgba(255,253,247,.26); }

/* 螢幕閱讀器替代文字 */
.fw-sr{
  margin-top:1.2em; text-align:center;
  font-size:.84rem; color:rgba(35,31,26,.5); line-height:1.9;
}
.fw-err{ text-align:center; color:rgba(35,31,26,.38); font-size:.88rem; padding:40px 0; }

@media (max-width:640px){
  .fw-tip{ position:static; translate:none; margin-top:14px; }
  .fw-term-tx{ font-size:10.5px; }
  .fw-term-tx.hit{ font-size:11.5px; }
}

@media (prefers-reduced-motion: reduce){
  .fw-cat,.fw-term,.fw-chip{ transition:none; }
  .fw-lb{ transition:none; opacity:1; }
  .fw-leaf-g .fw-leaf{ transition:none; transform:none; }
  .fw-amb{ animation:none; }
}