/* ============================================================
   NAO Launchpad — 個人用スタートページ
   白基調 / ヘアライン境界 / 控えめな影 / 1画面完結
   ============================================================ */

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-soft:#f4f6f8;      /* 入力・ホバーなどの薄い面 */
  --text:#1f2328;
  --muted:#646d78;
  --faint:#9aa2ad;
  --line:#e5e8ec;              /* 標準ヘアライン */
  --line-soft:#eef0f3;         /* さらに薄い区切り */
  --accent:#2f6bd8;
  --accent-soft:#ecf2fd;
  --accent-line:#c7d8f5;
  --up:#0c8a4d;
  --down:#d0342c;
  --danger:#c0392b;
  --r-sm:10px; --r-md:14px; --r-pill:24px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-hover:0 2px 4px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.10);
  --shadow-pop:0 12px 20px rgba(16,24,40,.10), 0 24px 56px rgba(16,24,40,.14);
}
:root[data-theme="paper"]{--bg:#faf9f6;--surface:#fffdf9;--surface-soft:#f3f1ea;--text:#2a2820;--muted:#77726a;--faint:#a49f95;--line:#e7e3d9;--line-soft:#efece3;--accent:#6a6553;--accent-soft:#f0ede5;--accent-line:#d8d2c4}
:root[data-theme="sky"]{--bg:#fbfdff;--surface:#ffffff;--surface-soft:#eef5fb;--text:#152736;--muted:#5f7488;--faint:#93a6b7;--line:#dbe6ef;--line-soft:#e8f0f6;--accent:#2e6f9e;--accent-soft:#e3f0fb;--accent-line:#b3d0e6}
:root[data-theme="sage"]{--bg:#fbfdfb;--surface:#ffffff;--surface-soft:#eef4ef;--text:#1e2e25;--muted:#67766b;--faint:#98a79c;--line:#dde5de;--line-soft:#e9efe9;--accent:#47705a;--accent-soft:#e6efe9;--accent-line:#bcd4c3}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:14px; line-height:1.5;
  overflow:hidden;
}

/* ---- 全体レイアウト ---- */
.app{
  height:100vh; height:100dvh;
  max-width:1520px; margin:0 auto;
  padding:16px clamp(20px,3vw,40px) 14px;
  display:flex; flex-direction:row; gap:26px;
}
.app-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:12px}

/* ============================================================
   Google 検索
   ============================================================ */
.gsearch{width:min(600px,100%); margin:2px auto 0; position:relative; flex:none}
.gsearch-box{display:flex; align-items:center; gap:12px; height:48px; padding:0 22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  transition:box-shadow .18s, border-color .18s}
.gsearch-box:hover{box-shadow:var(--shadow)}
.gsearch-box:focus-within{border-color:var(--accent-line); box-shadow:var(--shadow-hover)}
.gs-icon{color:var(--faint); display:flex; flex:none; transition:color .18s}
.gsearch-box:focus-within .gs-icon{color:var(--accent)}
.gsearch-box input{flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:15px; color:var(--text)}
.gsearch-box input::placeholder{color:var(--faint)}
.gsug{position:absolute; left:0; right:0; top:56px; z-index:40; margin:0; list-style:none; padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-pop);
  max-height:min(56vh,360px); overflow:auto}
.gsug-item{display:flex; align-items:center; gap:13px; padding:9px 14px; border-radius:var(--r-sm); cursor:pointer}
.gsug-item[aria-selected="true"], .gsug-item:hover{background:var(--surface-soft)}
.gsug-ic{color:var(--faint); display:flex; flex:none}
.gsug-tx{font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ============================================================
   宇宙ニュース ティッカー
   ============================================================ */
.news-ticker{flex:none; display:flex; align-items:flex-start; gap:16px; width:min(940px,100%); margin:0 auto;
  padding:14px 24px; min-height:92px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow); text-decoration:none; color:var(--text);
  transition:border-color .16s, box-shadow .16s}
.news-ticker[hidden]{display:none}
.news-ticker:hover{border-color:var(--accent-line); box-shadow:var(--shadow-hover)}
.nt-badge{flex:none; font-size:10px; font-weight:700; letter-spacing:.09em; color:var(--accent);
  background:var(--accent-soft); padding:4px 9px; border-radius:6px; margin-top:2px}
.nt-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; transition:opacity .25s}
.nt-body.nt-fade{opacity:0}
.nt-title{font-size:15px; font-weight:650; line-height:1.45; letter-spacing:.005em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.nt-desc{font-size:12.5px; color:var(--muted); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.nt-meta{font-size:11px; color:var(--faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ============================================================
   株価・為替テープ（枠なし・ヘアラインで静かに）
   ============================================================ */
.market-strip{flex:none; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:7px 2px 8px}
.market-head{display:flex; align-items:baseline; gap:10px; padding:0 2px 5px}
.market-head h2{margin:0; font-size:11px; font-weight:650; letter-spacing:.05em; color:var(--muted)}
.market-note{font-size:10px; color:var(--faint); margin-left:auto}
.market-row{display:flex; min-width:0}
.jp-market{width:100%; min-width:0; flex:1; display:flex; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.jp-market::-webkit-scrollbar{display:none}
.jp-market-loading{margin:auto; font-size:11px; color:var(--faint)}
.jp-market-track{width:max-content; display:flex; align-items:stretch; animation:jp-market-flow 40s linear infinite; will-change:transform}
.jp-market:hover .jp-market-track{animation-play-state:paused}
@keyframes jp-market-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.jp-quote{flex:none; display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:2px 18px; border-right:1px solid var(--line-soft); text-decoration:none; border-radius:8px}
.jp-quote:hover{background:var(--surface-soft)}
.jp-quote-name{font-size:10.5px; color:var(--faint); white-space:nowrap}
.jp-quote-line{display:flex; align-items:baseline; gap:7px; white-space:nowrap}
.jp-quote-price{font-size:13px; font-weight:650; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:.01em}
.jp-quote-change{font-size:11px; font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums}
.jp-quote-change.up{color:var(--up)}
.jp-quote-change.down{color:var(--down)}
.jp-quote-error{font-size:11px; color:var(--faint)}

/* ============================================================
   ブックマーク（アプリアイコン風タイル）
   ============================================================ */
.board-wrap{flex:1; min-height:0; display:flex; align-items:center; overflow:hidden}
.board{width:100%; display:flex; flex-direction:column; gap:5px}
.cat{--cat:var(--accent); --cat-soft:var(--accent-soft); display:flex; flex-direction:column; padding:1px 0}
.cat + .cat{border-top:1px solid var(--line-soft); padding-top:5px}
.cat-head{display:flex; align-items:center; gap:8px; margin-bottom:3px; padding:0 2px}
.cat-bar{width:3px; height:13px; border-radius:2px; background:var(--cat); flex:none}
.cat-title{font-size:12.5px; font-weight:650; letter-spacing:.02em; color:var(--text); margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill, var(--tile-w,124px)); gap:6px 4px; justify-content:start}

.tile{position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:9px 6px 7px; border-radius:12px; text-decoration:none; color:var(--text); text-align:center;
  transition:background .14s}
.tile:hover{background:var(--surface-soft)}
.tile:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.tile-icon{width:48px; height:48px; display:grid; place-items:center; border-radius:12px;
  background:var(--surface-soft); font-size:26px; line-height:1; flex:none;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:transform .14s, box-shadow .14s; overflow:hidden}
/* 公式アイコンは台座なしで、画像そのものを角丸表示（iOS風） */
.tile-icon.has-fav{background:transparent; box-shadow:none}
.tile-fav{width:48px; height:48px; object-fit:contain; display:block; border-radius:11px;
  box-shadow:0 0 0 1px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08)}
.tile:hover .tile-icon{transform:translateY(-2px)}
.tile:hover .tile-fav{box-shadow:0 0 0 1px rgba(16,24,40,.06), 0 5px 14px rgba(16,24,40,.16)}
.tile-name{font-size:12.5px; font-weight:550; color:#374151; line-height:1.3; max-width:100%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
:root[data-theme="paper"] .tile-name,:root[data-theme="sky"] .tile-name,:root[data-theme="sage"] .tile-name{color:var(--text)}
.tile-pin{position:absolute; top:6px; right:8px; font-size:10px; opacity:.7}
/* 死活監視の状態ドット */
.tile-status{position:absolute; top:8px; left:10px; width:8px; height:8px; border-radius:50%;
  background:var(--faint); box-shadow:0 0 0 2px var(--surface); animation:pulse 1.2s ease-in-out infinite}
.tile-status.up{background:var(--up); animation:none}
.tile-status.down{background:var(--down); animation:none}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.85}}

/* ============================================================
   右レール（ニュース）
   ============================================================ */
.widget-rail{width:300px; flex:none; display:flex; flex-direction:column; gap:12px; min-height:0; padding-top:2px}
.widget-rail[hidden]{display:none}
.widget{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:0; overflow:hidden}
.widget-head{display:flex; align-items:center; justify-content:space-between; padding:12px 48px 8px 16px}
.widget-head h2{margin:0; font-size:11px; font-weight:650; letter-spacing:.08em; color:var(--muted)}
.widget-refresh{border:0; background:transparent; color:var(--faint); font-size:14px; cursor:pointer;
  border-radius:7px; width:26px; height:26px; transition:color .14s, background .14s}
.widget-refresh:hover{color:var(--accent); background:var(--surface-soft)}
.news-widget{flex:1}
.news-tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin:0 10px 6px;
  padding:3px; background:var(--surface-soft); border-radius:9px}
.news-tab{border:0; border-radius:7px; padding:5px 2px; background:transparent; color:var(--muted);
  cursor:pointer; font:11.5px inherit; font-weight:550; transition:background .14s, color .14s}
.news-tab:hover{color:var(--text)}
.news-tab[aria-selected="true"]{background:var(--surface); color:var(--text); font-weight:650;
  box-shadow:0 1px 3px rgba(16,24,40,.10)}
.news-list{overflow-y:auto; padding:2px 8px 10px; display:flex; flex-direction:column}
.news-item{display:block; padding:9px 9px; border-radius:var(--r-sm); text-decoration:none; color:var(--text)}
.news-item + .news-item{border-top:1px solid var(--line-soft)}
.news-item:hover{background:var(--surface-soft)}
.news-item:hover + .news-item{border-top-color:transparent}
.news-title{display:block; font-size:12.5px; font-weight:550; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.news-meta{display:block; font-size:10.5px; color:var(--faint); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.news-empty{font-size:12px; color:var(--faint); padding:16px; text-align:center}

/* ---- 設定ボタン ---- */
.gear{position:fixed; top:16px; right:18px; width:38px; height:38px; z-index:20;
  border:0; background:transparent; border-radius:10px;
  color:var(--faint); font-size:19px; cursor:pointer; transition:color .14s, background .14s}
.gear:hover{color:var(--text); background:var(--surface-soft)}
.gear:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ============================================================
   編集ダイアログ
   ============================================================ */
dialog{border:0; padding:0; background:transparent; width:min(1060px,calc(100vw - 40px)); max-height:92vh; color:var(--text)}
dialog::backdrop{background:rgba(15,23,42,.32); backdrop-filter:blur(3px)}
.dialog-card{background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-pop); padding:24px; max-height:92vh; overflow:auto}
.dialog-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.dialog-head h2{margin:0; font-size:17px; font-weight:700; letter-spacing:.01em}
.dialog-head p{margin:5px 0 0; color:var(--muted); font-size:12px}
.close-button{border:0; background:transparent; width:32px; height:32px; border-radius:9px;
  font-size:19px; cursor:pointer; color:var(--faint); flex:none; transition:color .14s, background .14s}
.close-button:hover{color:var(--text); background:var(--surface-soft)}

.preference-grid{display:flex; align-items:end; gap:22px; flex-wrap:wrap; margin:18px 0 4px}
.preference-grid label{font-size:12px; color:var(--muted); display:grid; gap:5px}
.preference-grid select{min-width:140px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); padding:7px 9px; font:13px inherit; color:var(--text)}
.preference-grid select:focus{outline:none; border-color:var(--accent-line)}
.switch-label{display:flex!important; align-items:center; gap:8px; color:var(--text)!important;
  padding-bottom:8px; cursor:pointer; font-size:13px!important}
.switch-label input{width:15px; height:15px; accent-color:var(--accent)}

.editor{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.editor-section{border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; background:var(--surface)}
.editor-section.drag-over{border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft)}
.editor-section-head{display:grid; grid-template-columns:22px 44px 1fr auto; gap:8px; align-items:center; margin-bottom:9px}
.editor-cols{display:grid; grid-template-columns:18px 1.2fr 1.6fr 30px 24px; gap:6px; padding:0 2px 4px;
  font-size:10px; color:var(--faint)}
.editor-cols span{text-align:center}
.editor-cols span:nth-child(2),.editor-cols span:nth-child(3){text-align:left; padding-left:9px}
.drag-handle{cursor:grab; color:var(--faint); text-align:center; user-select:none}
.editor input{min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:7px 9px; font:12.5px inherit; color:var(--text)}
.editor input:focus{outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft)}
.section-title-input{font-weight:650}
.section-icon-input{text-align:center}
.delete-section{border:0; background:transparent; color:var(--danger); cursor:pointer; font:12px inherit;
  padding:6px 9px; border-radius:7px}
.delete-section:hover{background:#fdf0ef}
.editor-links{display:flex; flex-direction:column; gap:5px}
.editor-link{display:grid; grid-template-columns:18px 1.2fr 1.6fr 30px 24px; gap:6px; align-items:center}
.editor-link.drag-over{outline:2px dashed var(--accent-line); outline-offset:2px; border-radius:8px}
.monitor-link{border:1px solid var(--line); background:var(--surface); border-radius:8px; cursor:pointer;
  font-size:13px; padding:4px 0; filter:grayscale(1) opacity(.45); transition:filter .14s, background .14s}
.monitor-link[aria-pressed="true"]{filter:none; background:var(--accent-soft); border-color:var(--accent-line)}
.delete-link{border:0; background:transparent; color:var(--faint); cursor:pointer; font-size:16px; border-radius:7px}
.delete-link:hover{color:var(--danger)}
.add-link,.add-section{border:1px dashed var(--line); background:transparent; color:var(--accent);
  border-radius:9px; padding:8px; cursor:pointer; font:12.5px inherit; transition:border-color .14s, background .14s}
.add-link{width:100%; margin-top:8px}
.add-link:hover,.add-section:hover{border-color:var(--accent-line); background:var(--accent-soft)}
.add-section{margin-top:12px; width:100%}

.dialog-actions{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:20px; padding-top:14px; border-top:1px solid var(--line-soft)}
.dialog-actions-left,.dialog-actions-right{display:flex; gap:8px; flex-wrap:wrap}
.dialog-actions button{border-radius:9px; padding:8px 14px; font:12.5px inherit; cursor:pointer}
.text-button{border:0; background:transparent; color:var(--muted)}
.text-button:hover{color:var(--text); background:var(--surface-soft)}
.secondary-button{border:1px solid var(--line); background:var(--surface); color:var(--text)}
.secondary-button:hover{border-color:var(--accent-line)}
.primary-button{border:1px solid var(--accent); background:var(--accent); color:#fff; font-weight:600}
.primary-button:hover{filter:brightness(1.08)}
.error{color:var(--danger); font-size:12px; min-height:16px; margin:10px 0 0}
.dragging{opacity:.4}

/* ============================================================
   表示密度：コンパクト
   ============================================================ */
:root[data-density="compact"] .cat-grid{--tile-w:110px}
:root[data-density="compact"] .tile{padding:6px 4px 5px; gap:5px}
:root[data-density="compact"] .tile-icon{width:40px; height:40px; font-size:22px; border-radius:10px}
:root[data-density="compact"] .tile-fav{width:40px; height:40px; border-radius:9px}
:root[data-density="compact"] .tile-name{font-size:11.5px; -webkit-line-clamp:1}
:root[data-density="compact"] .news-ticker{min-height:104px; padding:12px 20px}
:root[data-density="compact"] .nt-desc{-webkit-line-clamp:1}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media(max-width:1180px){ .widget-rail{width:260px} }
@media(max-width:1024px){ .widget-rail{display:none} }

/* 低い画面：ティッカーとタイルを段階的に圧縮して1画面を維持 */
@media(max-height:890px){
  .app{padding-top:12px; padding-bottom:10px}
  .app-main{gap:9px}
  .news-ticker{min-height:0; padding:13px 22px}
  .market-strip{padding:5px 2px 6px}
  .board{gap:4px}
  .cat + .cat{padding-top:4px}
  .cat-grid{--tile-w:112px}
  .tile{padding:6px 4px 5px; gap:5px}
  .tile-icon{width:42px; height:42px; font-size:23px}
  .tile-fav{width:42px; height:42px; border-radius:10px}
  .tile-name{font-size:11.5px; -webkit-line-clamp:1}
}
@media(max-height:760px){
  .news-ticker{padding:11px 20px}
  .nt-title{-webkit-line-clamp:1}
  .nt-desc{-webkit-line-clamp:1}
}
@media(max-height:700px){
  .market-strip{display:none}
  .tile-icon{width:38px; height:38px; font-size:20px}
  .tile-fav{width:38px; height:38px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important}
}