/*
Theme Name: Calendar Maker
Theme URI: https://otto858.com/
Author: Otto's BOX
Author URI: https://otto858.com/
Description: 予定カレンダーメーカー専用テーマ。管理画面からフォントと色テーマを自由に追加できます。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calendar-maker
*/

:root{
  --pink:#ff6fa5;
  --pink-deep:#e84d87;
  --cream:#fff7fb;
  --ink:#3a2f36;
  --line:#f0c5d8;
  --sun:#e8597b;
  --sat:#5b87c4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:'Zen Maru Gothic',sans-serif;
  touch-action:manipulation;            /* ダブルタップによる拡大を無効化 */
  background:
    radial-gradient(circle at 15% 10%, #ffe3ef 0%, transparent 40%),
    radial-gradient(circle at 85% 90%, #ffeef6 0%, transparent 45%),
    #fff;
  color:var(--ink);
  min-height:100vh;
  padding:24px 16px 60px;
}
.wrap{max-width:520px;margin:0 auto}
header{text-align:center;margin-bottom:22px}
header h1{
  font-family:'Kaisei Decol',serif;
  font-size:1.55rem;font-weight:700;color:var(--pink-deep);
  letter-spacing:.02em;line-height:1.4;
}
header p{font-size:.82rem;color:#b78aa0;margin-top:6px}
.panel{
  background:#fff;border:1.5px solid var(--line);
  border-radius:18px;padding:18px;margin-bottom:16px;
  box-shadow:0 8px 24px -14px rgba(232,77,135,.4);
}
.panel h2{
  font-size:.92rem;color:var(--pink-deep);font-weight:700;
  margin-bottom:12px;display:flex;align-items:center;gap:7px;
}
.panel h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink)}
.row{display:flex;gap:10px;flex-wrap:wrap}
label.field{flex:1;min-width:110px;display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:#a07a8c;align-items:stretch}
select,input[type=number],input[type=text],input[type=date]{
  font-family:inherit;font-size:16px;padding:9px 11px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--cream);
  color:var(--ink);width:100%;cursor:pointer;
}
/* iOS Safari の日付入力が枠からはみ出すのを防ぐ */
input[type=date]{
  -webkit-appearance:none;appearance:none;
  min-width:0;max-width:100%;text-align:left;
}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto}
/* 年・月は内容幅で左寄せ（右に間延びさせない） */
label.field.compact{flex:0 0 auto;min-width:0}
label.field.compact select{width:auto;min-width:92px;padding-right:28px}
.radio-group{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.radio-opt{display:flex;align-items:center;gap:6px;font-size:.88rem;color:var(--ink);cursor:pointer}
.radio-opt input{accent-color:var(--pink);cursor:pointer;width:auto}
select:focus,input:focus{outline:none;border-color:var(--pink)}
.btn{
  font-family:inherit;font-weight:700;font-size:.95rem;
  border:none;border-radius:13px;padding:13px;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;width:100%;
}
.btn:active{transform:scale(.97)}
.btn-main{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;box-shadow:0 6px 16px -6px var(--pink-deep)}
.btn-sub{background:#fff;color:var(--pink-deep);border:1.5px solid var(--pink)}
.upload-box{
  border:2px dashed var(--line);border-radius:13px;padding:16px;text-align:center;
  background:var(--cream);cursor:pointer;font-size:.82rem;color:#b78aa0;transition:.15s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:56px;
}
.upload-box:hover{border-color:var(--pink);color:var(--pink-deep)}
.upload-box .up-text{display:block;font-weight:700}
.upload-box img{
  max-width:80px;max-height:80px;width:auto;height:auto;
  object-fit:contain;display:block;
}
.hint{font-size:.74rem;color:#c79bb0;margin-top:8px;line-height:1.5}
.mark-controls{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:.8rem;color:#a07a8c}
.mark-controls input[type=range]{flex:1;accent-color:var(--pink)}

/* ===== スタンプ登録枠 ===== */
.stamp-row{
  display:flex;align-items:center;gap:10px;
  padding:10px;border:1.5px solid var(--line);border-radius:13px;
  background:var(--cream);margin-bottom:10px;
}
.stamp-thumb{
  flex:none;width:54px;height:54px;border-radius:10px;
  border:2px dashed var(--line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:1.4rem;color:#d8a8c0;transition:.15s;position:relative;
}
.stamp-thumb:hover{border-color:var(--pink)}
.stamp-thumb img{width:100%;height:100%;object-fit:contain}
.stamp-fields{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.stamp-fields input[type=text]{font-size:16px;padding:7px 9px}
.stamp-num{font-size:.72rem;color:#b78aa0;font-weight:700}
.stamp-clear{
  flex:none;border:none;background:none;color:#d89bb5;cursor:pointer;
  font-size:1.1rem;padding:4px;border-radius:8px;line-height:1;
}
.stamp-clear:hover{color:var(--pink-deep);background:#fff0f7}

/* ===== スタンプ選択ボタン ===== */
.stamp-picker{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;justify-content:center;
}
.stamp-btn{
  display:flex;align-items:center;gap:6px;
  border:2px solid var(--line);border-radius:12px;background:#fff;
  padding:6px 10px;cursor:pointer;font-family:inherit;font-size:.78rem;color:#a07a8c;
  transition:.15s;max-width:160px;
}
.stamp-btn img{width:26px;height:26px;object-fit:contain;flex:none}
.stamp-btn .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stamp-btn.active{border-color:var(--pink);background:#fff0f7;color:var(--pink-deep);font-weight:700}
.stamp-btn:hover{border-color:var(--pink)}
.stamp-picker .empty-pick{font-size:.78rem;color:#c79bb0}

/* ===== カレンダー本体(画像化対象) ===== */
.cal-stage{padding:4px 0 8px}
/* calFrame = 比率の箱。中身(ヘッダー/セル/絵文字/凡例)を係数で拡大縮小して枠に収める */
#calFrame{
  width:100%;max-width:480px;margin:0 auto;
  background:#fff;border:5px solid var(--pink);border-radius:8px;
  box-sizing:border-box;position:relative;overflow:hidden;
  padding:12px;
  aspect-ratio:0.8; /* JSで比率を上書き */
}
#calendar{
  position:absolute;top:12px;left:12px;right:12px;bottom:12px;
  background:#fff;border:none;
  display:flex;flex-direction:column;
}
.cal-head{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:nowrap;flex:0 0 auto}
.cal-head .deco{letter-spacing:2px;white-space:nowrap}
.cal-head .deco-emoji{width:1em;height:1em;vertical-align:-0.12em;object-fit:contain} /* 絵文字画像 */
.cal-head .month-en{color:#7d8aa0;font-weight:400}
.cal-head .month-num{font-family:'Kaisei Decol',serif;color:var(--pink);font-weight:700;line-height:1}
.cal-head .year{color:#7d8aa0}
.cal-head .range{color:#7d8aa0}
/* テーブルが残り高さを全部埋める。行は均等分割 */
table{width:100%;border-collapse:collapse;table-layout:fixed;flex:1 1 auto;height:1px;border-left:1px dashed #d8d8d8;border-top:1px dashed #d8d8d8}
th{
  font-weight:500;border-bottom:1px dashed #ccc;height:1px;
}
th.sun{color:var(--sun)} th.sat{color:var(--sat)}
td{
  width:14.28%;border:1px dashed #d8d8d8;
  vertical-align:top;position:relative;
}
td .dnum{color:var(--ink);line-height:1}
td.sun .dnum{color:var(--sun)} td.sat .dnum{color:var(--sat)}
td.empty{border:1px dashed #ececec;background:#fcfcfc}
td .work-mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-30%);
  object-fit:contain;pointer-events:none;
}
td.has-mark{cursor:pointer;background:#fff5fa}
td.selectable{cursor:pointer}
td.selectable:hover{background:#fff0f7}

.legend-list{
  flex:0 0 auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;width:100%;
  color:var(--pink-deep);
}
.legend-item{display:inline-flex;align-items:center;white-space:nowrap}
.legend-item .legend-txt{display:inline-block}
.legend-item img{vertical-align:middle;flex:none}

.toggle-note{font-size:.76rem;color:#b78aa0;margin-top:10px;text-align:center}
footer{text-align:center;font-size:.72rem;color:#cda7ba;margin-top:24px}
.empty-mark-warn{color:var(--pink-deep);font-size:.8rem;text-align:center;margin-top:6px;display:none}

/* ===== 月間／週間 切替タブ ===== */
.mode-tabs{
  display:flex;gap:8px;justify-content:center;margin-bottom:18px;
}
.mode-tab{
  flex:1;max-width:200px;
  font-family:inherit;font-weight:700;font-size:.95rem;
  padding:11px 10px;border-radius:13px;cursor:pointer;
  border:2px solid var(--line);background:#fff;color:#b78aa0;
  transition:.15s;
}
.mode-tab.active{
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -8px var(--pink-deep);
}
.mode-tab:not(.active):hover{border-color:var(--pink);color:var(--pink-deep)}
/* タブで表示を出し分け */
.mode-pane{display:none}
.mode-pane.active{display:block}

/* ===== 週・縦並びレイアウト ===== */
.week-vlist{
  flex:1 1 auto;display:flex;flex-direction:column;
  gap:6px;min-height:0;
}
.vrow{
  flex:1 1 0;display:flex;align-items:center;
  border:1px dashed #d8d8d8;border-radius:10px;
  padding:8px 14px;position:relative;overflow:hidden;min-height:0;
  gap:14px;
}
.vrow.sun{background:#fff6f8}
.vrow.sat{background:#f5f8fc}
.vrow.selectable{cursor:pointer}
.vrow.selectable:hover{background:#fff0f7}
.vrow.has-mark{background:#fff5fa}
.vrow-date{display:inline-flex;align-items:baseline;gap:8px;line-height:1;flex:none}
.vrow-wd{font-weight:500}
.vrow-num{font-family:'Kaisei Decol',serif;font-weight:700;line-height:1}
/* スタンプ＋説明文をまとめて左寄せ */
.vrow-body{display:inline-flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;overflow:hidden}
.vrow-stamp{display:inline-flex;align-items:center;justify-content:center;flex:none}
.vrow-mark{object-fit:contain;display:block}
.vrow-label{color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}