/* Kioku — app.css
 * Minimal（既定）。Pop は pop.css で上書き。
 * 写真は assets/img/ を参照。
 */
:root{
    --bg:#F4F3EF;
    --bg-2:#FAFAF8;
    --surface:#FFFFFF;
    --ink:#191A1B;
    --ink-2:#5A5B5E;
    --ink-3:#9A9B9E;
    --line:#E7E5DF;
    --line-2:#EFEEE9;
    --field:#F1F0EB;
    --accent:#4C6152;        /* muted eucalyptus */
    --accent-soft:#E6EAE5;
    --accent-ink:#3B4E41;
    --r:16px;
    --r-sm:10px;
    --r-lg:22px;
    --shadow:0 1px 2px rgba(20,20,18,.04), 0 16px 34px -26px rgba(20,20,18,.28);
    --font:"Schibsted Grotesk","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  /* ============================================================
     App shell — 実機用。偽のスマホ枠は描かない。
     SP: ビューポート全面 + OSのステータスバー領域を safe-area で確保
     PC: 左サイドナビ + コンテンツ（枠の中にスマホを置かない）
     ============================================================ */
  html{height:100%;-webkit-text-size-adjust:100%}
  body{
    height:100%;
    font-family:var(--font);
    background:var(--bg-2);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    letter-spacing:-.005em;
    overscroll-behavior:none;
  }

  .app{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    background:var(--bg-2);
    /* OSの時計・電波・バッテリーの領域を侵さない */
    padding-top:env(safe-area-inset-top);
  }
  .appmain{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

  .views{flex:1 1 auto;position:relative;overflow:hidden}
  .view{
    position:absolute;inset:0;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    padding:8px 22px calc(104px + env(safe-area-inset-bottom));
    opacity:0;transform:translateY(6px);pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    scrollbar-width:none;
  }
  .view.active{opacity:1;transform:none;pointer-events:auto}

  .overlay{position:absolute;inset:0;z-index:50;background:rgba(20,20,18,.34);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s;display:flex;align-items:flex-end}

  /* 下タブ（SP） */
  .tabbar{
    position:absolute;left:0;right:0;bottom:0;z-index:30;
    display:flex;align-items:stretch;
    padding:11px 10px calc(12px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg-2) 90%, transparent);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--line-2);
  }
  @supports not (background: color-mix(in srgb, red 50%, blue)){
    .tabbar{background:var(--bg-2)}
  }

  /* サイドナビ（PCのみ） */
  .sidenav{display:none}

  /* ネイティブ感 */
  .app button,.app .tab,.app .chip,.app .sn-item{touch-action:manipulation}
  .tab,.sn-item,.tabbar,.sidenav{-webkit-user-select:none;user-select:none}
  .btn:active,.tab:active,.chip:active,.sn-item:active{transform:scale(.97)}
  .btn,.tab,.chip,.sn-item{transition:transform .12s ease}

  /* オフラインバー */
  .netbar{
    position:absolute;left:0;right:0;top:env(safe-area-inset-top);z-index:60;
    background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;
    text-align:center;padding:7px 12px;
    transform:translateY(-110%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  body.is-offline .netbar{transform:none}

  /* ホーム画面に追加 */
  .a2hs{
    position:absolute;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:45;
    display:flex;align-items:center;gap:11px;
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);padding:11px 12px;box-shadow:var(--shadow);
    animation:a2hs-in .4s cubic-bezier(.2,.7,.2,1);
  }
  @keyframes a2hs-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .a2hs[hidden]{display:none}
  .a2hs-ic{background:var(--life-red);color:#fff;font-family:"Archivo Black",sans-serif;
           font-size:13px;padding:7px 7px 8px;border-radius:7px;line-height:1}
  .a2hs-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .a2hs-tx b{font-size:13px;font-weight:600;letter-spacing:-.01em}
  .a2hs-tx span{font-size:11px;color:var(--ink-3);line-height:1.35}
  .a2hs-btn{background:var(--ink);color:#fff;border:0;border-radius:999px;
            padding:8px 15px;font-size:12.5px;font-weight:600;font-family:inherit}
  .a2hs-x{background:none;border:0;color:var(--ink-3);padding:4px;display:grid;place-items:center}
  .a2hs-x svg{width:15px;height:15px}

  /* ============================================================
     PC レイアウト
     ============================================================ */
  @media (min-width:900px){
    .app{flex-direction:row;padding-top:0}

    .sidenav{
      display:flex;flex-direction:column;gap:5px;
      width:250px;flex:0 0 250px;
      padding:26px 14px 18px;
      background:var(--bg);
      border-right:1px solid var(--line-2);
    }
    .sn-brand{display:flex;flex-direction:column;gap:5px;padding:0 10px 20px}
    .sn-logo{align-self:flex-start;background:var(--life-red);color:#fff;
             font-family:"Archivo Black","Noto Sans JP",sans-serif;
             font-size:19px;line-height:1;padding:7px 9px 8px;letter-spacing:.01em}
    .sn-studio{font-size:11.5px;color:var(--ink-3);letter-spacing:-.01em}
    .sn-nav{display:flex;flex-direction:column;gap:2px;flex:1}
    .sn-item{
      display:flex;align-items:center;gap:11px;
      border:0;background:none;cursor:pointer;
      color:var(--ink-2);font-family:inherit;font-size:13.5px;font-weight:500;
      padding:10px 11px;border-radius:11px;text-align:left;letter-spacing:-.01em;
    }
    .sn-item svg{width:19px;height:19px;flex:0 0 19px}
    .sn-item:hover{background:var(--field);color:var(--ink)}
    .sn-item.active{background:var(--surface);color:var(--ink);font-weight:600;
                    box-shadow:0 1px 2px rgba(20,20,18,.05)}
    .sn-user{
      display:flex;align-items:center;gap:10px;width:100%;
      border:0;background:none;cursor:pointer;padding:9px 10px;border-radius:12px;text-align:left;
      border-top:1px solid var(--line-2);border-radius:0;padding-top:14px;margin-top:8px;
    }
    .sn-user:hover{background:var(--field)}
    .sn-av{width:31px;height:31px;flex:0 0 31px;border-radius:50%;background:var(--accent);
           color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
    .sn-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
    .sn-nm{font-size:13px;font-weight:600;letter-spacing:-.01em}
    .sn-rk{font-size:10.5px;color:var(--ink-3)}

    .tabbar{display:none}
    .view{padding:34px 40px 60px}
    /* コンテンツは中央寄せの1カラム。スマホを引き伸ばした見た目にしない。
       セレクタを2重にして詳細度を上げる。単一クラスだと .yr{margin:20px 2px} 等に
       後勝ちされ、その要素だけ左にズレる。 */
    .view.view > *{max-width:720px;margin-left:auto;margin-right:auto}
    .vhead{padding-top:4px}
    .vhead h2{font-size:30px}

    /* PC: 画面全部を覆わない。右から半分だけ出る。 */
    .subview{
      --pad:30px;
      top:0;left:auto;right:0;bottom:0;
      width:min(52%, 620px);
      border-radius:0;
      border-left:1px solid var(--line-2);
      box-shadow:-18px 0 50px -20px rgba(20,20,18,.28);
      padding:0 var(--pad) 40px;
      transform:translateX(102%);
    }
    .subview .backbar{border-radius:0}
    .subview.subview > *{max-width:none;margin-left:0;margin-right:0}
    .subview .backbtn{display:none}

    /* ボトムシート → 中央のダイアログ */
    .overlay{align-items:center;justify-content:center}
    .sheet{max-width:520px;border-radius:22px;max-height:82%}
    .grab{display:none}

    .shelf{grid-template-columns:repeat(3,1fr)}
    .a2hs{display:none}
    .netbar{top:0}
  }
  @media (min-width:1280px){
    .view.view > *{max-width:780px}
  }

  .eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

  /* intro */



  .view::-webkit-scrollbar{display:none}
  .view.active{opacity:1;transform:none;pointer-events:auto}

  /* generic bits */
  .vhead{padding:14px 2px 20px}
  .vhead h2{font-size:25px;font-weight:600;line-height:1.1;letter-spacing:-.03em;margin-top:6px}
  .vhead p{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.5}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border:none;cursor:pointer;font-family:inherit;font-size:14px;letter-spacing:-.01em}
  .btn-ink{background:var(--ink);color:#fff;border-radius:13px;padding:14px 18px}
  .btn-ink:active{opacity:.9}
  /* inline-flex のままだとインラインレベル扱いになり margin:auto が効かず、
     PCで中央寄せから外れて左に寄る。ブロックレベルにする。 */
  .btn-block{display:flex;width:100%}
  /* インラインstyleで margin を書くと PC の中央寄せ(margin:auto)を殺す。
     レイアウトに関わる余白は必ずクラスで持たせること。 */
  .mag-pub{margin-top:16px}
  .mag-note{text-align:center;font-size:11.5px;color:var(--ink-3);margin-top:10px}
  .btn-ghost{background:none;border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:11px 16px}

  .icn{width:20px;height:20px;flex:0 0 auto}
  .icn-sm{width:16px;height:16px;flex:0 0 auto}

  .sect{display:flex;align-items:center;justify-content:space-between;margin:26px 2px 13px}
  .sect h3{font-size:14px;font-weight:600;letter-spacing:-.01em}
  .sect a,.sect button.link{font-size:12px;color:var(--accent-ink);font-weight:600;text-decoration:none;background:none;border:none;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px}

  .hair{height:1px;background:var(--line);border:none}

  /* photo placeholders — quiet tonal */
  .ph{position:relative;border-radius:var(--r-sm);overflow:hidden;background:#DAD8D1}
  .ph::after{content:attr(data-label);position:absolute;left:9px;bottom:8px;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(25,26,27,.5)}
  .t-a{background:linear-gradient(150deg,#E0DDD5,#CFCCC3)}
  .t-b{background:linear-gradient(150deg,#D5D2C9,#C4C1B8)}
  .t-c{background:linear-gradient(150deg,#E3E0D8,#D3D0C7)}
  .t-d{background:linear-gradient(150deg,#CFD1CB,#BEC0BA)}
  .t-e{background:linear-gradient(150deg,#DBD5CB,#CAC3B8)}
  .t-f{background:linear-gradient(150deg,#D3D0CA,#C2BFB9)}

  /* ===== HOME ===== */
  .greet{display:flex;align-items:center;gap:13px;padding:8px 2px 20px}
  .avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:600;flex:0 0 auto}
  .greet .dt{font-size:11px;letter-spacing:.04em;color:var(--ink-3);font-weight:500}
  .greet .nm{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-top:1px}
  .greet .bell{margin-left:auto;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2)}

  /* issue cover card */
  .issue{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow)}
  .cover{position:relative;height:210px;border-radius:15px;overflow:hidden}
  .cover .mast{position:absolute;left:16px;right:16px;top:15px;display:flex;justify-content:space-between;align-items:baseline;z-index:2}
  .cover .mast .nm{font-size:21px;font-weight:700;letter-spacing:.01em}
  .cover .mast .iss{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
  .cover .foot{position:absolute;left:16px;bottom:15px;z-index:2}
  .cover .foot .l1{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
  .cover .foot .l2{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:4px;max-width:230px;line-height:1.25}
  .issue .prog{display:flex;align-items:center;gap:12px;margin-top:15px;padding:0 2px}
  .issue .prog .barwrap{flex:1}
  .issue .prog .barwrap .top{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-2);font-weight:500;margin-bottom:7px}
  .issue .prog .barwrap .top b{color:var(--ink);font-weight:600}
  .issue .prog .bar{height:4px;border-radius:3px;background:var(--line);overflow:hidden}
  .issue .prog .bar i{display:block;height:100%;border-radius:3px;background:var(--accent);width:68%}
  .issue .btn-ink{margin-top:16px;padding:13px}

  /* two-stat */
  .duo{display:flex;margin-top:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
  .duo .cell{flex:1;padding:16px 16px}
  .duo .cell + .cell{border-left:1px solid var(--line-2)}
  .duo .cell .n{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:4px}
  .duo .cell .n small{font-size:12px;font-weight:500;color:var(--ink-3)}
  .duo .cell .k{font-size:11px;color:var(--ink-3);font-weight:500;margin-top:9px}

  /* rank — instrument card */
  .rank{margin-top:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:16px;cursor:pointer;box-shadow:var(--shadow)}
  .ring{width:58px;height:58px;flex:0 0 auto;position:relative}
  .ring svg{transform:rotate(-90deg)}
  .ring .lv{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:600;letter-spacing:-.02em}
  .rank .meta{flex:1}
  .rank .meta .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .rank .meta .rn{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-top:3px}
  .rank .meta .nx{font-size:11.5px;color:var(--ink-2);margin-top:4px}
  .rank .chev{color:var(--ink-3)}

  /* today mission row */
  .trow{margin-top:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:14px;cursor:pointer}
  .trow .txt{flex:1}
  .trow .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}
  .trow .t{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-top:3px}
  .trow .d{font-size:11.5px;color:var(--ink-3);margin-top:3px}
  .trow .chev{color:var(--ink-3)}

  /* recent entry (shared) */
  .entry{display:flex;gap:13px;align-items:center;padding:13px 0}
  .entry + .entry{border-top:1px solid var(--line-2)}
  .entry .ph{width:52px;height:52px;flex:0 0 auto;border-radius:9px}
  .entry .b{flex:1;min-width:0}
  .entry .b .ln{font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
  .entry .b .mt{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11px;color:var(--ink-3)}
  .entry .b .mt .dotsep{width:2px;height:2px;border-radius:50%;background:var(--ink-3)}
  .entry .b .mt .fav{color:var(--accent-ink);display:inline-flex}
  .entry .xp{font-size:11px;color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
  .listcard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:2px 16px}

  /* ===== RECORD ===== */
  .composer{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:16px}
  .composer .addrow{display:flex;gap:14px}
  .addphoto{width:70px;height:70px;border-radius:12px;border:1px solid var(--line);background:var(--field);display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;color:var(--ink-3);cursor:pointer;flex:0 0 auto}
  .addphoto span{font-size:9.5px;font-weight:600;letter-spacing:.02em}
  .composer .field{flex:1;min-width:0}
  .composer input.line{width:100%;border:none;background:transparent;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);padding:5px 0 8px;letter-spacing:-.01em}
  .composer input.line::placeholder{color:var(--ink-3)}
  .composer .uh{height:1px;background:var(--line-2);margin-bottom:11px}
  .chips{display:flex;flex-wrap:wrap;gap:7px}
  .chip{font-size:11.5px;font-weight:500;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;white-space:nowrap;letter-spacing:-.01em}
  .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
  .composer .save{display:flex;align-items:center;gap:11px;margin-top:16px}
  .composer .save .btn{flex:1}
  .heart{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:transparent;display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
  .heart.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}

  .streak{display:flex;align-items:center;gap:14px;margin:22px 2px 6px}
  .streak .n{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1}
  .streak .lab{font-size:12px;color:var(--ink-2);font-weight:500}
  .streak .week{margin-left:auto;display:flex;gap:6px}
  .streak .d{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);background:transparent}
  .streak .d.on{background:var(--accent);border-color:var(--accent)}

  .dgroup{margin-top:20px}
  .dgroup .dl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:0 2px 10px}

  /* ===== MISSIONS (subview) ===== */
  .subview{
    --pad:20px;
    position:absolute;left:0;right:0;bottom:0;top:12%;z-index:26;
    background:var(--bg-2);
    border-radius:22px 22px 0 0;
    box-shadow:0 -8px 40px -12px rgba(20,20,18,.3);
    overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
    /* 上は0。ヘッダ自身が余白を持ち、top:0 にぴたりと貼り付く */
    padding:0 var(--pad) calc(104px + env(safe-area-inset-bottom));
    transform:translateY(102%);
    transition:transform .34s cubic-bezier(.22,.7,.2,1);
    scrollbar-width:none;
  }
  /* 背後を暗くする幕。ここを触ったら閉じる */
  .subveil{
    position:absolute;inset:0;z-index:25;background:rgba(20,20,18,.34);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .subveil.open{opacity:1;pointer-events:auto}
  .subview::-webkit-scrollbar{display:none}
  .subview.open{transform:none}
  .subview .backbar .x{margin-left:auto}
  .backbar{
    position:sticky;top:0;z-index:5;
    display:flex;align-items:center;gap:12px;
    /* 透けさせない。半透明グラデだと下の中身が見えて「上部が変」になる */
    background:var(--bg-2);
    margin:0 calc(var(--pad, 22px) * -1);
    padding:14px var(--pad, 22px) 11px;
    border-bottom:1px solid var(--line-2);
    border-radius:22px 22px 0 0;
  }
  .backbtn{width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
  .backbar .bt{font-size:18px;font-weight:600;letter-spacing:-.02em}

  .catrow{display:flex;gap:8px;overflow-x:auto;padding:2px var(--pad, 22px) 14px;margin:0 calc(var(--pad, 22px) * -1);scrollbar-width:none}
  .catrow::-webkit-scrollbar{display:none}

  .mcard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:16px;margin-bottom:11px}
  .mcard .mk{display:flex;align-items:center;justify-content:space-between}
  .mcard .cat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .mcard .rw{font-size:11px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:4px 9px;letter-spacing:-.01em}
  .mcard h4{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-top:9px}
  .mcard .desc{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.45}
  .mbar{height:3px;border-radius:2px;background:var(--line);margin-top:14px;overflow:hidden}
  .mbar i{display:block;height:100%;border-radius:2px;background:var(--accent)}
  .mfoot{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
  .mcard.done{background:var(--bg-2)}
  .mcard.done h4{color:var(--ink-2)}
  .mfoot .ok{color:var(--accent-ink);display:inline-flex;align-items:center;gap:5px;font-weight:600}
  .mcard.studio{border-color:var(--accent-soft)}
  .studio-lead{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);font-weight:600;margin-bottom:10px}
  .studio-lead::before{content:"";width:14px;height:1px;background:var(--accent)}

  /* ===== MAGAZINE ===== */
  .mhero{position:relative;height:236px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2)}
  .mhero .mast{position:absolute;left:18px;right:18px;top:17px;display:flex;justify-content:space-between;align-items:baseline;z-index:2}
  .mhero .mast .nm{font-size:23px;font-weight:700}
  .mhero .mast .iss{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
  .mhero .foot{position:absolute;left:18px;bottom:17px;z-index:2}
  .mhero .foot .l1{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
  .mhero .foot .l2{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:4px}

  .enote{margin-top:16px;padding-left:14px;border-left:1px solid var(--accent)}
  .enote .eh{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}
  .enote p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-top:9px;letter-spacing:-.005em}

  .chap{display:flex;gap:14px;align-items:center;padding:14px 0}
  .chap + .chap{border-top:1px solid var(--line-2)}
  .chap .ph{width:60px;height:60px;flex:0 0 auto;border-radius:10px}
  .chap .cn{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .chap h4{font-size:15.5px;font-weight:600;letter-spacing:-.02em;margin-top:3px}
  .chap .cm{font-size:11.5px;color:var(--ink-3);margin-top:3px}
  .chap.opener .cn{color:var(--accent-ink)}
  .chaplist{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:2px 16px}

  .bestpick{margin-top:6px}
  .bestpick .ph{height:170px;border-radius:var(--r)}
  .bestpick .cap{display:flex;align-items:baseline;gap:9px;margin-top:11px}
  .bestpick .cap .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .bestpick .cap .t{font-size:15px;font-weight:600;letter-spacing:-.02em}

  /* ===== PROFILE ===== */
  .pf-head{display:flex;align-items:center;gap:14px;padding:10px 2px 8px}
  .pf-head .avatar{width:54px;height:54px;font-size:19px}
  .pf-head .pn{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
  .pf-head .pr{font-size:12px;color:var(--ink-3);font-weight:500;margin-top:3px}
  .pf-head .gear{margin-left:auto;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);cursor:pointer}

  .yr{margin:20px 2px 0}
  .yr .yt{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-2);font-weight:500;margin-bottom:8px}
  .yr .yt b{color:var(--ink);font-weight:600}
  .yr .track{height:4px;border-radius:3px;background:var(--line);overflow:hidden}
  .yr .track i{display:block;height:100%;border-radius:3px;background:var(--accent);width:0;transition:width 1s ease}
  .viewrank{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:12px;font-weight:600;color:var(--accent-ink);cursor:pointer;background:none;border:none;font-family:inherit;padding:0}

  .stat3{display:flex;margin-top:18px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
  .stat3 .c{flex:1;padding:17px 8px;text-align:center}
  .stat3 .c + .c{border-left:1px solid var(--line-2)}
  .stat3 .c .n{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1}
  .stat3 .c .k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:9px}

  /* ============================================================
     クーポン券。切り欠き＋ミシン目でチケットらしく見せる。
     ============================================================ */
  .coupon{
    --stub:86px;
    position:relative;
    background:var(--surface);
    border-radius:14px;
    margin-bottom:12px;
    box-shadow:0 1px 2px rgba(20,20,18,.05), 0 10px 24px -20px rgba(20,20,18,.5);
  }

  .ctop{display:flex;align-items:stretch;min-height:78px}
  .coupon .cs{
    flex:0 0 var(--stub);width:var(--stub);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:12px 6px;
    color:var(--accent-ink);
    background:var(--field);
    border-radius:14px 0 0 14px;
    /* ミシン目 */
    border-right:1.5px dashed var(--line);
    text-align:center;
  }
  .cs-v{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.18;white-space:pre-line}
  .cs-k{font-size:8px;font-weight:700;letter-spacing:.14em;color:var(--ink-3)}
  .coupon .cc{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:13px 15px}
  .coupon .ct{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
  .coupon .cd{font-size:11px;color:var(--ink-3)}
  .coupon .cn{font-size:10.5px;color:var(--ink-3);opacity:.75}

  /* コード欄（添付のCOPYボタン相当）。ここが券の切り取り線になる。 */
  .cbot{
    position:relative;
    display:flex;align-items:center;gap:8px;
    padding:10px 12px 12px;
    border-top:1.5px dashed var(--line);
  }
  /* 左右の切り欠き。背景色で抜くので overflow は visible のまま */
  .cbot::before,.cbot::after{
    content:'';position:absolute;top:-7px;
    width:14px;height:14px;border-radius:50%;
    background:var(--bg-2);z-index:2;
  }
  .cbot::before{left:-7px}
  .cbot::after{right:-7px}
  .ccode{
    flex:1;min-width:0;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink-2);
    background:var(--field);border-radius:8px;padding:8px 10px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .ccopy{
    flex:0 0 auto;border:0;border-radius:8px;cursor:pointer;font-family:inherit;
    background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;padding:9px 14px;
    transition:transform .12s ease, background .2s;
  }
  .ccopy:active{transform:scale(.95)}
  .ccopy.done{background:var(--accent)}

  .coupon.used{box-shadow:none;background:transparent;border:1px dashed var(--line)}
  .coupon.used .cs{background:transparent;color:var(--ink-3);border-right-color:var(--line-2)}
  .coupon.used .ct,.coupon.used .cd{color:var(--ink-3)}
  .coupon.used .cs-v{text-decoration:line-through;text-decoration-thickness:1.5px}

  .amission{display:flex;align-items:center;gap:12px;padding:13px 0}
  .amission + .amission{border-top:1px solid var(--line-2)}
  .amission .ck{width:22px;height:22px;border-radius:50%;border:1px solid var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:0 0 auto}
  .amission .at{font-size:14px;font-weight:600;letter-spacing:-.01em}
  .amission .ad{font-size:11px;color:var(--ink-3);margin-top:2px}
  .amission .ax{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}

  /* book shelf */
  .shelf{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;margin-top:10px}
  .bookt{cursor:pointer}
  .bookt .bc{position:relative;height:180px;border-radius:2px 8px 8px 2px;overflow:hidden;box-shadow:4px 8px 20px -14px rgba(20,20,18,.5);border:1px solid var(--line-2)}
  .bookt .bc .spine{position:absolute;left:0;top:0;bottom:0;width:5px;z-index:3;background:linear-gradient(90deg,rgba(20,20,18,.16),transparent)}
  .bookt .bc .pages{position:absolute;right:0;top:5px;bottom:5px;width:3px;z-index:3;background:repeating-linear-gradient(0deg,#eceae3,#eceae3 1px,#dcd9d0 1px,#dcd9d0 2px)}
  .bookt .bmh{position:absolute;left:15px;right:12px;top:14px;z-index:2}
  .bookt .bmh .t{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
  .bookt .bmh .d{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:3px;font-weight:600}
  .bookt .bcap{margin-top:11px;font-size:11px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:7px;padding:0 1px}
  .bookt .bcap .bd{margin-left:auto;color:var(--accent-ink);font-weight:600}
  .bookt.opener .bc{box-shadow:4px 8px 20px -14px rgba(20,20,18,.5);border-color:var(--accent)}

  /* tab bar */
  .tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:none;background:none;cursor:pointer;color:var(--ink-3);padding:2px 4px;font-family:inherit}
  .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab span{font-size:9.5px;font-weight:600;letter-spacing:.01em}
  .tab svg{width:22px;height:22px}
  .tab.active{color:var(--accent-ink)}

  /* rank overlay */
  .overlay.open{opacity:1;pointer-events:auto}
  .sheet{width:100%;max-height:87%;overflow-y:auto;background:var(--bg-2);border-radius:26px 26px 44px 44px;padding:22px 22px 36px;transform:translateY(24px);transition:transform .3s;scrollbar-width:none}
  .sheet::-webkit-scrollbar{display:none}
  .overlay.open .sheet{transform:none}
  .grab{width:38px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 18px}
  .sheet-h{display:flex;align-items:center;gap:14px;margin-bottom:20px}
  .sheet-h .ring{width:52px;height:52px}
  .sheet-h .rk{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .sheet-h .rn{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
  .closebtn{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-2);cursor:pointer}

  .ladder{position:relative;margin-top:4px}
  .ladder::before{content:"";position:absolute;left:11px;top:20px;bottom:20px;width:1px;background:var(--line)}
  .step{display:flex;gap:14px;align-items:center;padding:12px 0;position:relative}
  .step .node{width:23px;height:23px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg-2);color:var(--ink-3);z-index:2}
  .step.reached .node{background:var(--accent);border-color:var(--accent);color:#fff}
  .step.current .node{background:var(--ink);border-color:var(--ink);color:#fff}
  .step .st{flex:1}
  .step .st b{font-size:15px;font-weight:600;letter-spacing:-.01em}
  .step .st p{font-size:11px;color:var(--ink-3);margin-top:1px}
  .step .perk{font-size:11px;color:var(--ink-2);font-weight:500}
  .step.reached .perk{color:var(--accent-ink)}

  .subt{font-size:14px;font-weight:600;margin:26px 2px 14px;letter-spacing:-.01em}
  .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .badge{aspect-ratio:1;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--ink-2)}
  .badge small{font-size:8.5px;font-weight:600;color:var(--ink-3);text-align:center;line-height:1.15;padding:0 3px}
  .badge.locked{opacity:.4}


  /* real photos */
  .ph-photo{background-size:cover;background-position:center}
  .ph-photo::after{display:none}

  :root{--life-red:#E10600}
  /* LIFE-style covers */
  .life{position:relative;background-size:cover;background-position:center 28%;border:6px solid var(--life-red);border-radius:3px;overflow:hidden}
  .life::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 44%,rgba(0,0,0,.62))}
  .life > *{position:relative;z-index:2}
  .life-logo{position:absolute;top:0;left:0;background:var(--life-red);color:#fff;font-family:"Archivo Black","Noto Sans JP",sans-serif;font-size:25px;line-height:.86;letter-spacing:.005em;padding:8px 11px 9px;text-transform:uppercase}
  .life-lines{position:absolute;top:9px;right:12px;text-align:right;display:flex;flex-direction:column;gap:6px;max-width:54%;align-items:flex-end}
  .life-lines span{color:#fff;font-family:"Fraunces",serif;font-size:10.5px;font-weight:600;line-height:1.12;padding-top:5px;border-top:2px solid var(--life-red)}
  .life-head{position:absolute;left:14px;bottom:13px;max-width:76%}
  .life-head .h{font-family:"Fraunces",serif;font-weight:700;color:#fff;font-size:22px;line-height:1.02;letter-spacing:-.01em}
  .life-head .sub{font-family:"Fraunces",serif;font-size:11px;color:rgba(255,255,255,.92);margin-top:6px;font-weight:500}
  .life-date{position:absolute;right:13px;bottom:14px;color:#fff;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;font-family:"Schibsted Grotesk",sans-serif}
  /* LIFE mini (library) */
  .life-mini{position:relative;background-size:cover;background-position:center 30%;border:4px solid var(--life-red);border-radius:2px;overflow:hidden}
  .life-mini::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.16),transparent 42%,transparent 58%,rgba(0,0,0,.52))}
  .life-mini > *{position:relative;z-index:2}
  .life-mini .life-logo{font-size:15px;padding:4px 7px 5px}
  .life-mini .ml-date{position:absolute;left:9px;bottom:9px;color:#fff;font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
  .life-mini .ml-sub{position:absolute;left:9px;bottom:22px;color:#fff;font-size:9px;font-weight:600;font-family:"Fraunces",serif}
  @media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}


  /* 空状態 */
  .empty{display:flex;flex-direction:column;align-items:center;text-align:center;
         padding:38px 22px;background:var(--surface);border:1px solid var(--line-2);
         border-radius:var(--r);margin-top:8px}
  .empty-ic{width:42px;height:42px;border-radius:50%;background:var(--field);
            display:grid;place-items:center;color:var(--ink-3);margin-bottom:12px}
  .empty-ic svg{width:21px;height:21px}
  .empty h4{font-size:14.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
  .empty p{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-bottom:16px;max-width:260px}

  /* PC: ホームは2カラム（表紙を主役に、指標は右へ）。スマホの引き伸ばしにしない。 */
  @media (min-width:1180px){
    #v-home{
      display:grid;
      grid-template-columns:minmax(0,600px) minmax(0,330px);
      justify-content:center;
      align-content:start;
      column-gap:26px;
    }
    #v-home.view > *{max-width:none;margin-left:0;margin-right:0}
    #v-home > .greet{grid-column:1 / -1}
    #v-home > .slides{grid-column:1 / -1;margin-bottom:18px}
    #v-home > .slides .slide-stage{aspect-ratio:auto;height:clamp(340px, 34vw, 470px)}
    #v-home > .issue{grid-column:1;grid-row:3 / span 5;align-self:start;margin-top:0}
    #v-home > *:not(.greet):not(.slides):not(.issue){grid-column:2}
    #v-home .cover{height:318px}
  }

  /* ============================================================
     未定義だったクラス群（テンプレートでは使われていたが素のdivだった）
     ============================================================ */

  /* profile: 見出し */
  .pi{display:flex;flex-direction:column;gap:3px;min-width:0}
  .pm{font-size:11.5px;color:var(--ink-3);letter-spacing:-.01em;line-height:1.45}

  /* profile: 年間の進捗 */
  .yh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
  .yh span{font-size:12.5px;color:var(--ink-2);letter-spacing:-.01em}
  .yh b{font-size:12.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
  .yn{font-size:11.5px;color:var(--ink-3);line-height:1.55;margin-top:10px}

  /* profile: クーポン / 実績 */
  .cc{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .ab{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .axp{font-size:11.5px;font-weight:600;color:var(--accent);flex:0 0 auto;
       font-variant-numeric:tabular-nums}

  /* rank sheet */
  .x{width:30px;height:30px;flex:0 0 30px;margin-left:auto;border:0;border-radius:50%;
     background:var(--field);color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
  .x svg{width:15px;height:15px}
  .sheet-xp{display:flex;align-items:baseline;gap:9px;margin:-8px 0 20px;flex-wrap:wrap}
  .sheet-xp span:first-child{font-size:23px;font-weight:700;letter-spacing:-.03em;
                             font-variant-numeric:tabular-nums}
  .sheet-xp span + span{font-size:11.5px;color:var(--ink-3)}
  .sb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .sn{font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
  .sx{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

  /* badges */
  .bi{width:30px;height:30px;border-radius:50%;background:var(--field);
      display:grid;place-items:center;color:var(--ink-2)}
  .bi svg{width:16px;height:16px}
  .bn{font-size:10.5px;font-weight:500;text-align:center;line-height:1.3;
      padding:0 6px;letter-spacing:-.01em}

  /* magazine: 目次のサムネ / 扉バッジ / Editor's pick */
  .cth{width:56px;height:56px;flex:0 0 56px;border-radius:11px;overflow:hidden;
       background:var(--field);background-size:cover;background-position:center}
  .cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .opb{display:inline-block;background:var(--life-red);color:#fff;font-size:9px;font-weight:700;
       letter-spacing:.04em;padding:2px 5px;border-radius:4px;vertical-align:1px;margin-left:5px}
  .bp{height:150px;border-radius:13px;background-size:cover;background-position:center;
      background-color:var(--field)}

  /* ============================================================
     スライドショー
     ============================================================ */
  .slides{position:relative;margin:0 0 4px;border-radius:var(--r-lg);overflow:hidden;
          background:var(--field);border:1px solid var(--line-2)}
  .slide-stage{position:relative;aspect-ratio:4/3}
  .slide{position:absolute;inset:0;margin:0;overflow:hidden;
         opacity:0;transition:opacity .9s ease;pointer-events:none}
  /* 背面: 切り抜いてぼかした敷き。左右の余白を埋めるためだけの存在 */
  .sl-bg{position:absolute;inset:0;background-image:var(--img);
         background-size:cover;background-position:center;
         filter:blur(30px) saturate(1.15) brightness(.72);transform:scale(1.25)}
  /* 前面: 写真そのもの。切り抜かない＝必ず全体が写る */
  .sl-fg{position:absolute;inset:0;background-image:var(--img);
         background-size:contain;background-repeat:no-repeat;background-position:center}
  .slide.on{opacity:1}
  .slide figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;
                    padding:34px 14px 13px;color:#fff;
                    background:linear-gradient(to top, rgba(12,12,13,.62), rgba(12,12,13,0))}
  .sl-d{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
  .sl-t{font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.4;
        overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .slide-dots{position:absolute;right:11px;bottom:11px;display:flex;gap:5px;z-index:2}
  .sl-dot{width:6px;height:6px;padding:0;border:0;border-radius:50%;cursor:pointer;
          background:rgba(255,255,255,.42);transition:background .25s, width .25s}
  .sl-dot.on{background:#fff;width:16px;border-radius:3px}

  /* ============================================================
     写真タイル（実ファイル選択）
     ============================================================ */
  .addphoto{position:relative;overflow:hidden;cursor:pointer}
  .ap-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
            width:100%;height:100%}
  .ap-prev{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:inherit}
  .ap-prev[hidden]{display:none}
  .ap-x{position:absolute;top:4px;right:4px;z-index:2;width:20px;height:20px;padding:0;
        border:0;border-radius:50%;background:rgba(12,12,13,.62);color:#fff;
        display:grid;place-items:center;cursor:pointer}
  .ap-x[hidden]{display:none}
  .ap-x svg{width:11px;height:11px}
  .composer.is-busy{opacity:.6;pointer-events:none}
  .cerr{font-size:11.5px;color:var(--life-red);margin-top:8px;line-height:1.5}
  .cerr[hidden]{display:none}

  /* ============================================================
     狭い画面（〜360px）。文字と余白を素直に落とす。
     ============================================================ */
  @media (max-width:360px){
    .view{padding-left:16px;padding-right:16px}
    .subview{--pad:16px}
    .vhead h2{font-size:23px}
    .vhead p{font-size:12px}
    .greet{gap:10px;padding-bottom:16px}
    .greet .nm{font-size:17px}
    .avatar{width:38px;height:38px;flex:0 0 38px;font-size:14px}
    .chips{gap:5px}
    .chip{padding:6px 10px;font-size:11.5px}
    .duo .n,.stat3 .n{font-size:23px}
    .pn{font-size:18px}
    .pm{font-size:11px}
    .shelf{gap:12px}
    .sheet{padding-left:16px;padding-right:16px}
    .sheet-xp span:first-child{font-size:20px}
    .badge{border-radius:12px}
    .bn{font-size:9.5px}
  }

  /* ============================================================
     ミッション: 未達成 / 達成済み の切り替え
     ============================================================ */
  .seg{display:flex;gap:4px;background:var(--field);border-radius:11px;padding:3px;margin:0 0 12px;position:relative;z-index:1}
  .seg-b{flex:1 1 0;border:0;background:none;cursor:pointer;font-family:inherit;
         font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:-.01em;
         padding:8px 6px;border-radius:9px;transition:background .2s, color .2s}
  .seg-b b{font-weight:600;opacity:.55;margin-left:2px;font-variant-numeric:tabular-nums}
  .seg-b.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,20,18,.06)}
  .mcard[hidden]{display:none}
  .mnone{text-align:center;color:var(--ink-3);font-size:12.5px;padding:30px 10px}
  .mnone[hidden]{display:none}

  /* プロフィールのミッション導線 */
  .trow-btn{width:100%;text-align:left;border:1px solid var(--line-2);background:var(--surface);
            cursor:pointer;font-family:inherit;color:inherit}
  .trow-ic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--field);
           display:grid;place-items:center;color:var(--ink-2)}
  .trow-ic svg{width:18px;height:18px}

  /* ============================================================
     記録の編集
     ============================================================ */
  .sheet-edit{max-height:none}
  .ed-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
  .ed-ph{width:70px;height:70px;flex:0 0 70px;border-radius:12px;background:var(--field);
         background-size:cover;background-position:center;border:1px solid var(--line-2)}
  .ed-act{display:flex;gap:10px;align-items:center}
  .ed-act .btn{flex:1}
  .ed-del{display:block;width:100%;margin-top:14px;padding:11px;border:0;background:none;
          cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--life-red)}
  .ed-del:disabled{opacity:.5}

  /* 記録カードを押せることを示す */
  .entry{position:relative;cursor:pointer}
  .epen{position:absolute;top:50%;right:0;transform:translateY(-50%);
        color:var(--ink-3);opacity:0;transition:opacity .2s;pointer-events:none}
  .epen svg{width:14px;height:14px;display:block}
  .entry:hover .epen{opacity:.7}
  .entry:hover{background:var(--field)}
  .entry:active{transform:scale(.995)}

  /* .view / .subview の直下に置く要素は、余白をインラインstyleで書かないこと。
     PCの中央寄せ（margin:auto）を打ち消してその要素だけ左にズレる。 */
  .hair-gap{margin-top:14px}
  .rank-gap{margin-top:14px}
  .sub-lead{font-size:12.5px;color:var(--ink-3);margin:10px 0 12px;line-height:1.5}