/* ship.weather.css (2026-09-22) — 부산↔대마도 결항 예측 (메인 한 줄 / 검색결과 안내 / 전용 페이지) */

.tsw-badge{display:inline-block;padding:3px 9px;border-radius:12px;color:#fff;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap}
.tsw-badge.sm{font-size:11px;padding:2px 7px}
.tsw-muted{color:#888;font-size:12px}

/* 1) 메인 한 줄 (2026-09-22 UI 정리) */
#tswStrip{padding:0 16px;margin-top:16px}
.tsw-strip{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-radius:14px;background:#fff;border:1px solid #e5ebf1;box-shadow:0 2px 8px rgba(15,40,70,.05);color:#1d2a38;text-decoration:none}
.tsw-strip:active{background:#f8fafc}
.tsw-strip-ico{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#eaf3fc;color:#1a6fc4;display:flex;align-items:center;justify-content:center}
.tsw-strip-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}
.tsw-strip-t{font-size:14px;font-weight:700;letter-spacing:-.2px;line-height:1.2}
.tsw-strip-days{display:flex;flex-wrap:wrap;gap:6px}
.tsw-strip-arrow{flex:0 0 auto;font-size:22px;line-height:1;color:#b0b8c1}
.tsw-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;font-size:12px;white-space:nowrap;background:#f2f4f6;color:#4e5968}
.tsw-chip i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.tsw-chip em{font-style:normal;color:#6b7684}
.tsw-chip b{font-weight:700}
.tsw-chip.lv-GOOD{background:#e9f7ef;color:#0f8a44}
.tsw-chip.lv-CAUTION{background:#fff5dc;color:#b77900}
.tsw-chip.lv-RISK{background:#fff0e5;color:#d4570f}
.tsw-chip.lv-HIGH{background:#fdecec;color:#d42a2a}

/* 2) 검색결과 안내 (ship/list) */
#tswNotice{padding:0 16px;margin:12px 0}
.tsw-notice{border:1px solid #eee;border-left:4px solid #12a150;border-radius:10px;padding:12px 14px;background:#fff}
.tsw-notice-h{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:8px}
.tsw-notice-h a{font-size:12px;font-weight:600;color:#1a6fc4}
.tsw-notice ul{margin:0;padding:0;list-style:none}
.tsw-notice li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 0;font-size:13px}
.tsw-notice li b{font-weight:600;min-width:150px}
.tsw-tip{margin:8px 0 0;font-size:12px;color:#c0392b}
.tsw-disc{margin:6px 0 0;font-size:11px;color:#999}

/* 3) 전용 페이지 */
.tsw-page{padding:16px}
.tsw-page h2{font-size:18px;font-weight:800;margin:0 0 6px}
.tsw-page h3{font-size:15px;font-weight:700;margin:24px 0 8px}
.tsw-page p{font-size:13px;line-height:1.7;color:#333;margin:0 0 8px}
.tsw-lead{color:#555}
.tsw-tabs{display:flex;gap:6px;overflow-x:auto;margin:14px 0 12px;scrollbar-width:none}
.tsw-tabs::-webkit-scrollbar{display:none}
.tsw-tab{position:relative;flex:1 0 62px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 12px;border:1px solid #e5e5e5;border-radius:10px;background:#fff;cursor:pointer}
.tsw-tab strong{font-size:13px}
.tsw-tab small{font-size:11px;color:#888}
.tsw-tab i{position:absolute;bottom:5px;left:50%;width:18px;height:4px;margin-left:-9px;border-radius:2px}
.tsw-tab.on{border-color:#222;box-shadow:0 0 0 1px #222 inset}
.tsw-legs{display:flex;gap:10px}
.tsw-leg{flex:1 1 0;min-width:0;border:1px solid #eee;border-radius:12px;padding:14px 12px;text-align:center;background:#fff}
.tsw-leg-h{font-size:13px;font-weight:700;margin-bottom:10px}
.tsw-leg-h small{font-weight:400;color:#999;font-size:11px}
.tsw-gauge{width:84px;height:84px;margin:0 auto 10px;border:7px solid #12a150;border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.tsw-gauge b{font-size:26px;font-weight:800;line-height:1}
.tsw-gauge small{font-size:13px}
.tsw-low{display:inline-block;font-size:11px;color:#8a6d00;background:#fff4cc;border-radius:10px;padding:2px 7px}
.tsw-metrics{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 8px}
.tsw-metrics div{background:#f7f7f7;border-radius:8px;padding:6px 4px}
.tsw-metrics dt{font-size:10px;color:#888}
.tsw-metrics dd{margin:2px 0 0;font-size:13px;font-weight:700}
.tsw-reason{font-size:12px !important;color:#555 !important;margin:0 !important;line-height:1.5 !important}
.tsw-chart-h{font-size:13px;font-weight:700;margin:20px 0 8px}
.tsw-chart{display:flex;align-items:flex-end;gap:2px;height:140px;padding:0 0 18px;border-bottom:1px solid #eee;position:relative}
.tsw-bar{position:relative;flex:1 1 0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-radius:3px 3px 0 0}
.tsw-bar.w-out{background:rgba(26,111,196,.07)}
.tsw-bar.w-back{background:rgba(240,106,29,.07)}
.tsw-bar-f{display:block;width:70%;border-radius:3px 3px 0 0;min-height:3px}
.tsw-bar-v{font-size:9px;color:#666;margin-bottom:2px}
.tsw-bar-x{position:absolute;bottom:-17px;font-size:10px;color:#999}
.tsw-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;font-size:11px;color:#888}
.tsw-legend .lg-out::before,.tsw-legend .lg-back::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.tsw-legend .lg-out::before{background:rgba(26,111,196,.25)}
.tsw-legend .lg-back::before{background:rgba(240,106,29,.25)}
.tsw-table{margin-top:14px;font-size:12px}
.tsw-table summary{cursor:pointer;color:#1a6fc4;font-weight:600;padding:6px 0}
.tsw-table table{width:100%;border-collapse:collapse;margin-top:6px}
.tsw-table th,.tsw-table td{border-bottom:1px solid #f0f0f0;padding:6px 2px;text-align:center}
.tsw-table th{background:#fafafa;font-weight:600;color:#555}
.tsw-cta{display:flex;gap:8px;margin:18px 0 8px}
.tsw-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 16px;border-radius:10px;border:1px solid #ddd;background:#fff;font-size:14px;color:#222;text-decoration:none;cursor:pointer}
.tsw-btn-main{flex:1 1 auto;background:#e63140;border-color:#e63140;color:#fff;font-weight:700}
.tsw-updated{font-size:11px !important;color:#999 !important}
.tsw-stale{font-size:12px !important;color:#8a6d00 !important;background:#fff8e1;padding:8px 10px;border-radius:8px}
.tsw-guide{width:100%;border-collapse:collapse;font-size:12px;margin:6px 0}
.tsw-guide th,.tsw-guide td{border:1px solid #eee;padding:7px 6px;text-align:left}
.tsw-guide th{background:#fafafa;width:34%}
.tsw-summary{border:1px solid #eee;border-radius:10px;padding:10px 12px;margin:10px 0}
.tsw-summary li{font-size:13px;padding:3px 0;list-style:none}
@media (max-width:360px){.tsw-legs{flex-direction:column}}

/* 2-1) 예약 완료·상세 (2026-09-22) */
#tswBooking{margin:12px 0}
#tswBooking .tsw-notice{margin:0 16px}
.card #tswBooking .tsw-notice{margin:0}

/* 장기 전망 (2026-09-22) — 6~15일 경향 / 월별 평년 / 선박 달력 표시 */
.tsw-ghost{background:#fff !important;border:1px solid}
.tsw-sec{font-size:15px;font-weight:700;margin:24px 0 8px}
.tsw-sec small{font-weight:400;color:#999;font-size:11px;margin-left:4px}
.tsw-note{font-size:11px !important;color:#999 !important;margin-top:6px !important;line-height:1.5 !important}
.tsw-ols{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.tsw-ols::-webkit-scrollbar{display:none}
.tsw-ol{flex:0 0 76px;border:1px solid #eee;border-radius:10px;padding:8px 4px;text-align:center;font-size:11px;background:#fff}
.tsw-ol small{display:block;color:#888;font-size:11px}
.tsw-ol i{display:block;width:22px;height:6px;border-radius:3px;margin:6px auto}
.tsw-ol span{display:block;line-height:1.3;color:#333}
.tsw-mbs{display:flex;align-items:flex-end;gap:3px;height:150px;padding:0 0 34px;border-bottom:1px solid #eee;margin-top:6px}
.tsw-mb{flex:1 1 0;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.tsw-mb .b{width:70%;border-radius:3px 3px 0 0;display:block}
.tsw-mb .v{font-size:9px;color:#666;margin-bottom:2px}
.tsw-mb .m{position:absolute;bottom:-17px;font-size:10px;color:#888}
.tsw-mb .r{position:absolute;bottom:-31px;font-size:9px;color:#c0392b}
.tsw-mb.now .m{color:#222;font-weight:700}
.tsw-mb.now .b{box-shadow:0 0 0 2px #222}
.tsw-cal-legend{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;color:#333;padding:9px 12px;margin:0 0 14px;background:#f2f7fc;border:1px solid #dbe8f5;border-radius:10px}
.tsw-cal-legend span{display:inline-flex;align-items:center;gap:4px;color:#555}
.tsw-cal-legend em{font-style:normal;color:#999}
.tsw-cal-legend a{margin-left:auto;color:#1a6fc4;font-weight:600}
.tsw-cd{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);z-index:3;display:block;width:6px;height:6px;border-radius:50%}
.tsw-cd.k-O{opacity:.8;box-shadow:0 0 0 1px #fff}
.tsw-cd.k-C{width:14px;height:3px;border-radius:2px;opacity:.75}
.tsw-cal-legend .tsw-cd{position:static;transform:none;display:inline-block}

/* 예약 가능일(오늘+4) 안내 (2026-09-22) */
.tsw-tab em.tsw-bookable{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-style:normal;font-size:9px;font-weight:700;color:#fff;background:#e63140;border-radius:8px;padding:1px 5px;white-space:nowrap}
.tsw-tabs{padding-top:8px}
.tsw-booknote{font-size:12px !important;color:#555 !important;background:#fff7f7;border:1px solid #f6d5d8;border-radius:8px;padding:9px 11px;margin:16px 0 0 !important;line-height:1.6 !important}


/* 2026-09-22 : 탭이 가로로 넘쳐 PC에서 넘길 수 없던 문제 → 7칸을 한 줄에 맞춤, 경향 칩은 줄바꿈 그리드 */
.tsw-tabs{overflow:visible;gap:4px;padding-top:10px}
.tsw-tab{flex:1 1 0;min-width:0;padding:9px 2px 12px}
.tsw-tab strong{font-size:13px;white-space:nowrap}
.tsw-tab small{font-size:10px;white-space:nowrap;letter-spacing:-.3px}
.tsw-tab em.tsw-bookable{top:-9px;padding:1px 5px}
.tsw-ols{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;overflow:visible}
.tsw-ol{flex:none}
@media (max-width:360px){.tsw-tab strong{font-size:12px}.tsw-tab small{font-size:9px}}