/* XPOWER WEB管理 */
:root {
  --navy: #0b1f3a;
  --ink: #1b2430;
  --muted: #6b7684;
  --line: #dde3ea;
  --bg: #f3f6f9;
  --card: #fff;
  --jet: #0a6fd6;
  --jet-bg: #e3f0fd;
  --boat: #e8730c;
  --boat-bg: #fdeedd;
  --seastyle: #0e8a7e;
  --w38: #7a3db8;
  --warn: #d42a2a;
  --today: #fff7d6;
  --sun: #d63a3a;
  --sat: #2a62c9;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
}
a { color: var(--jet); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eef1f4; padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 20px 0 10px; }
h3 { font-size: 13px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }

/* ---------- header ---------- */
header.site {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--navy); color: #fff; padding: 8px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; }
.brand:hover { text-decoration: none; }
.brand img { height: 32px; width: auto; background: #fff; border-radius: 4px; padding: 2px; }
header.site nav { display: flex; gap: 4px; flex-wrap: wrap; }
header.site nav a { color: #cfd9e6; padding: 6px 10px; border-radius: 6px; }
header.site nav a:hover, header.site nav a.on { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.lang-switch { display: inline-flex; margin-left: 6px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; overflow: hidden; }
header.site nav .lang-switch a { border-radius: 0; padding: 4px 8px; font-size: 12px; }
header.site nav .lang-switch a.on { background: #fff; color: var(--navy); }
main { padding: 16px; max-width: 1500px; margin: 0 auto; }

/* ---------- common ---------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.panel.narrow { max-width: 440px; margin: 40px auto; }
.panel.form-panel { max-width: 760px; margin: 0 auto 16px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h1 { margin: 0; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.flash-ok { background: #e4f6ea; color: #1d6b38; }
.flash-err { background: #fde8e8; color: #a51f1f; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px;
  padding: 7px 14px; font: inherit; cursor: pointer; white-space: nowrap; min-height: 36px;
}
.btn:hover { background: #f0f3f6; text-decoration: none; }
.btn.primary { background: var(--jet); border-color: var(--jet); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #075db5; }
.btn.danger { color: var(--warn); border-color: #f1c0c0; }
.btn.small { padding: 4px 10px; min-height: 28px; font-size: 12px; }
.btn.big { padding: 10px 24px; font-size: 16px; }
.btn.icon { font-size: 20px; padding: 2px 12px; line-height: 1; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; }
.tag-admin { background: #ede7fb; color: #5b3cc4; }

/* ---------- forms ---------- */
.form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-weight: 600; font-size: 13px; }
.form input, .form select, .form textarea {
  font: inherit; font-weight: 400; font-size: 16px; padding: 9px 10px; border: 1px solid #c9d2dc; border-radius: 8px; width: 100%; background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--jet); outline-offset: -1px; border-color: var(--jet); }
.form label.check { flex-direction: row; align-items: center; }
.form label.check input { width: auto; }
.form.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.form.inline label { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 12px; }
.form-actions .danger { margin-left: auto; }

.seg-radio { display: flex; gap: 8px; margin-bottom: 12px; }
.seg-radio label { flex: 1; margin: 0; position: relative; }
.seg-radio input { position: absolute; top: 0; left: 0; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; }
.seg-radio span {
  display: block; text-align: center; padding: 10px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 700; background: #fff;
}
.seg-radio.big span { font-size: 17px; padding: 14px; }
.seg-radio input:focus-visible + span { outline: 2px solid var(--ink); }
.seg-radio .cat-jet input:checked + span { background: var(--jet); border-color: var(--jet); color: #fff; }
.seg-radio .cat-boat input:checked + span { background: var(--boat); border-color: var(--boat); color: #fff; }
.seg-radio .own-rental input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.seg-radio .own-own input:checked + span { border-color: var(--navy); color: var(--navy); background: #e9eef5; }
.seg-radio .own-seastyle input:checked + span { background: var(--seastyle); border-color: var(--seastyle); color: #fff; }
.seg-radio .own-w38 input:checked + span { background: var(--w38); border-color: var(--w38); color: #fff; }

.tide-hint { background: #f4f8fc; border: 1px dashed #b9cde3; border-radius: 8px; padding: 8px 12px; margin: -4px 0 14px; font-size: 13px; }
.tide-hint:empty { display: none; }
.hint-win.cat-jet b { color: var(--jet); }
.hint-win.cat-boat b { color: var(--boat); }
.hint-warn { color: var(--warn); font-weight: 700; }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.list th { font-size: 12px; color: var(--muted); }
table.list tr.inactive td { color: #aab2bc; }
table.list tr.editing td { background: #f7fafd; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: .02em; border: 2px solid; line-height: 1; flex: none;
}
.badge.cat-jet { border-color: var(--jet); }
.badge.cat-boat { border-color: var(--boat); }
.badge.cat-jet { background: var(--jet); color: #fff; }
.badge.cat-boat { background: var(--boat); color: #fff; }
.badge.cat-jet.own-own { background: #fff; color: var(--jet); }
.badge.cat-boat.own-own { background: #fff; color: var(--boat); }
.own-tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; font-weight: 700; border: 1px solid var(--navy); }
.own-tag.own-rental { background: var(--navy); color: #fff; }
.own-tag.own-own { background: #fff; color: var(--navy); }
.own-tag.own-seastyle { background: var(--seastyle); border-color: var(--seastyle); color: #fff; }
.own-tag.own-w38 { background: var(--w38); border-color: var(--w38); color: #fff; }
.warn { color: var(--warn); font-weight: 700; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tb-nav { display: flex; gap: 4px; }
.cal-label { margin: 0 6px; font-size: 22px; }
.jump input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg a { padding: 7px 14px; color: var(--ink); border-right: 1px solid var(--line); }
.seg a:last-child { border-right: 0; }
.seg a.on { background: var(--navy); color: #fff; }
.seg a:hover { text-decoration: none; }
.now-wx { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; display: flex; align-items: center; gap: 6px; }
.now-wx small { color: var(--muted); }
.toolbar .add { margin-left: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.legend .sep { width: 1px; height: 14px; background: var(--line); margin: 0 4px; }
.lg-tide i { display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-right: 2px; vertical-align: middle; }
.lg-tide i.tb-jet { background: var(--jet); }
.lg-tide i.tb-boat { background: var(--boat); }

/* ---------- tide bars ---------- */
.tidebars { display: flex; flex-direction: column; gap: 2px; margin: 3px 0; }
.tb { display: flex; align-items: center; gap: 4px; }
.tb-l { font-size: 10px; font-weight: 800; width: 10px; }
.tb-jet .tb-l { color: var(--jet); }
.tb-boat .tb-l { color: var(--boat); }
.tb-track { position: relative; flex: 1; height: 5px; background: #e6eaef; border-radius: 3px; overflow: hidden; }
.tb-track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.tb-jet .tb-track i { background: var(--jet); }
.tb-boat .tb-track i { background: var(--boat); }

.wx { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; }
.wx small { font-size: 10px; color: var(--muted); }
.wx small b { color: #c4441b; font-weight: 600; }

/* ---------- month ---------- */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--line); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mh { background: #f8fafc; text-align: center; font-size: 12px; font-weight: 700; padding: 4px; }
.mh.sun, .sun .dnum, .sun .wdate { color: var(--sun); }
.mh.sat, .sat .dnum, .sat .wdate { color: var(--sat); }
.mc { background: #fff; min-height: 128px; padding: 4px 5px; position: relative; display: flex; flex-direction: column; }
.mc.out { background: #fafbfc; }
.mc.out > * { opacity: .5; }
.mc.today { background: var(--today); }
.mc-head { display: flex; align-items: center; gap: 4px; }
.dnum { font-weight: 700; color: var(--ink); min-width: 22px; }
.today .dnum { background: var(--navy); color: #fff !important; border-radius: 99px; text-align: center; padding: 0 6px; }
.plus { margin-left: auto; color: var(--muted); font-weight: 700; padding: 0 4px; border-radius: 4px; visibility: hidden; }
.mc:hover .plus, .wc .plus { visibility: visible; }
.plus:hover { background: #eef2f6; text-decoration: none; }
.mc-events { display: flex; flex-direction: column; gap: 2px; }
.mc-count { display: none; }
.more { font-size: 11px; color: var(--muted); }

.chip { display: block; color: var(--ink); border-radius: 6px; text-decoration: none !important; }
.chip-mini { display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 3px; overflow: hidden; white-space: nowrap; }
.chip-mini .badge { min-width: 16px; height: 16px; font-size: 10px; padding: 0 3px; border-width: 2px; }
.chip-mini .t { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip-mini .n { overflow: hidden; text-overflow: ellipsis; }
.chip-mini.cat-jet { background: var(--jet-bg); }
.chip-mini.cat-boat { background: var(--boat-bg); }
.chip-mini:hover { filter: brightness(.96); }

.chip-card { background: #fff; border: 1px solid var(--line); border-left: 5px solid; padding: 6px 8px; font-size: 13px; }
.chip-card.cat-jet { border-left-color: var(--jet); background: linear-gradient(90deg, var(--jet-bg), #fff 60%); }
.chip-card.cat-boat { border-left-color: var(--boat); background: linear-gradient(90deg, var(--boat-bg), #fff 60%); }
.chip-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.chip-card .row1 { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.chip-card .t { font-weight: 700; font-variant-numeric: tabular-nums; }
.chip-card .row2 { margin-top: 2px; }
.chip-card .row3 { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-card .note { white-space: normal; }
.pax { font-size: 12px; color: var(--muted); }

/* ---------- week ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 300px; }
.wc.today { background: var(--today); border-color: #ecd77c; }
.wc header { display: flex; align-items: center; gap: 6px; }
.wdate { color: var(--ink); display: flex; align-items: baseline; gap: 4px; }
.wdate b { font-size: 20px; }
.wtide div { display: flex; align-items: center; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; flex: none; }
.dot.jet { background: var(--jet); }
.dot.boat { background: var(--boat); }
.wc-events { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.empty { color: #aab2bc; font-size: 12px; text-align: center; margin: 10px 0; }

/* ---------- day ---------- */
.day-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.card .btn { align-self: flex-start; margin-top: 4px; }
.big-wx { font-size: 26px; }
.big-wx span { font-size: 16px; font-weight: 700; }
.hot { color: #c4441b; }
.cold { color: #2a62c9; }
.tidepill { display: inline-block; border-radius: 6px; padding: 0 6px; margin: 2px 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.tidepill.high { background: #e3f0fd; color: #0a4f99; }
.tidepill.low { background: #eef1f4; color: #4b5562; }
.tidepill small { font-weight: 400; }
.win-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.timeline { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; }
.tl-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 0; }
.tl-row + .tl-event, .tl-event + .tl-event { border-top: 1px solid #eef1f4; }
.tl-track { position: relative; min-height: 26px; }
.tl-axis .tl-track { height: 18px; border-bottom: 1px solid var(--line); }
.hour { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.tl-wx .tl-track { height: 38px; }
.hwx { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 15px; line-height: 1.1; }
.hwx small { font-size: 10px; color: var(--muted); }
.tl-chart .tl-track, .tl-event .tl-track {
  background-image: linear-gradient(90deg, #eef1f4 1px, transparent 1px);
  background-size: var(--hw, 8.333%) 100%; background-position: var(--hx, 0) 0;
}
.tl-chart .tl-track { height: 150px; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart .area { fill: rgba(10, 111, 214, .08); }
.chart .line { fill: none; stroke: #0a4f99; stroke-width: 2; }
.chart .win-jet { fill: rgba(10, 111, 214, .10); }
.chart .win-boat { fill: rgba(232, 115, 12, .10); }
.chart .th-jet { stroke: var(--jet); stroke-dasharray: 6 4; stroke-width: 1.5; }
.chart .th-boat { stroke: var(--boat); stroke-dasharray: 6 4; stroke-width: 1.5; }
.chart .now { stroke: var(--warn); stroke-width: 2; }
.ext { position: absolute; transform: translate(-50%, -110%); font-size: 11px; font-weight: 700; text-align: center; line-height: 1.15; background: rgba(255,255,255,.85); border-radius: 4px; padding: 1px 3px; white-space: nowrap; }
.ext-lows { transform: translate(-50%, 15%); color: #4b5562; }
.ext-highs { color: #0a4f99; }
.ext small { font-weight: 400; }
.yl { position: absolute; left: 2px; font-size: 10px; color: #aab2bc; }
.lg-line { display: inline-block; width: 18px; border-top: 2px dashed; vertical-align: middle; margin-right: 4px; }
.lg-line.jet { border-color: var(--jet); }
.lg-line.boat { border-color: var(--boat); }
.tl-bars .tidebars { gap: 4px; }
.tl-bars .tb-track { height: 9px; }
.tl-event .tl-track { min-height: 34px; }
.gbar {
  position: absolute; top: 50%; transform: translateY(-50%); height: 26px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 700;
  padding: 0 8px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-decoration: none !important; min-width: 6px;
}
.gbar.cat-jet { background: var(--jet); }
.gbar.cat-boat { background: var(--boat); }
.gbar.own-own { background: #fff; border: 2px solid; }
.gbar.own-own.cat-jet { color: var(--jet); border-color: var(--jet); }
.gbar.own-own.cat-boat { color: var(--boat); border-color: var(--boat); }
.gbar.open { border-style: dashed; opacity: .85; }
.gbar.has-warn { box-shadow: 0 0 0 2px var(--warn); }
.notime { line-height: 34px; }

/* ---------- year ---------- */
.year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ym { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.ym-title { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.ym-title small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.ym-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; }
.ym-h { font-size: 10px; color: var(--muted); }
.ym-h.sun { color: var(--sun); }
.ym-h.sat { color: var(--sat); }
.yd { color: var(--ink); border-radius: 5px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.yd:hover { text-decoration: none; outline: 1px solid var(--jet); }
.yd.sun { color: var(--sun); }
.yd.sat { color: var(--sat); }
.yd.lv1 { background: #d6e8fb; }
.yd.lv2 { background: #7fb4ec; color: #fff; }
.yd.lv3 { background: #0a6fd6; color: #fff; font-weight: 700; }
.yd.today { outline: 2px solid var(--boat); font-weight: 700; }

.credit { text-align: right; margin-top: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .year { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  main { padding: 10px; }
  .cal-label { font-size: 18px; order: -1; width: 100%; margin: 0; }
  .toolbar .add { margin-left: 0; }
  .now-wx small { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .mc { min-height: 82px; padding: 3px; }
  .mc .wx small, .mc .mc-events { display: none; }
  .mc-count { display: block; margin-top: auto; font-size: 11px; font-weight: 700; text-align: center; background: var(--jet-bg); border-radius: 4px; }
  .plus { display: none; }
  .week { grid-template-columns: 1fr; }
  .wc { min-height: 0; }
  .year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-cards { grid-template-columns: 1fr; }
  .tl-row { grid-template-columns: 1fr; gap: 4px; }
  .tl-axis .tl-label, .tl-wx .tl-label, .tl-bars .tl-label { display: none; }
  .tl-chart .tl-label { font-size: 11px; }
  .tl-event { padding: 8px 0; }
  .form-actions .danger { margin-left: 0; }
}
@media (max-width: 480px) {
  .year { grid-template-columns: 1fr; }
  header.site nav a { padding: 4px 6px; font-size: 13px; }
}

/* ---------- 休日 ---------- */
.day-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; margin: 2px 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-tag.is-closed { background: #5b6470; color: #fff; }
.day-tag.is-open { background: #e4f6ea; color: #1d6b38; border: 1px solid #9fd6b2; }
.mc.closed, .wc.closed { background: repeating-linear-gradient(135deg, #f1f3f5 0, #f1f3f5 6px, #e8ebef 6px, #e8ebef 12px); }
.mc.closed.today, .wc.closed.today { background: repeating-linear-gradient(135deg, #fff3c4 0, #fff3c4 6px, #f6e6a6 6px, #f6e6a6 12px); }
.yd.closed { text-decoration: line-through; color: #9aa3ad !important; background-image: repeating-linear-gradient(135deg, transparent 0, transparent 3px, #e3e6ea 3px, #e3e6ea 5px); }
.day-banner { border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; font-size: 15px; }
.day-banner.is-closed { background: #5b6470; color: #fff; }
.day-banner.is-closed .warn { color: #ffd1d1; }
.day-banner.is-open { background: #e4f6ea; color: #1d6b38; border: 1px solid #9fd6b2; }
.hint-open { color: #1d6b38; font-weight: 700; }
.wd-checks { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.form .wd-checks label { flex-direction: row; margin: 0; }
.wd-checks input { position: absolute; opacity: 0; width: 1px !important; height: 1px; }
.wd-checks span { display: inline-block; min-width: 52px; text-align: center; padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-weight: 700; }
.wd-checks .sun span { color: var(--sun); }
.wd-checks .sat span { color: var(--sat); }
.wd-checks input:checked + span { background: #5b6470; border-color: #5b6470; color: #fff; }
.wd-checks input:focus-visible + span { outline: 2px solid var(--ink); }
.wd-checks label { position: relative; }
.form.hol-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.form.hol-form label { margin: 0; }
.form.hol-form .grow { flex: 1; min-width: 200px; }
.inline-del { margin: 0; }

/* ---------- クリックで追加・ドラッグ＆ドロップ ---------- */
.tip { margin: -4px 0 10px; }
[data-new] { cursor: pointer; }
.mc[data-new]:hover, .wc[data-new]:hover { box-shadow: inset 0 0 0 2px #b9d7f5; }
.mc .plus { visibility: visible; opacity: .45; }
.mc:hover .plus { opacity: 1; }
.chip[data-id] { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none; }
.chip.dragging { opacity: .35; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .92; box-shadow: 0 8px 24px rgba(0,0,0,.25); transform: rotate(-2deg); }
.drop-over { box-shadow: inset 0 0 0 3px var(--jet) !important; background: #eaf3fd !important; }
.drop-saving { opacity: .5; }

/* ---------- 週表示の天気（大きく） ---------- */
.wx-big { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.wx-big .wx-icon { font-size: 34px; line-height: 1; grid-row: span 2; }
.wx-big .wx-main { display: flex; flex-direction: column; min-width: 0; }
.wx-big .wx-label { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-big .wx-temp { font-size: 20px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wx-big .wx-temp .slash { color: #b8c0c9; margin: 0 2px; font-size: 16px; }
.wx-big .wx-sub { grid-column: 1 / -1; font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-big.none { display: block; font-size: 11px; color: #aab2bc; text-align: center; padding: 10px 6px; }
@media (max-width: 1400px) and (min-width: 1101px) {
  .wx-big .wx-icon { font-size: 28px; }
  .wx-big .wx-temp { font-size: 17px; }
}
@media (max-width: 760px) {
  .wx-big { grid-template-columns: auto auto 1fr; }
  .wx-big .wx-icon { grid-row: auto; }
  .wx-big .wx-main { flex-direction: row; align-items: baseline; gap: 10px; }
  .wx-big .wx-sub { grid-column: auto; text-align: right; margin: 0; }
}

/* ---------- 潮名（大潮など） ---------- */
.moon-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; padding: 1px 8px; border-radius: 99px; white-space: nowrap; border: 1px solid transparent; }
.moon-tag small { font-size: 10px; color: var(--muted); font-weight: 400; }
.moon-tag.oshio { background: #e3f0fd; color: #0a4f99; border-color: #a9cdf3; }
.moon-tag.oshio b { color: #0a4f99; }
.moon-tag.nakashio { background: #eef4f9; color: #2f5d86; }
.moon-tag.koshio, .moon-tag.nagashio, .moon-tag.wakashio { background: #f1f3f5; color: #5b6470; }
.wx-big .wx-moon { grid-column: 1 / -1; margin-top: 4px; }
.wx-big.none .wx-moon { display: block; margin-top: 4px; }
@media (max-width: 760px) {
  .wx-big .wx-moon { grid-column: 1 / -1; }
}