@charset "utf-8";
/* =========================================
   潮汐カレンダー（潮汐推算と完全統一版）
   共通CSS: ../css/tyoseki.css
========================================= */

/* ---- トークン（suisan.css と同一） ---- */
:root{
  --border: #c9ddff;
  --accent: #126bcd;
  --accent-dark: #0f56a4;
}

/* ---- レイアウト：本文 ---- */
.cal-inner{
  width:100%;
  max-width:none;
  margin:0 auto 28px;
}

/* ---- タイトル・説明（完全一致） ---- */
.page-head h1{
  margin:0 0 4px;
  line-height:1.25;
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#000;
}
.page-head p.desc{
  margin:0 0 4px;
  line-height:1.4;
  font-size:.9rem;
  color:#333;
}
.page-head p.advisory{
  margin:0 0 2px;
  line-height:1.35;
  font-size:.9rem;
  color:#c00;
}

/* =========================================
   マップ＋選択パネル（二段階レイアウト）
========================================= */
.calendar-wrap{
  display:grid;
  grid-template-columns:minmax(260px,520px) 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width:880px){
  .calendar-wrap{ grid-template-columns:1fr; }
}

/* ---- マップ ---- */
.map-wrap{
  position:relative;
  max-width:520px;
  width:min(92vw,520px);
  margin:0 auto;
}
.map-img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid #ddd;
  border-radius:6px;
}

/* ---- 港マーカー（推算図と同一） ---- */
.mark{
  position:absolute;
  transform:translate(-50%,-50%);
  text-decoration:none;
  display:inline-block;
}
.mark::before{
  content:"";
  position:absolute;
  left:0; top:0;
  transform:translate(-50%,-50%);
  width:12px; height:12px;
  background:#d60000;
  border:2px solid #fff;
  border-radius:50%;
  box-shadow:0 0 0 1px #d60000,0 1px 6px rgba(0,0,0,.25);
}
.label{
  position:absolute;
  left:12px; top:0;
  transform:translateY(-50%);
  font-size:.9rem;
  line-height:1.2;
  color:#222;
  background:rgba(255,255,255,.9);
  border:1px solid #ddd;
  border-radius:6px;
  padding:2px 6px;
  white-space:nowrap;
  box-shadow:0 1px 6px rgba(0,0,0,.10);
}
.label--left{ left:auto; right:12px; }
.label--top{ left:auto; top:auto; bottom:12px; transform:translateX(-50%); }
.label--bottom{ left:auto; top:12px; transform:translateX(-50%); }

/* =========================================
   選択パネル（完全に suisan.css 準拠）
========================================= */
.panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 16px;
  box-shadow:0 2px 8px rgba(10,58,122,.06);
}
fieldset{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
  margin:12px 0;
}
legend{
  font-weight:700;
  font-size:.95rem;
  color:#333;
  padding:0 6px;
}

/* ---- 港一覧：常に3列固定（最重要） ---- */
.ports{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px 14px;
  font-size:.9rem;
}
.ports label{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  line-height:1.1;
}
.ports input[type="radio"]{
  margin:0;
}

/* ---- 年月（推算図と同一） ---- */
.ym-row{
  display:flex;
  justify-content:flex-start;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.select-compact{
  width:auto;
  min-width:90px;
  max-width:140px;
  padding:6px 10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.9rem;
}
.select-compact.year{ min-width:110px; }

button{
  appearance:none;
  display:inline-block;
  padding:6px 14px;
  border:1px solid var(--accent);
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
button:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
}
button:focus{
  outline:none;
  border-color:var(--accent-dark);
  box-shadow:0 0 0 3px rgba(18,107,205,.18);
}

/* 補助 */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  border:0 !important;
}

/* スマホ微調整 */
@media (max-width:600px){
  html{ font-size:12.5px; }
  .select-compact{ font-size:13.5px; }
  button{ font-size:12.5px; }
  .label{ font-size:11px;
    left:8px;
    padding:1px 3px;
    border-radius:4px; }
  .label--left{ left:auto; right:8px; }
  .label--top{ left:auto; bottom:8px; }
  .label--bottom{ left:auto; top:8px; }
  .mark::before{ width:9px; height:9px; }
}

@media (max-width:500px){
  html{ font-size:12px; }
  .select-compact{ font-size:13px; }
  button{ font-size:12px; }
  .label{ font-size:10.5px; }
}