/* 낚시터 화면(결정 BC 2026-09-28, BC4 새 파일). 본문 한 열(AP1 D4 --content-w 600px). 새 색값 없이 공용 토큰만 쓴다.
   등급색: 흔함 = --grade-common, 드묾 = --grade-uncommon, 귀함 = --grade-rare, 전설 = --grade-legendary, 상자 = --gold, 잡동사니 = --muted.
   형광 녹(--phos)은 쓰지 않는다(결정 AQ1). 움직임은 prefers-reduced-motion이면 없앤다.
   결정 BS② 2단계(2026-09-29): 글자·간격·줄 간격 = 역할 토큰(옛 별칭·대체값 제거), 카드 설명 줄 → 카드 제목 옆 ⓘ(.tw-fs-hrow). */
/* 카드 제목·요약 한 줄 + 옆 ⓘ(helpTip은 제목·문단 밖 형제). 44px 누름 영역은 세로 여백을 먹지 않게 겹친다 */
.tw-fs-hrow { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.tw-fs-hrow > :first-child { min-width: 0; }
.tw-fs-hrow > .tw-tip { flex: none; margin-block: calc(-1 * var(--sp-3)); }
.tw-fs-bigmark { color: var(--gold); vertical-align: -0.125em; }   /* 대어 표시 선 아이콘(옛 글자 기호 별) */
.tw-fs { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-fs-card { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-fs-h { margin: 0; font-size: var(--fs-strong); color: var(--fg-2); }
.tw-fs-sub { margin: 0; font-size: var(--fs-body); color: var(--fg); overflow-wrap: anywhere; }
.tw-fs-intro { margin: 0; color: var(--muted); font-size: var(--fs-body); }
.tw-fs-why { margin: 0; font-weight: 700; color: var(--warn); }
.tw-fs-band { margin: 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-fs-kv { min-width: 0; }
.tw-fs-kv dd { overflow-wrap: anywhere; }
.tw-fs-cd { font-variant-numeric: tabular-nums; }
.tw-fs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); min-width: 0; }
.tw-fs-list > li { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-body); }
.tw-fs-list small { color: var(--muted); }
.tw-fs-list .is-off { opacity: .7; }
.tw-fs-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.tw-fs-row2 .tw-btn { min-width: 0; white-space: normal; }

/* 등급 글자색 */
.tw-fs-g { font-weight: 700; }
.tw-fs-g.is-common { color: var(--grade-common); }
.tw-fs-g.is-uncommon { color: var(--grade-uncommon); }
.tw-fs-g.is-rare { color: var(--grade-rare); }
.tw-fs-g.is-legend { color: var(--grade-legendary); }
.tw-fs-g.is-chest { color: var(--gold); }
.tw-fs-g.is-junk { color: var(--muted); font-weight: 400; }

/* 낚시 기운 막대(라니스 풍족도 자리) */
.tw-gauge.fishing progress::-webkit-progress-value { background: var(--info); }
.tw-gauge.fishing progress::-moz-progress-bar { background: var(--info); }

/* 낚기 */
.tw-fs-float { margin: 0; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); text-align: center;
  font-size: var(--fs-strong); font-weight: 700; color: var(--fg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-2); overflow: hidden; }
.tw-fs-float.is-idle { font-weight: 400; color: var(--muted); }
.tw-fs-float.is-bite { color: var(--bad); border-width: 2px; border-color: var(--bad); }
.tw-fs-float.is-late { font-weight: 400; color: var(--warn); }
.tw-fs-ftext { overflow-wrap: anywhere; }
/* 수면 그림(검토 B): 잔물결 + 찌. 대기면 찌가 흔들리고, 입질이면 가라앉은 찌가 빨갛게 채워져 커진다. 움직임 줄이기 설정이면 멈춘다.
   결정 BS② 2단계(BS4): 찌는 글자 기호(◦·●) 대신 CSS 직각 네모(빈 칸 = 떠 있음, 채운 칸 = 입질 — 모양·색 두 가지로 구분, 글자 안내 줄이 함께 바뀐다). */
.tw-fs-water { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-strong); line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.tw-fs-wave { color: var(--info); opacity: .75; }
.tw-fs-bob { display: inline-block; width: .6em; height: .6em; border: 2px solid currentColor; border-radius: 50%; background: transparent; color: var(--fg-2); font-size: var(--fs-section); }
.tw-fs-float.is-wait .tw-fs-bob { animation: tw-fs-bob 1.1s ease-in-out infinite alternate; }
.tw-fs-float.is-wait .tw-fs-wave { animation: tw-fs-wave 2.2s ease-in-out infinite alternate; }
.tw-fs-float.is-bite .tw-fs-bob { color: var(--bad); background: currentColor; font-size: var(--fs-bignum); transform: translateY(3px); }
.tw-fs-float.is-bite .tw-fs-wave { color: var(--bad); opacity: 1; }
.tw-fs-float.is-late .tw-fs-bob, .tw-fs-float.is-idle .tw-fs-bob { color: var(--muted); }
@keyframes tw-fs-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes tw-fs-wave { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
.tw-fs-cast > .tw-btn.is-primary { min-height: 52px; font-size: var(--fs-strong); font-weight: 700; }
.tw-fs-pity { margin: 0; font-size: var(--fs-sub); color: var(--fg); }
.tw-fs-pity b { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-fs-prob { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-3); }
.tw-fs-prob > div { display: flex; justify-content: space-between; gap: var(--sp-2); }

/* 결과(AW) */
.tw-fs-hero { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3); text-align: center; background: transparent; }
.tw-fs-hero__name { margin: 0; font-size: var(--fs-section); overflow-wrap: anywhere; }
.tw-fs-hero__name small { display: block; font-size: var(--fs-sub); color: var(--muted); margin-top: var(--sp-1); }
.tw-fs-hero__note { margin: var(--sp-2) 0 0; font-weight: 700; color: var(--fg-2); }
.tw-fs-hero__grade { margin: 0 0 var(--sp-1); font-size: var(--fs-card); font-weight: 700; letter-spacing: var(--ls-card); color: var(--muted); }
.tw-fs-hero.is-uncommon { border-color: var(--grade-uncommon); }
.tw-fs-hero.is-uncommon .tw-fs-hero__grade { color: var(--grade-uncommon); }
.tw-fs-hero.is-rare .tw-fs-hero__grade { color: var(--grade-rare); }
.tw-fs-hero.is-legend .tw-fs-hero__grade { color: var(--grade-legendary); }
.tw-fs-hero.is-chest .tw-fs-hero__grade { color: var(--gold); }
.tw-fs-hero.is-rare { border-color: var(--grade-rare); }
.tw-fs-hero.is-legend { border-color: var(--grade-legendary); }
.tw-fs-hero.is-chest { border-color: var(--gold); }
.tw-fs-hero.is-legend-fx { border-width: 2px; }   /* 결정 CN1: 옛 빛 번짐(깜빡이는 그림자) 없음 — 전설은 2px 전설색 선만 */
.tw-fs-gain { margin: 0; font-weight: 700; color: var(--ok); overflow-wrap: anywhere; }
.tw-fs-loglist { margin: 0; padding-left: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-sub); }
.tw-fs-loglist time { color: var(--muted); margin-right: var(--sp-1); font-variant-numeric: tabular-nums; }
.tw-fs-loglist li { overflow-wrap: anywhere; }
/* 기록 줄 등급 표시(검토 B → 결정 CR15): 여러 줄의 색 세로선 대신 이름 글자 색·굵기로 드묾 이상·상자를 훑어 찾게 한다(등급색 이름은 .tw-fs-g). */
.tw-fs-loglist li.is-g-rare, .tw-fs-loglist li.is-g-legend { font-weight: 700; }
.tw-fs-loglist li.is-g-legend { color: var(--fg-2); }
/* 직전 결과(다시 열었을 때) */
.tw-fs-prev { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-1); }
.tw-fs-prev.is-uncommon { border-color: var(--grade-uncommon); }   /* 결정 CN: 왼쪽 색 띠 → 외곽선 색 */
.tw-fs-prev.is-rare { border-color: var(--grade-rare); }
.tw-fs-prev.is-legend { border-color: var(--grade-legendary); }
.tw-fs-prev.is-chest { border-color: var(--gold); }
.tw-fs-prev .tw-hint { margin: 0; }
.tw-fs-prev__text { margin: 0; font-size: var(--fs-body); color: var(--fg-2); overflow-wrap: anywhere; }

/* 어망 */
.tw-fs-pick { display: flex; gap: var(--sp-2); align-items: flex-start; min-height: 44px; cursor: pointer; }
.tw-fs-pick input { width: 20px; height: 20px; margin-top: var(--sp-1); flex: none; }
.tw-fs-pick > span { min-width: 0; display: grid; }
.tw-fs-pick small { font-size: var(--fs-sub); }

/* 주간 어장 일지(가로 선 위 10칸, 좁으면 5칸 두 줄) */
.tw-fs-jbar { width: 100%; height: 8px; }
.tw-fs-nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--sp-1); }
.tw-fs-node { display: grid; justify-items: center; gap: var(--sp-1); text-align: center; min-width: 0; }
.tw-fs-node__dot { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-chip); font-size: var(--fs-cap);
  font-weight: 700; color: var(--muted); background: transparent; }
.tw-fs-node small { font-size: var(--fs-cap); color: var(--muted); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.tw-fs-node.is-paid .tw-fs-node__dot { color: var(--accent); border-color: var(--accent); }   /* 받은 칸 = 인디고 선·글자(채움 없음, CN2) */
.tw-fs-node.is-next .tw-fs-node__dot { border: 2px solid var(--info); color: var(--fg-2); }
@media (max-width: 520px) { .tw-fs-nodes { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: var(--sp-2); } }

/* 교환소 */
.tw-fs-tokens { font-size: var(--fs-bignum); color: var(--gold); font-variant-numeric: tabular-nums; }
.tw-fs-prod { display: grid; gap: var(--sp-1); padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.tw-fs-prod:first-child { border-top: 0; }
.tw-fs-prod small { display: block; }
.tw-fs-prod__act { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tw-fs-price { font-weight: 700; color: var(--gold); }
.tw-fs-prod.is-owned { opacity: .75; }

/* 어획 기록 */
.tw-fs-spot > summary small { color: var(--muted); margin-left: var(--sp-1); }

@media (prefers-reduced-motion: reduce) { .tw-fs-hero.is-legend-fx, .tw-fs-float .tw-fs-bob, .tw-fs-float .tw-fs-wave { animation: none; } }