/* Tidefolio Web — 承認済みデザイン言語(design/ 配下)の実装版。
   SP(〜767px)= アプリと同一表示(下タブ)。PC/タブレット(768px〜)= 上部ナビ+中央1カラム。 */

:root{
  --bg:#fff;--well:#F4F7F8;--line:rgba(14,36,48,.09);--line-2:rgba(14,36,48,.16);
  --ink:#0E2430;--ink-2:#4E6B78;--ink-3:#8FA6B0;
  --brand:#0E7490;--deep:#0C3D4E;--aqua:#9BE7F0;
  --up:#D93843;--down:#2F6BDB;--r:12px;
}
*{box-sizing:border-box}
html{background:var(--well)}
body{margin:0;font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:72px;min-height:100vh}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit}
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---- ヘッダ ---- */
.topbar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:13px 18px}
.logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.topnav{display:none;gap:4px}
.topnav a{font-size:13px;font-weight:600;color:var(--ink-2);padding:6px 14px;border-radius:999px}
.topnav a.on{background:var(--well);color:var(--deep)}
.sp{margin-left:auto}
.hic{color:var(--ink-2);background:none;border:none;padding:0;cursor:pointer}

/* ---- 下タブ(SPのみ) ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;padding:7px 6px calc(9px + env(safe-area-inset-bottom))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.5px;color:var(--ink-3);font-weight:600}
.tab .ic{width:21px;height:21px}
.tab.on{color:var(--brand)}
.tab.on .ic{stroke-width:2.3}

/* ---- レイアウト ---- */
main{max-width:100%}
.phead{padding:18px 18px 0}
.phead h1{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0;line-height:1.3}
.phead .date{font-size:11px;color:var(--ink-3);margin-top:2px}
.shd{display:flex;align-items:baseline;padding:18px 18px 8px}
.shd h2{font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.08em;margin:0}
.shd small{margin-left:auto;font-size:10px;color:var(--ink-3);font-weight:500}
.wellgap{height:8px;background:var(--well);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.legal{padding:16px 18px 8px;font-size:9.5px;color:var(--ink-3);line-height:1.7}
.empty{padding:28px 18px;font-size:12.5px;color:var(--ink-3);text-align:center}

/* ---- テーマ熱ティッカー ---- */
.ticker{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.ticker::-webkit-scrollbar{display:none}
.titem{flex-shrink:0;display:flex;flex-direction:column;gap:1px;padding:10px 16px;border-right:1px solid var(--line)}
.titem .tname{font-size:10.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.titem .tval{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800}
.titem .tval .d{font-size:10px;font-weight:700}
.hot{color:var(--up)}.cool{color:var(--down)}.flat{color:var(--ink-2)}

/* ---- フィルタタブ ---- */
.tabs{display:flex;gap:22px;padding:12px 18px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.ftab{flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--ink-3);padding-bottom:9px;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer}
.ftab.on{color:var(--ink);border-bottom-color:var(--brand)}

/* ---- フィード ---- */
.feed{display:flex;flex-direction:column;padding:0 16px}
.row{position:relative;padding:15px 2px 15px 14px;border-bottom:1px solid var(--line)}
.row.hl::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--brand)}
.top{display:flex;align-items:baseline;gap:7px}
.co{font-weight:700;font-size:12.5px;color:var(--ink)}
.co .tk{font-weight:500;font-size:10.5px;color:var(--ink-3);margin-left:4px;letter-spacing:.02em}
.time{font-size:10.5px;color:var(--ink-3);margin-left:auto;flex-shrink:0}
.row h3{font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-.005em;margin:5px 0 0}
.fact{font-size:12.5px;color:var(--ink-2);margin:5px 0 0;line-height:1.65}
.implication{font-size:12px;color:var(--ink-2);margin:7px 0 0;padding-left:10px;border-left:2px solid var(--aqua);line-height:1.6}
.implication .lb{color:var(--brand);font-weight:700;font-size:10.5px;margin-right:4px}
.meta{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:10.5px;color:var(--ink-3);flex-wrap:wrap}
.tag-imp{font-size:9.5px;font-weight:700;color:#fff;background:var(--deep);border-radius:4px;padding:1.5px 6px;letter-spacing:.04em}
.st{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:10.5px}
.st i{width:6px;height:6px;border-radius:50%;display:inline-block}
.st.bull{color:var(--up)}.st.bull i{background:var(--up)}
.st.bear{color:var(--down)}.st.bear i{background:var(--down)}
.st.flat{color:var(--ink-2)}.st.flat i{background:transparent;border:1.5px solid var(--ink-3)}
.rx{margin-left:auto;font-size:12px;font-weight:700}
.rx.up{color:var(--up)}.rx.dn{color:var(--down)}.rx.fl{color:var(--ink-2)}
.lite{display:flex;align-items:baseline;gap:8px;padding:11px 2px 11px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.lite b{color:var(--ink);font-size:12px;font-weight:700;flex-shrink:0}
.lite .time{margin-left:auto}
.dband{margin:0 -16px;padding:7px 32px;background:var(--well);border-bottom:1px solid var(--line);font-size:10.5px;font-weight:600;color:var(--ink-3);letter-spacing:.05em}

/* ---- 銘柄リスト ---- */
.cols{display:flex;padding:9px 18px;border-bottom:1px solid var(--line);font-size:9.5px;font-weight:700;color:var(--ink-3);letter-spacing:.08em}
.cols .r{margin-left:auto}
.srow{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);color:inherit}
.srow:hover{background:var(--well)}
.rank{width:18px;font-size:11px;color:var(--ink-3);font-weight:700;text-align:center;flex-shrink:0}
.name{min-width:0;flex:1}
.name .n1{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.name b{font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ink)}
.name .tk{font-size:10px;color:var(--ink-3);letter-spacing:.02em}
.tag-tier{font-size:8.5px;font-weight:700;color:var(--brand);border:1px solid currentColor;border-radius:3.5px;padding:0 4.5px;letter-spacing:.06em}
.tag-tier.swing{color:var(--ink-3)}
.ev{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.right{margin-left:auto;text-align:right;flex-shrink:0;display:flex;align-items:center;gap:14px}
.chg{font-size:11.5px;font-weight:700;width:52px;text-align:right}
.chg.up{color:var(--up)}.chg.down{color:var(--down)}
.watch{font-size:17px;font-weight:800;line-height:1.1;width:34px;text-align:right;color:var(--ink)}
.note{font-size:9.5px;color:var(--ink-3);margin:0;padding:14px 18px;line-height:1.7}

/* ---- 銘柄詳細 ---- */
.bhead{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:5}
.bhead h1{font-size:15px;font-weight:700;margin:0}
.bhead .tk{font-size:10.5px;color:var(--ink-3);font-weight:500;margin-left:5px;letter-spacing:.02em}
.phead-stock{padding:16px 18px 14px;border-bottom:1px solid var(--line)}
.prow{display:flex;align-items:baseline;gap:10px}
.prow b{font-size:31px;font-weight:800;letter-spacing:-.02em}
.prow .chg2{font-size:15px;font-weight:700}
.prow small{margin-left:auto;font-size:9.5px;color:var(--ink-3);text-align:right;line-height:1.5}
.mline{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:10.5px;color:var(--ink-3)}
.scorestrip{display:flex;margin-top:13px;background:var(--well);border-radius:10px}
.sc{flex:1;text-align:center;padding:10px 0 9px}
.sc+.sc{border-left:1px solid var(--line)}
.sc b{font-size:19px;font-weight:800;display:block;line-height:1.2}
.sc small{font-size:9.5px;color:var(--ink-3);font-weight:600}
.chartwell{height:150px;margin:0 18px;background:var(--well);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink-3);font-weight:600}
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:14px 18px 14px 44px;border-bottom:1px solid var(--line)}
.tl li::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1.5px;background:var(--line)}
.tl li:first-child::before{top:20px}
.tl .dot{position:absolute;left:18.5px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--deep);z-index:1}
.tl li.minor .dot{background:var(--bg);border:2px solid var(--ink-3);width:9px;height:9px;left:20px;top:22px}
.tl .when{font-size:10px;color:var(--ink-3);letter-spacing:.02em}
.tl h3{font-size:13.5px;font-weight:700;margin:3px 0 0;line-height:1.5}
.tl li.minor h3{font-weight:600;font-size:12.5px;color:var(--ink-2)}
.krow{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);font-size:12px}
.krow .k{width:110px;color:var(--ink-2);font-weight:600;font-size:11.5px}
.krow .v{margin-left:auto;font-weight:700;font-size:11.5px}

/* ---- テーマ ---- */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px}
.tcard{background:var(--well);border-radius:var(--r);padding:12px 14px;position:relative;overflow:hidden;border:none;text-align:left;cursor:pointer;font-family:inherit}
.tcard h3{font-size:12px;font-weight:700;margin:0;color:var(--ink-2)}
.tcard .heat{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.tcard .heat b{font-size:23px;font-weight:800;color:var(--ink)}
.tcard .heat .d{font-size:10.5px;font-weight:700}
.tcard .n{font-size:9px;color:var(--ink-3);line-height:1.5;margin-top:1px}

/* ---- 設定 ---- */
.profile{display:flex;align-items:center;gap:14px;padding:18px;border-bottom:1px solid var(--line)}
.avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#0E7490,#164E63);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;flex-shrink:0}
.pinfo{min-width:0;flex:1}
.pinfo b{font-size:15px;font-weight:700;display:block;line-height:1.4}
.pinfo small{font-size:11px;color:var(--ink-3)}
.item{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink);width:100%;background:none;border-top:none;border-left:none;border-right:none;text-align:left;cursor:pointer;font-family:inherit}
.item .sub{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:7px}
.ext{font-size:8.5px;font-weight:700;color:var(--ink-3);border:1px solid var(--line-2);border-radius:3.5px;padding:0 4.5px;letter-spacing:.06em}
.ver{padding:20px 18px;font-size:10.5px;color:var(--ink-3);text-align:center;letter-spacing:.04em}

/* ---- 認証フォーム ---- */
.auth{max-width:400px;margin:0 auto;padding:44px 24px}
.auth .alogo{display:flex;justify-content:center;margin-bottom:10px}
.auth h1{font-size:20px;font-weight:800;text-align:center;letter-spacing:-.01em;margin:0 0 4px}
.auth .sub{font-size:12px;color:var(--ink-3);text-align:center;margin:0 0 26px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:5px;letter-spacing:.04em}
.field input{width:100%;font-size:15px;padding:11px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink);font-family:inherit}
.field input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.field input[readonly]{background:var(--well);color:var(--ink-2)}
.field .hint{font-size:10px;color:var(--ink-3);margin-top:4px}
.btn{width:100%;font-size:14.5px;font-weight:700;padding:13px;border:none;border-radius:10px;background:var(--deep);color:#fff;cursor:pointer;margin-top:6px}
.btn:disabled{opacity:.7;cursor:default}
.btn.loading::after{content:"";display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;margin-left:9px;vertical-align:-2px;animation:tfspin .7s linear infinite}
@keyframes tfspin{to{transform:rotate(360deg)}}
.btn.ghost{background:none;color:var(--brand);font-weight:600;font-size:12.5px;padding:8px}
.alinks{text-align:center;font-size:12px;color:var(--ink-3);margin-top:18px;display:flex;flex-direction:column;gap:8px}
.err{font-size:12px;color:var(--up);background:rgba(217,56,67,.06);border-radius:8px;padding:10px 12px;margin-bottom:14px;display:none}
.err.show{display:block}
.ok{font-size:12px;color:var(--brand);background:var(--well);border-radius:8px;padding:10px 12px;margin-bottom:14px;display:none}
.ok.show{display:block}
.codebox input{text-align:center;font-size:24px;font-weight:800;letter-spacing:.4em;font-variant-numeric:tabular-nums}
.strength{height:5px;background:var(--well);border-radius:99px;margin-top:8px;overflow:hidden}
.strength i{display:block;height:100%;width:0;border-radius:99px;transition:width .25s ease,background .25s ease}
.strength i.s1{width:25%;background:var(--up)}
.strength i.s2{width:50%;background:#E08A2E}
.strength i.s3{width:75%;background:var(--brand)}
.strength i.s4{width:100%;background:#1E9E6A}

/* ---- ヘルプ(コンテンツページ) ---- */
.doc{max-width:680px;margin:0 auto;padding:32px 20px 60px}
.doc h1{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.35;margin:0}
.doc .lead{font-size:13.5px;color:var(--ink-2);margin:10px 0 0}
.doc section{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}
.doc h2{font-size:17px;font-weight:800;margin:0 0 8px}
.doc h2 .n{color:var(--ink-3);font-weight:700;margin-right:8px}
.doc p{font-size:13.5px;color:var(--ink-2);margin:8px 0}
.doc p b{color:var(--ink)}
.doc ul{margin:8px 0;padding-left:0;list-style:none}
.doc li{font-size:13px;color:var(--ink-2);padding:7px 0;border-bottom:1px dashed var(--line);display:flex;gap:12px}
.doc li:last-child{border-bottom:none}
.doc li .k{flex-shrink:0;width:130px;font-weight:700;color:var(--ink);font-size:12.5px}
.doc .ex{background:var(--well);border-radius:10px;padding:14px 18px;margin:14px 0}
.doc .warn{border-left:3px solid var(--brand);padding:2px 0 2px 14px;margin:16px 0;font-size:12.5px;color:var(--ink-2)}
.doc .formula{font-size:14px;font-weight:700;text-align:center;padding:4px 0}
.doc .formula .op{color:var(--ink-3);font-weight:500;margin:0 8px}
footer.site{border-top:1px solid var(--line);margin-top:28px}
footer.site .fw{max-width:680px;margin:0 auto;padding:18px 20px;font-size:10.5px;color:var(--ink-3);line-height:1.8}

/* ---- PC / タブレット(768px〜): SPレイアウトを中央1カラムで表示 ---- */
@media (min-width:768px){
  body{padding-bottom:32px}
  .tabbar{display:none}
  .topnav{display:flex}
  .topbar .m-only{display:none}
  .topbar{padding:13px 24px}
  main{max-width:640px;margin:0 auto;background:var(--bg);min-height:calc(100vh - 61px);border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .topbar-inner{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:18px;width:100%}
  .auth{padding-top:64px}
}