.zukan-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:12px;
  }
  .zukan-card{
    position:relative;
    aspect-ratio:4/5;
    border-radius:8px;
    overflow:hidden;
    background:#ddd6c7;
    cursor:pointer;
    border:1px solid rgba(43,40,37,0.12);
    box-shadow:0 1px 3px rgba(0,0,0,0.12);
    transition:transform 0.1s;
  }
  .zukan-card:active{ transform:scale(0.97); }
  .zukan-card .zukan-photo{
    width:100%; height:82%;
    object-fit:contain;
    object-position:center;
    display:block;
    background:#fff;
  }
  .zukan-card.unvisited .zukan-photo{
    display:none;
  }
  .zukan-card .zukan-noimg{
    width:100%; height:82%;
    display:flex; align-items:center; justify-content:center;
    font-size:34px; color:rgba(43,40,37,0.22);
    background:#ccc4b0;
  }
  .zukan-card .zukan-info{
    position:absolute; left:0; right:0; bottom:0;
    padding:6px 8px 7px;
    background:rgba(247,241,230,0.96);
    border-top:1px solid rgba(43,40,37,0.1);
  }
  .zukan-card .zukan-no{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    min-width:26px;
    height:21px;
    padding:0 5px;
    border-radius:6px;
    background:rgba(166,58,42,0.12);
    font-family:'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
    font-size:11px;
    color:var(--vermillion);
    font-weight:700;
  }
  .zukan-card.unvisited .zukan-no{ color:rgba(43,40,37,0.45); background:rgba(43,40,37,0.08); }
  .zukan-card .zukan-name{
    flex:1 1 auto;
    min-width:0;
    font-family:'Noto Serif JP', serif;
    font-size:13px;
    line-height:1.3;
    color:var(--sumi);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .zukan-card.unvisited .zukan-name{ color:rgba(43,40,37,0.45); }
  .zukan-stamp{
    position:absolute;
    top:8px; right:8px;
    width:44px; height:44px;
    border-radius:50%;
    background:rgba(166,58,42,0.94);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    line-height:1.1;
    border:2.5px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.4);
    transform:rotate(-8deg);
  }
  .zukan-stamp .n{ font-family:'BIZ UDPGothic', 'Noto Sans JP', sans-serif; font-size:15px; font-weight:700; }
  .zukan-stamp .kanji{ font-family:'Noto Serif JP', serif; font-size:9px; }
  .zukan-visited-star{
    position:absolute;
    top:8px; left:8px;
    background:rgba(255,255,255,0.9);
    border-radius:50%;
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
    border:none;
    cursor:pointer;
    z-index:2;
    box-shadow:0 1px 4px rgba(0,0,0,0.25);
  }
  .honzon-toggle{
    display:inline-block;
    font-size:11px;
    color:var(--indigo-mid);
    text-decoration:underline;
    cursor:pointer;
    margin-top:2px;
  }
  .honzon-info{
    display:none;
    font-size:12.5px;
    color:#5a564f;
    background:var(--washi);
    border:1px solid rgba(43,40,37,0.1);
    border-radius:2px;
    padding:6px 10px;
    margin-top:4px;
  }
  .honzon-info.open{ display:block; }

  .goshuin-modal{ max-width:440px; }
  .goshuin-viewer{
    overflow-y:auto;
    max-height:78vh;
    min-height:280px;background:#e9e2d5;
    display:flex; align-items:center; justify-content:center;
    padding:10px;
  }
  .goshuin-frame{
    width:100%;
    max-width:400px;
    position:relative;
  }
  .goshuin-img{
    width:100%;
    height:auto;
    display:block;
    border-radius:2px;
  }
  .goshuin-placeholder{
    display:none;
    color:#6f695f;
    font-size:14px;
    text-align:center;
    padding:40px 20px;
  }
  .goshuin-placeholder.show{ display:block; }
  .goshuin-action-wrap{
    padding:14px 18px calc(16px + env(safe-area-inset-bottom,0));
    background:#fbf7ef;border-top:1px solid rgba(43,40,37,.1);
  }
  .zukan-name-row{display:flex;align-items:center;gap:6px}
  .zukan-card-date{flex:0 0 auto;color:#777064;font-size:10px;white-space:nowrap}
  .goshuin-date-overlay{
    position:absolute;left:4.8%;bottom:5.2%;
    writing-mode:vertical-rl;text-orientation:upright;
    padding:0;border:0;border-radius:0;
    color:#111;background:transparent;
    font-family:'GoshuinDateKaisho','Yuji Syuku',serif !important;font-size:clamp(15px,5vw,23px);
    line-height:1.15;letter-spacing:.08em;
  }
  .goshuin-date-overlay.goshuin-date-01{
    left:5.7%;top:56%;bottom:auto;padding:0;border:0;border-radius:0;
    color:#111;background:transparent;font-size:clamp(15px,4.6vw,20px);
    line-height:1;letter-spacing:.03em;white-space:nowrap;
  }
  .zukan-goshuin-area{width:100%;height:82%;display:flex;align-items:center;justify-content:center;background:#fff}
  .zukan-goshuin-sheet{position:relative;height:100%;aspect-ratio:2/3;max-width:100%;background:#fff}
  .zukan-goshuin-sheet .zukan-photo{width:100%;height:100%;object-fit:contain}
  .zukan-card-date-overlay{
    position:absolute;left:4.8%;bottom:5.2%;writing-mode:vertical-rl;text-orientation:upright;
    padding:0;border:0;border-radius:0;
    color:#111;background:transparent;font-family:'GoshuinDateKaisho','Yuji Syuku',serif !important;
    font-size:clamp(7px,2vw,10px);line-height:1.05;letter-spacing:.04em;white-space:nowrap;
  }
  .zukan-card-date-overlay.goshuin-date-01{
    left:5.7%;top:56%;bottom:auto;padding:0;border:0;background:transparent;
    font-size:clamp(7px,1.9vw,9px);line-height:1;letter-spacing:.02em;
  }
  /* 長い和暦日付(例:令和十一年十二月三十一日)が縦書きで画像下端からはみ出さないよう、
     文字数に応じてフォントサイズ・行間・字間を段階的に縮小する。位置(left/top/bottom)は
     goshuin-date-01等の個別指定を優先させたいため、ここではサイズ関連のみ上書きする。 */
  .goshuin-date-overlay.goshuin-date-long{
    font-size:clamp(12px,4vw,18px);line-height:1.08;letter-spacing:.05em;
  }
  .goshuin-date-overlay.goshuin-date-extra-long{
    font-size:clamp(10px,3.4vw,15px);line-height:1.02;letter-spacing:.02em;
  }
  .zukan-card-date-overlay.goshuin-date-long{
    font-size:clamp(5.5px,1.7vw,8px);line-height:1;letter-spacing:.02em;
  }
  .zukan-card-date-overlay.goshuin-date-extra-long{
    font-size:clamp(4.5px,1.4vw,6.5px);line-height:.98;letter-spacing:0;
  }
  .zukan-goshuin-area>.zukan-hidden-goshuin{height:100%}
  .zukan-hidden-goshuin{
    width:100%;height:82%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    color:#80796e;background:linear-gradient(145deg,#e9e2d5,#d8d0c1);
  }
  .zukan-hidden-goshuin svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5}
  .zukan-hidden-goshuin span{font-size:12px;font-weight:600;letter-spacing:.08em}
  .goshuin-visit-btn{
    width:100%;min-height:50px;border:0;border-radius:12px;
    color:#fff;background:var(--vermillion);font-size:15px;font-weight:700;
    cursor:pointer;box-shadow:0 3px 8px rgba(166,58,42,.2);
  }
  .goshuin-visit-btn.is-visited{
    color:#fff;background:#c9c9c9;border:0;box-shadow:none;cursor:default;
  }
  #viewZukan .view-header .sub{
    margin:18px 0 -38px;padding:14px 16px 13px;position:relative;z-index:2;
    color:var(--sumi);text-align:left;border:1px solid rgba(43,40,37,.1);
    border-radius:18px;background:#fbf7ef;box-shadow:0 8px 22px rgba(13,23,43,.2);
  }
  .zukan-progress-top{display:flex;align-items:center;justify-content:space-between}
  .zukan-progress-heading{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
  .zukan-progress-heading svg{width:18px;height:18px;fill:currentColor}
  .zukan-progress-label{font-size:12px;color:#625d54}
  .zukan-progress-count{font-size:26px;color:var(--sumi);line-height:1}
  .zukan-progress-count small{font-size:13px;color:#777064}
  .zukan-progress-track{height:5px;margin-top:11px;overflow:hidden;border-radius:8px;background:#ded6c9}
  .zukan-progress-fill{height:100%;border-radius:8px;background:var(--vermillion)}
  .zukan-progress-detail{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;color:#777064}
  .goshuin-guide{
    display:flex;align-items:flex-start;gap:7px;margin-top:11px;padding-top:10px;
    border-top:1px solid #ded6c9;color:#625d54;font-size:11px;line-height:1.55;
  }
  .goshuin-guide-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:17px;height:17px;border:1px solid currentColor;border-radius:50%;font-size:11px;font-weight:700}
  #viewZukan .zukan-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:70vh;
    padding:54px 14px 28px;border-radius:24px 24px 0 0;background:var(--washi-panel);
  }
  #viewZukan .zukan-card{
    aspect-ratio:3/4.65;border-radius:15px;background:#ded6c8;
    border:1px solid rgba(43,40,37,.12);box-shadow:0 3px 9px rgba(43,40,37,.12);
  }
  #viewZukan .zukan-card .zukan-goshuin-area,#viewZukan .zukan-card .zukan-noimg,#viewZukan .zukan-hidden-goshuin{height:78%}
  #viewZukan .zukan-goshuin-area>.zukan-hidden-goshuin{height:100%}
  #viewZukan .zukan-card .zukan-info{padding:8px 10px 10px;background:#fbf7ef}
  #viewZukan .zukan-card .zukan-no{
    min-width:28px;height:22px;padding:0 6px;font-size:12px;border-radius:7px;
  }
  #viewZukan .zukan-card .zukan-name{font-size:15px;font-weight:600;line-height:1.45}
  #viewZukan .zukan-stamp{
    top:auto;right:8px;bottom:8px;width:46px;height:46px;color:var(--vermillion);
    background:rgba(251,247,239,.94);border:2px solid var(--vermillion);box-shadow:none;
  }
  #viewZukan .zukan-stamp .kanji{font-size:9px}
  #viewZukan .zukan-stamp .n{font-size:13px}
  #viewZukan .zukan-visited-star{top:7px;right:7px;left:auto;width:29px;height:29px;font-size:14px}