/* yosoku-gas.com Public UI Phase 1 — mobile-first, dark mode via prefers-color-scheme */
:root {
  color-scheme: light dark;
  --bg: #FFFFFF; --bg2: #F9FAFB; --surface: #FFFFFF;
  --border: #E5E7EB; --text: #1A1A1A; --muted: #6B7280; --hint: #9CA3AF;
  --accent: #1D4ED8; --header-h: 56px; --max-w: 540px; --radius: 24px;
  --shadow: 0 4px 24px rgba(0,0,0,0.06);
}
@media(prefers-color-scheme:dark){:root{
  --bg:#121212;--bg2:#0D0D0D;--surface:#1E1E1E;--border:#333;
  --text:#E0E0E0;--muted:#9CA3AF;--hint:#6B7280;--shadow:0 4px 24px rgba(0,0,0,0.3);
}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer;border:none;background:none}
a{color:var(--accent)}

.page-wrap{min-height:100dvh;display:flex;flex-direction:column}
.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--border);z-index:40}
.site-logo{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:900;color:var(--accent);text-decoration:none;letter-spacing:-0.02em}
.header-date{font-size:12px;color:var(--hint);white-space:nowrap}

.main-container{flex:1;max-width:var(--max-w);width:100%;margin:0 auto;padding:calc(var(--header-h)+48px) 16px 32px}
.loading-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;gap:16px}
.spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-state{color:var(--muted)}

/* Layer 1 */
.layer-1{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 0 24px;min-height:calc(50vh - var(--header-h));justify-content:center}
.icon-circle{width:180px;height:180px;border-radius:50%;display:grid;place-items:center;border:3px solid transparent;animation:bounce 2s cubic-bezier(.4,0,.2,1) infinite;transition:background-color .4s,border-color .4s}
.icon-emoji{font-size:72px;line-height:1;user-select:none}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.main-copy{font-size:24px;font-weight:700;margin:20px 0 4px;transition:color .4s}
.sub-copy{font-size:14px;color:var(--muted);margin:0 0 16px}
.explain-link{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.explain-link:hover{color:var(--text)}

/* Ad placeholder */
.ad-slot{width:100%;min-height:50px;border:1px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--hint);font-size:12px;margin:12px 0;background:var(--bg2)}

/* Layer 2 */
.accordion-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 12px;font-size:16px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);text-align:left}
.accordion-arrow{display:inline-block;transition:transform .3s;font-size:14px;color:var(--muted)}
.accordion-arrow.is-open{transform:rotate(180deg)}
.accordion-peek{padding:10px 12px 0;font-size:14px;color:var(--muted);line-height:1.5}
.accordion-body{max-height:0;overflow:hidden;transition:max-height .35s ease-in-out}
.accordion-body.is-open{max-height:1200px}
.accordion-inner{padding:16px 12px;display:flex;flex-direction:column;gap:16px}
.sim-card{background:var(--surface);border:1px solid var(--border);border-left:4px solid #43A047;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);transition:border-left-color .4s}
.sim-headline{font-size:18px;font-weight:700;margin-bottom:8px}
.sim-detail{font-size:14px;color:var(--muted);line-height:1.6}
.sim-detail strong{color:var(--text);font-weight:700}
.drivers-title{font-size:14px;font-weight:700;color:var(--muted);margin:0 0 8px}
.driver-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.driver-row:last-child{border-bottom:none}
.driver-arrow{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;flex-shrink:0}
.arrow-up{background:#FFF3E8;color:#B45309}
.arrow-down{background:#EDF7FF;color:#1D4ED8}
@media(prefers-color-scheme:dark){.arrow-up{background:rgba(180,83,9,.2)}.arrow-down{background:rgba(29,78,216,.2)}}
.driver-label{font-size:14px;font-weight:600}
.driver-desc{font-size:13px;color:var(--muted);margin-top:2px}

/* Layer 3 */
.layer-3{margin-top:24px;padding:0 12px}
.evidence-summary{font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 16px}
.evidence-summary strong{color:var(--text)}
.evidence-btn{display:block;width:100%;height:48px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;text-align:center;text-decoration:none;line-height:48px;transition:opacity .2s}
.evidence-btn:hover{opacity:.9}
.evidence-btn:active{transform:scale(.98)}

/* Footer */
.site-footer{background:var(--bg2);border-top:1px solid var(--border);padding:24px 16px;margin-top:32px}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-text{font-size:12px;color:var(--hint);line-height:1.7;margin:0 0 8px}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;opacity:0;transition:opacity .3s}
.modal-overlay.is-visible{pointer-events:auto;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.modal-sheet{position:relative;z-index:1;width:100%;max-width:480px;max-height:80vh;background:var(--surface);border-radius:20px 20px 0 0;padding:20px 16px 32px;overflow-y:auto;transform:translateY(20px);transition:transform .3s}
.modal-overlay.is-visible .modal-sheet{transform:translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-title{font-size:16px;font-weight:700;margin:0}
.modal-close{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--muted);background:var(--bg2)}
.modal-close:hover{background:var(--border)}
.modal-grid{display:flex;flex-direction:column;gap:10px}
.modal-rank-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--bg2);border-left:4px solid transparent}
.modal-rank-emoji{font-size:24px;flex-shrink:0;width:36px;text-align:center}
.modal-rank-name{font-size:14px;font-weight:700}
.modal-rank-range{font-size:13px;color:var(--muted);margin-top:2px}
.modal-rank-action{font-size:13px;font-weight:600;margin-top:2px}

.hidden{display:none!important}
@media(max-width:639px){
  .layer-1{padding-top:76px}
}
@media(min-width:640px){
  .main-container{padding-top:calc(var(--header-h)+32px)}
  .icon-circle{width:200px;height:200px}.icon-emoji{font-size:80px}
  .layer-1{padding:48px 0 32px}.site-header{padding:0 24px}
  .modal-overlay{align-items:center}.modal-sheet{border-radius:20px;max-height:70vh}
}