:root{--ink:#171717;--muted:#626262;--line:#dedede;--surface:#f4f4f4;--paper:#fafafa;--accent:#0b6e7a;--accent-soft:#e4f6f8;--page:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 15px/1.8 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif;line-break:strict;overflow-wrap:break-word}
body.lock{overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,p,ol{margin:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap{max-width:var(--page);margin:0 auto;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
header{padding-top:24px}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.wordmark{font-size:13px;font-weight:700;letter-spacing:.16em;line-height:1.6}
.masthead-right{display:flex;align-items:center;gap:16px}
.edition{font-size:13px;color:var(--muted);line-height:1.6}
h1{margin-top:24px;font:900 28px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.055em;white-space:nowrap}
.intro{margin-top:16px;font-size:15px;line-height:1.8;color:var(--muted);max-width:640px}

/* ボタン3種 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:6px;font-size:15px;font-weight:700;line-height:1.4;border:1px solid transparent;text-decoration:none}
.btn svg{width:16px;height:16px;flex:none}
.btn.quiet{background:var(--surface);color:var(--ink)}
.btn.primary{background:var(--accent);color:#fff;width:100%}
.btn.secondary{background:#fff;color:var(--accent);border-color:var(--accent)}
.btn.is-done{background:var(--accent-soft);color:var(--ink);border-color:var(--accent)}
.btn.is-done svg{stroke:var(--ink)}

/* タブ */
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:32px}
.tab{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:4px;row-gap:0;min-height:48px;padding:0 4px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap}
.tab .n{font-size:13px;font-weight:400;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tab[aria-selected="true"] .n{color:var(--line)}

/* パネル */
.panel{padding-top:24px;padding-bottom:24px}
.panel[hidden]{display:none}
.panel h2.sec{margin:48px 0 16px;font-size:18px;font-weight:700;line-height:1.4}
.panel h2.sec:first-child{margin-top:0}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:16px;width:16px;height:16px;stroke:var(--muted);pointer-events:none}
.search input{width:100%;min-height:48px;padding:0 48px 0 48px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:16px}
.search .clear{position:absolute;right:0;width:48px;height:48px;border:0;background:none;font-size:18px;color:var(--muted)}
.resultbar{margin:16px 0 24px;font-size:13px;line-height:1.6;color:var(--muted)}
.empty{padding:48px 0;text-align:center}
.empty h3{font-size:18px;font-weight:700;line-height:1.4}
.empty p{margin:8px 0 24px;font-size:13px;line-height:1.6;color:var(--muted)}
.to-menu{margin-top:48px}

/* グリッドカード */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.gcard{min-width:0}
.gcard-btn{display:block;width:100%;padding:0;border:0;background:none;text-align:left}
.thumb{position:relative;display:block;aspect-ratio:1/1;border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;padding:8px}
.thumb .count{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:6px;background:#fff;color:var(--ink);font-size:13px;line-height:1.6}
.thumb-text{padding:16px}
.thumb-text .doc{position:absolute;left:16px;top:16px;width:16px;height:16px;stroke:var(--muted)}
.thumb-text .excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden;margin-top:24px;font-size:13px;line-height:1.6;color:var(--muted)}
.thumb-text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(to bottom,rgba(244,244,244,0),var(--surface))}
.kicker{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted)}
.ttl{display:block;margin-top:8px;font-size:15px;font-weight:700;line-height:1.4}
.kicker+.ttl{margin-top:0}
.ph{display:inline-block}

/* リストカード */
.list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.lcard{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:6px;min-width:0}
.lcard-main{display:block;width:100%;padding:0;border:0;background:none;text-align:left}
.lcard-note{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted)}
.lcard-excerpt{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted)}
.lcard .btn{margin-top:8px;width:100%}
.gpts{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;color:var(--ink);text-decoration:none}
.gpts .ttl{margin:0}
.gpts small{display:block;font-size:13px;font-weight:400;line-height:1.6;color:var(--muted)}
.gpts svg{width:24px;height:24px;flex:none;stroke:var(--accent)}

/* プロンプト表示 */
.pbox{padding:16px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;line-break:strict;-webkit-user-select:text;user-select:text}
.chip{padding:0 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hint{margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted)}
.nopromt{font-size:13px;line-height:1.6;color:var(--muted)}

/* 詳細シート */
dialog{padding:0;border:0;color:var(--ink);background:#fff}
dialog::backdrop{background:rgba(0,0,0,.4)}
#detail{position:fixed;inset:16px 0 0 0;margin:0;width:100%;max-width:100%;height:calc(100dvh - 16px);max-height:none;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.16);overflow:auto;overscroll-behavior:contain}
#detail[open],#howto[open]{display:flex;flex-direction:column}
.sheet-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 16px;background:#fff;border-bottom:1px solid var(--line);flex:none}
.sheet-top .btn{min-width:72px}
.sheet-tab{font-size:13px;line-height:1.6;color:var(--muted)}
.sheet-body{flex:1;padding:16px 16px 24px}
.sheet-media{margin-bottom:24px}
.gmain{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);aspect-ratio:1/1;max-height:45dvh;overflow:hidden}
.gmain img{width:100%;height:100%;object-fit:contain;padding:8px}
.gthumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.gthumb{width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden}
.gthumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.gthumb[aria-current="true"]{border:2px solid var(--ink)}
.sheet-title{margin-top:0;font-size:18px;font-weight:700;line-height:1.4}
.sheet-note{margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted);white-space:pre-line}
.sheet-prompts{margin-top:24px;display:flex;flex-direction:column;gap:24px}
.prow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.prow h3{font-size:15px;font-weight:700;line-height:1.4}
.prow .btn{min-width:48px}
.copybar{position:sticky;bottom:0;margin-top:auto;padding:16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:#fff;border-top:1px solid var(--line);flex:none}

/* 画像拡大 */
#zoom{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;background:rgba(0,0,0,.9);color:#fff}
#zoom[open]{display:block}
#zoom::backdrop{background:#000}
.zstage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:72px 0 48px}
.zstage img{max-width:100%;max-height:100%;width:auto;height:auto;touch-action:pinch-zoom}
.zclose{position:absolute;top:8px;right:calc(8px + env(safe-area-inset-right));z-index:2;min-width:72px;background:#fff;color:var(--ink)}
.zcount{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13px;line-height:1.6;color:#fff}
.znav{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;border:0;border-radius:6px;background:rgba(255,255,255,.88);color:var(--ink);font-size:24px;line-height:1}
.zprev{left:8px}.znext{right:8px}
.znav[hidden],.zcount:empty{display:none}

/* 使い方 */
#howto{position:fixed;inset:0;margin:auto;width:min(480px,calc(100% - 32px));height:fit-content;max-height:calc(100dvh - 32px);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.16);overflow:auto}
.howto-list{margin:0;padding:24px 16px 24px 40px;font-size:15px;line-height:1.8;display:flex;flex-direction:column;gap:8px}

/* コツ */
.tip{max-width:640px}
.tip p{margin-top:16px;white-space:pre-line}
.tip h2.sec{margin-top:48px}
.tip:first-child h2.sec{margin-top:0}
.tip-imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.tip-imgs button{padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden;aspect-ratio:1/1}
.tip-imgs img{width:100%;height:100%;object-fit:contain}
.tip-prompt{margin-top:16px}

.foot{padding-top:24px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.noscript{padding-top:24px;font-size:13px;color:var(--muted)}

@media (min-width:640px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .list{grid-template-columns:repeat(2,minmax(0,1fr))}
  #detail{inset:0;margin:auto;width:min(960px,calc(100% - 48px));height:auto;max-height:calc(100dvh - 48px);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.16)}
  .tabs{max-width:640px}
  h1{font-size:28px}
}
@media (min-width:720px){
  .sheet-body.has-media{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:start}
  .sheet-body.has-media .sheet-media{margin-bottom:0}
  .gmain{max-height:none}
  .sheet-body:not(.has-media) .sheet-main{max-width:640px;margin:0 auto}
  .copybar .btn{max-width:480px;display:flex;margin:0 auto}
}
@media (min-width:960px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}