/* Apple look (형 2026-10-05: "애플 공식 앱처럼 보일 정도"). Loaded after app.css; overrides look only, never behaviour.
   iOS system colours (dark / light, light uses the accessible variants so text keeps >= 4.5:1), SF on Apple devices,
   segmented controls, inset grouped lists, translucent bars, bottom sheets with a grabber, round grey close buttons. */
:root,[data-theme=dark]{--bg:#000;--surface:#1c1c1e;--raise:#1c1c1e;--cell:#2c2c2e;--ink:#fff;--ink2:#d1d1d6;--muted:#8e8e93;--line:#38383a;
  --hover:rgba(118,118,128,.24);--on:#636366;--fill:rgba(118,118,128,.24);--bar:rgba(22,22,24,.72);--btn:#fff;--btnink:#000;
  --up:#ff453a;--down:#0a84ff;--B:#a5a3ff;--F:#64d2ff;--I:#ff9f0a;--P:#30d158;--O:#bf5af2;--warn:#ffd60a;
  --rib-end:.62;--rib-mid:.36;--rib-thin:.88;--rib-wave:.24;--rib-glint:.5;--rib-hi:.45;--rib-dim:.08;--cash:#aeaeb2;--rib-cash:1.15;
  --shadow:0 10px 40px rgba(0,0,0,.6);--cardshadow:none}
[data-theme=light]{--bg:#f2f2f7;--surface:#fff;--raise:#fff;--cell:#f2f2f7;--ink:#000;--ink2:#3c3c43;--muted:#6c6c70;--line:#c6c6c8;
  --hover:rgba(118,118,128,.12);--on:#fff;--fill:rgba(118,118,128,.12);--bar:rgba(249,249,249,.8);--btn:#000;--btnink:#fff;
  --up:#d70015;--down:#0040dd;--B:#4b48c8;--F:#0071a4;--I:#c93400;--P:#248a3d;--O:#8944ab;--warn:#a05a00;--cash:#8e8e93;--rib-cash:.85;
  --shadow:0 10px 40px rgba(0,0,0,.14);--cardshadow:none}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Pretendard","Hiragino Sans","Yu Gothic","Malgun Gothic",system-ui,sans-serif;
  letter-spacing:-.01em;font-size:16px}

/* navigation bar: translucent material, hairline */
.top{height:52px;background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--line)}
.brand b{font-size:17px;font-weight:600;letter-spacing:-.02em}.mark{stroke-width:2}
.tag{border:0;background:var(--fill);color:var(--muted);border-radius:6px;font-weight:600}
.icon{border-radius:50%;color:var(--ink)}.icon:hover{background:var(--fill)}
.langs button{border-radius:8px;color:var(--muted)}.langs button.on{color:var(--ink)}
.search input{background-color:var(--fill);border:0;border-radius:10px;height:36px;font-size:15px}.search input:focus{border:0;outline:2px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.sres,.pop{background:color-mix(in srgb,var(--raise) 86%,transparent);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:.5px solid var(--line);border-radius:14px}
.prow{font-size:15px;color:var(--ink)}.prow.look{border-top:.5px solid var(--line)}

/* large title */
main{padding-top:6px}
.intro{border-bottom:0;padding:22px 0 8px}
.intro h1{font-size:40px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.intro .isub{font-size:17px;color:var(--ink2)}.intro .ihow{font-size:15px;color:var(--muted)}

/* segmented controls (investor group and period) */
.seg,.tabs{background:var(--fill);border-radius:9px;padding:2px;gap:0}
.seg button,.tabs button{border-radius:7px;font-size:13px;font-weight:600;color:var(--ink);padding:6px 14px;transition:background .2s}
.seg button.on,.tabs button.on{background:var(--on);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
[data-theme=light] .seg button:not(.on),[data-theme=light] .tabs button:not(.on),[data-theme=light] .langs button:not(.on){color:var(--ink)}
.tabs{display:flex;border-bottom:0;margin-top:14px;overflow:visible}
.tabs button{flex:1;padding:7px 6px;font-size:14px;font-weight:600}
.tabs button.on{font-weight:600}
.tabs button::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px}
.tabs button.on::after{display:none}
.ctrl{gap:8px;margin:10px 0 0}
#period{flex:1}#period button{flex:1}
.date select{background:var(--fill);border:0;border-radius:9px;font-size:13px;font-weight:600;padding:7px 30px 7px 12px;height:32px}
.date svg{color:var(--ink);width:14px;height:14px}

/* hero numbers */
.hero{padding-top:22px}
.kicker{font-size:13px;font-weight:500;color:var(--muted)}
.prov{border:0;background:var(--fill);border-radius:6px;font-weight:600}
.big{font-size:48px;font-weight:700;letter-spacing:-.03em}
.big small{font-size:20px;font-weight:600;color:var(--ink)}
.lede{font-size:17px;line-height:1.45;color:var(--ink2)}
.shbtn{border:0;background:var(--fill);color:var(--ink);font-weight:600;height:32px}.shbtn:hover{border:0;background:color-mix(in srgb,var(--fill) 100%,var(--ink) 8%)}
.crumb button{border:0;background:var(--fill);color:var(--ink)}

/* the river sits on the page, no box */
.chart{background:transparent;border:0;box-shadow:none;border-radius:0}
.flownote{font-size:13px;color:var(--muted);text-align:center}

/* inset grouped surfaces */
.since,.lcard,.seo,.tug .col,.pxs,.wcard,.livebox{border:0!important;box-shadow:none!important;border-radius:12px}
.since{background:var(--surface);padding:12px 16px}
.since .sh{font-size:15px;font-weight:600}.since .sh i{background:var(--warn)}
.since li{color:var(--ink2)}
.today1{font-size:15px;color:var(--ink2)}.today1 .tlink{color:var(--muted)}
.mine button{border:0;background:var(--fill);font-size:14px;padding:5px 12px}
.msearch{border:0;background:var(--fill);border-radius:10px;height:38px;font-size:16px;color:var(--muted)}
.seo{background:var(--surface)}.seo .slinks a{border:0;background:var(--fill)}
.seo details>summary h2{font-size:17px;font-weight:600}
.tug .col,.pxs,.wcard{background:var(--cell)}
.pill{font-weight:600}

/* sheets and dialogs */
.sheet{background:var(--raise);border:0;border-radius:14px}
.sheet h2{font-size:28px;font-weight:700;letter-spacing:-.02em}
.sheet h3{font-size:20px;font-weight:600;letter-spacing:-.015em}
.close{width:30px;height:30px;border-radius:50%;background:var(--fill);color:var(--muted)}
.close svg{width:14px;height:14px;stroke-width:2.6}
.sheet .close{background:var(--fill);margin:0}
.star{border:0;background:var(--fill);color:var(--ink);font-weight:600;padding:4px 12px}
.star.on{background:var(--btn);color:var(--btnink)}
.step{background:var(--fill)}
.modal{background:rgba(0,0,0,.4)}
.modal .card{background:var(--raise);border:0;border-radius:14px}
.modal h2{font-size:22px;font-weight:700;letter-spacing:-.015em}
.lg-btns button{height:50px;border-radius:12px;font-size:17px;font-weight:600;border:0}
.lg-btns .dev,.btnlike{background:var(--btn);color:var(--btnink);border:0}
.lg-btns .quiet{color:var(--ink);background:transparent}
.lg-btns .google{border:.5px solid #dadce0}
.toast{background:color-mix(in srgb,var(--raise) 80%,transparent);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:0;border-radius:999px;padding:12px 20px;font-weight:500}
.newdata{border:0;background:color-mix(in srgb,var(--raise) 85%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px}
.newdata button{background:var(--btn);color:var(--btnink);border-radius:999px;padding:6px 14px}
.ask{border:0;border-radius:14px;background:color-mix(in srgb,var(--raise) 88%,transparent);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
.ask .go{border:0;background:var(--btn);color:var(--btnink);border-radius:999px}
.tip{border:0;background:color-mix(in srgb,var(--raise) 90%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:12px}
.jpts li::before{background:var(--P)}
footer{border-top:.5px solid var(--line)}

@media (max-width:640px){
  .top{height:44px;padding:0 8px}.brand b{font-size:17px}
  .sres{top:44px}
  main{padding:0 16px 32px}
  .intro{padding:14px 0 4px}.intro h1{font-size:28px;line-height:1.2;letter-spacing:-.02em;margin-bottom:6px}.intro .ihow{font-size:14px;line-height:1.45}
  .msearch{margin-top:12px}
  .today1{font-size:15px;line-height:1.5}
  .tabs{margin-top:14px}.tabs button{font-size:13px;padding:7px 2px}.tabs button::before{width:6px;height:6px;margin-right:4px}
  .ctrl .seg button{font-size:13px;padding:6px 4px}
  .big{font-size:40px}.big small{font-size:17px}.lede{font-size:16px}
  .chart{margin:12px -16px 0}
  .lcard{background:var(--surface);padding:2px 16px}
  .lcard h4{font-size:17px;font-weight:600}
  .lcard .row{border-bottom:.5px solid var(--line)}
  .lcard .row .n,.lcard .row .v{font-size:17px;font-weight:600}
  /* bottom sheet with a grabber */
  .sheet{border-radius:12px 12px 0 0;max-height:92vh;padding-top:22px}
  .sheet::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--on)}
  .sheet h2{font-size:24px}
  .modal .card{border-radius:14px}
  .modal.join .card{border-radius:12px 12px 0 0}
  .modal.join .grab{background:var(--on)}
}

/* round 2 */
.intro h1{text-wrap:balance}
.kicker{padding-right:96px}
.fresh{display:block;margin:2px 0 0;font-size:12px;font-weight:500;color:var(--muted)}
.fresh.partial{color:var(--muted)}.fresh.partial::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-right:6px;vertical-align:1px}
.prbtn{width:100%;text-align:left;border-top:.5px solid var(--line);padding-top:12px}
.prbtn svg{width:16px;height:16px;color:var(--muted)}
#langSeg button{padding:5px 10px}
@media (max-width:640px){
  #lang,#helpBtn,.search:not(.open) .sbtn{display:none!important}     /* phones: search is the field in the page; language and help are in the menu */
  .tools{gap:4px}.icon{width:36px;height:36px}
  .pop{top:50px;border-radius:14px}
  .kicker{padding-right:84px}
}
body{word-break:keep-all;overflow-wrap:break-word}      /* Korean breaks between words, as iOS does */
@media (min-width:641px){
  .tabs{max-width:520px}
  #period{flex:none;width:300px}
}

/* round 3 (형 2026-10-05: more beautiful, PC Apple-like too) */
/* A. investor tiles: the chosen period's total on each, the chosen one ringed in its colour */
#who.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;background:none;padding:0;border-radius:0;max-width:720px}
#who.tiles button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 12px 10px;border-radius:12px;background:var(--surface);box-shadow:none;text-align:left;min-width:0;transition:box-shadow .2s,background .2s}
#who.tiles button::before{display:none}
#who.tiles button.on{background:var(--surface);box-shadow:inset 0 0 0 2px var(--c)}
#who.tiles .tn{font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#who.tiles .tn::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px}
#who.tiles .tv{font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.today1{margin-top:12px}
/* B. Stocks-app rows: name and a small line | small bars | the amount in a capsule */
.lcard .row.srow2{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 0}
.srow2 .nm{display:flex;flex-direction:column;min-width:0}
.lcard .srow2 .n{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcard .srow2 .s{margin-top:2px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow2 .s b{font-weight:600}
.srow2 .sp svg{display:block;margin:0}
.srow2 .cap{min-width:86px;text-align:right;padding:5px 8px;border-radius:7px;background:var(--cc);color:#fff;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.lcard h4 small{display:none}
/* every press gives a little (iOS) */
button{-webkit-tap-highlight-color:transparent}
.seg button:active,.tabs button:active,.shbtn:active,.msearch:active,.mine button:active,.lg-btns button:active,.row:active,.star:active{transform:scale(.97);transition:transform .08s}
.lcard .row:active{background:var(--fill);transform:none}
@media (max-width:640px){
  #who.tiles{gap:6px}
  #who.tiles button{padding:9px 8px 8px;border-radius:11px}
  #who.tiles .tn{font-size:12px}#who.tiles .tn::before{width:6px;height:6px;margin-right:4px}
  #who.tiles .tv{font-size:15px}
}
/* PC: the same quiet bar as the phone - search, star, account, more; language, appearance and help live in the menu */
@media (min-width:641px){
  #lang,#themeBtn,#helpBtn{display:none!important}
  .prow.mob{display:flex}
  .top{padding:0 28px}
  main{max-width:1120px}
  .intro{padding:34px 0 10px}.intro h1{font-size:48px;letter-spacing:-.03em}
  .intro .isub{font-size:19px;margin-top:2px}
  .pop{width:320px;top:58px;right:22px}
  .ctrl{margin-top:12px}
  .hero{padding-top:28px}
  .big{font-size:56px}
  .chart{margin-top:22px}
  .today1{font-size:15px;max-width:900px}
}

/* detail sheet, first layer = price and the four investor groups; the rest folded (Astra audit, 형 2026-10-05) */
.shmore{margin:18px 0 6px;border-radius:12px;background:var(--cell);padding:0 14px}
.shmore>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;font-size:15px;font-weight:600;color:var(--ink)}
.shmore>summary::-webkit-details-marker{display:none}
.shmore>summary::after{content:'';width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s;flex:none}
.shmore[open]>summary::after{transform:rotate(-135deg)}
.shmore[open]{padding-bottom:10px}
.shmore .act{border-top:.5px solid var(--line)}
.sheet .act{border-top:.5px solid var(--line)}
.sheet h3{margin-top:26px}
@media (max-width:640px){.search.open input{background-color:var(--cell);box-shadow:0 0 0 6px var(--bg)}}   /* opaque: the title must not show through */
[data-theme=light] .search.open input{background-color:#e5e5ea}
/* inside a sector: '섹터 상세 ›' sits next to the name, clear of the share button (형 2026-10-05: they overlapped) */
.crumb{padding-right:104px;flex-wrap:wrap}.crumb #secInfo{margin-left:2px}
/* surge view rows (형 2026-10-05: squeezed into a thin column): name, then the coloured move, then the details - each full width */
.lcard .row.story{display:block;padding:12px 0}
.lcard .row.story .n{display:block;font-size:17px;font-weight:600}
.lcard .row.story .v{display:block;text-align:left;font-size:15px;font-weight:600;margin-top:2px}
.lcard .row.story .s{display:block;margin-top:6px;font-size:13px;line-height:1.55;color:var(--muted)}
.lcard .row.story .s .mb{margin:0 0 2px}
/* welcome tour: the chosen tile fills a thin bar in its colour while the tour steps (0.5 s) */
#who.tiles button{position:relative;overflow:hidden}
#who.touring button.on::after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);transform-origin:left;animation:tourfill var(--tour,.5s) linear forwards}
@keyframes tourfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* tap cues (형 2026-10-05): '›' on rows that open, and the tour-end bubble over the biggest place */
.lcard .row.srow2{grid-template-columns:minmax(0,1fr) auto auto 10px}
.srow2 .chev,.row.story .chev{color:var(--muted);font-size:22px;font-weight:400;line-height:1;opacity:.7}
.lcard .row.story{position:relative;padding-right:18px}.row.story .chev{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.nudge{position:absolute;z-index:4;padding:7px 12px;border-radius:999px;background:var(--btn);color:var(--btnink);font-size:13px;font-weight:600;
  white-space:nowrap;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.35);animation:nudgeIn .35s cubic-bezier(.2,.8,.2,1),nudgeBob 1s ease-in-out .35s 2}
@keyframes nudgeIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes nudgeBob{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.nudge{animation:none}}

/* first lines: all three on phones too; the legend uses the river's own colours */
.intro .ileg{margin:4px 0 2px;font-size:15px;color:var(--ink2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.intro .ileg i{width:9px;height:9px;border-radius:50%;flex:none}.intro .ileg i.dn{background:var(--down)}.intro .ileg i.up{background:var(--up)}
.intro .ileg .sep{color:var(--muted)}
@media (max-width:640px){.intro .isub{display:block;font-size:15px;line-height:1.45;color:var(--ink2);margin:2px 0 0}.intro .ileg{font-size:14px}.intro .ihow{font-size:14px}}

/* logo B (형 2026-10-05): filled, its own colours */
.mark{width:24px;height:24px;stroke:none}
/* watchlist chips: always one line, swipe sideways, the right edge fades when more is hidden (형 2026-10-06) */
.mine{flex-wrap:nowrap;min-width:0}
.mine>span{flex:none;white-space:nowrap}
.mine .mrow{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1;padding-right:24px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.mine .mrow::-webkit-scrollbar{display:none}
.mine .mrow button{flex:none;white-space:nowrap}
.mine .mrow button.all{background:transparent;color:var(--muted)}

/* every dialog on phones rises from the bottom as an iOS sheet (login, feedback, share, help) - 2026-10-06 sweep */
@media (max-width:640px){
  .modal{place-items:end stretch;padding:0}
  .modal .card{width:100%;max-height:90vh;border-radius:12px 12px 0 0;padding:26px 20px calc(18px + env(safe-area-inset-bottom));animation:sheetUp .32s cubic-bezier(.2,.8,.2,1)}
  .modal .card::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--on)}
  .modal.join .grab{display:none}
}
#fbText,#fbContact{background:var(--fill);border:0;border-radius:10px;font-size:16px}
#fbText:focus,#fbContact:focus{outline:2px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.modal .fine{border-top:.5px solid var(--line)}
.lg-agree input{accent-color:var(--P)}

/* iOS motion for sheets and dialogs (형 2026-10-06): the iOS sheet curve, a backdrop that fades, slide down on close */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{from{transform:none}to{transform:translateY(100%)}}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes popOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.97)}}
@keyframes sideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes sideOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(28px)}}
.modal{animation:fadeIn .3s ease}
.modal.closing{animation:fadeOut .26s ease forwards}
.modal .card{animation:popIn .32s cubic-bezier(.32,.72,0,1)}
.modal.closing .card{animation:popOut .22s ease forwards}
.sheet{animation:sideIn .38s cubic-bezier(.32,.72,0,1)}
.sheet.closing{animation:sideOut .24s cubic-bezier(.32,0,.67,0) forwards}
@media (max-width:640px){
  .modal .card,.modal.join .card{animation:sheetUp .5s cubic-bezier(.32,.72,0,1)}
  .modal.closing .card{animation:sheetDown .26s cubic-bezier(.32,0,.67,0) forwards}
  .sheet{animation:sheetUp .5s cubic-bezier(.32,.72,0,1);box-shadow:0 -10px 40px rgba(0,0,0,.5)}
  .sheet.closing{animation:sheetDown .26s cubic-bezier(.32,0,.67,0) forwards}
}
@media (prefers-reduced-motion:reduce){.modal,.modal .card,.sheet,.modal.closing,.modal.closing .card,.sheet.closing{animation:none!important}}
.modal .card{overscroll-behavior:contain}   /* a pull on the sheet must not reload the page */

/* account sheet like iOS Settings (형 2026-10-06) */
.acc{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
.acc .av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:600;color:#fff;background:linear-gradient(135deg,#636366,#3a3a3c);flex:none}
.acc .av-kakao{background:#fee500;color:#191600}.acc .av-google{background:linear-gradient(135deg,#4285f4,#34a853)}
.acc b{display:block;font-size:20px;font-weight:600;color:var(--ink)}.acc span{font-size:14px;color:var(--muted)}
.grp{background:var(--cell);border-radius:12px;margin:0 0 14px;overflow:hidden}
.grp button{display:block;width:100%;text-align:left;padding:14px 16px;font-size:17px;color:var(--ink);background:none;border:0;border-bottom:.5px solid var(--line)}
.grp button:last-child{border-bottom:0}.grp button:active{background:var(--fill)}
.grp button.red{color:var(--up)}

/* no flashing behind a sheet on Android Chrome (형 2026-10-06): the backdrop darkens by colour, not opacity, and the sheet,
   the dialogs and the river each get their own layer so the page under them is not recomposited every frame */
@keyframes dimIn{from{background-color:rgba(0,0,0,0)}to{background-color:rgba(0,0,0,.4)}}
@keyframes dimOut{from{background-color:rgba(0,0,0,.4)}to{background-color:rgba(0,0,0,0)}}
.modal{animation:dimIn .3s ease}
.modal.closing{animation:dimOut .26s ease forwards}
.modal .card,.sheet{will-change:transform;backface-visibility:hidden}
.chart{transform:translateZ(0)}
.lcard .lnone{margin:4px 0 12px;font-size:14px;color:var(--muted)}

/* 'today (session) / last close' switch (형 2026-10-06): a live dot on 'today' */
.daymode{margin:14px 0 0;display:inline-flex}
.daymode button{display:inline-flex;align-items:center;gap:6px}
.daymode button i{width:7px;height:7px;border-radius:50%;background:var(--up);animation:blink 1.6s infinite}
@media (prefers-reduced-motion:reduce){.daymode button i{animation:none}}

/* day strip (형 2026-10-06): the recent trading days in one swipeable row, a small bar per day; the date menu goes */
.date{display:none}
.dstripw{display:flex;align-items:center;gap:4px;margin:10px 0 0}
.dstrip{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;scroll-snap-type:x proximity;padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.dstrip::-webkit-scrollbar{display:none}
.dstrip button{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:46px;padding:5px 4px 6px;border-radius:10px;color:var(--muted)}
.dstrip button span{font-size:11px}.dstrip button b{font-size:13px;font-weight:600;color:var(--ink2)}
.dstrip button i{display:block;width:16px;border-radius:2px;margin-top:3px;opacity:.85}
.dstrip button.on{background:var(--fill)}.dstrip button.on b{color:var(--ink)}.dstrip button.on span{color:var(--ink2)}
.dnav{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--fill)}
.dnav:disabled{opacity:.3}.dnav svg{width:16px;height:16px}
#lv2{flex:none}
@media (max-width:640px){.dnav{display:none}.ctrl{flex-wrap:nowrap}#period{flex:1}}

/* following one place across days (형 2026-10-06) */
.follow1{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--surface)}
.follow1 .fh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.follow1 .fh i{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
.follow1 .fh button{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--fill);color:var(--muted);font-size:12px}
.follow1 .fd{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin-top:6px}.follow1 .fd::-webkit-scrollbar{display:none}
.follow1 .fd span{flex:none;display:flex;flex-direction:column;gap:1px}
.follow1 .fd em{font-style:normal;font-size:11px;color:var(--muted)}.follow1 .fd b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}

/* a day is loading: the river dims a little so the tap is seen at once */
.chart{transition:opacity .2s}.chart.loading{opacity:.45}

/* the top bar stays on screen (형 2026-10-06): scrolling to a place keeps it clear of the bar */
html{scroll-padding-top:60px}

/* control rows line up with the four tiles (형 2026-10-06): the periods take the full width under them; [섹터|종목]
   moves to the day row. The day row: a calendar-like strip - the chosen day a filled pill, the period's other days on
   one band with it, a short buy/sell line under each date; lower than before so the river comes up */
.ctrl{display:block;max-width:720px}
#period{display:flex;width:auto}#period button{flex:1}
.dstripw{max-width:720px;gap:6px;margin-top:8px}
.dstrip{gap:0;padding:0}
.dstrip button{min-width:46px;padding:4px 2px 5px;border-radius:0;gap:0;color:var(--muted)}
.dstrip button span{font-size:10.5px;line-height:13px}.dstrip button b{font-size:14px;line-height:18px;font-weight:600;color:var(--ink2)}
.dstrip button i{height:3px;border-radius:2px;margin-top:3px;opacity:.9}
.dstrip button.in{background:var(--fill)}
.dstrip button.in0{border-radius:12px 0 0 12px}
.dstrip button.on{background:var(--ink);border-radius:12px}
.dstrip button.in.on:not(.in0){border-radius:0 12px 12px 0}
.dstrip button.on b{color:var(--bg)}.dstrip button.on span{color:var(--bg);opacity:.7}
#lv2{flex:none}#lv2 button{padding-left:10px;padding-right:10px}
.dstrip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
.dstrip{padding:0 10px;scroll-padding:0 10px}

/* the logo is the way home; PC: the controls use the full column, so every row shares one right edge (형 2026-10-06) */
a.brand{color:inherit;text-decoration:none}
@media (min-width:641px){#who.tiles,.ctrl,.dstripw{max-width:none}}
/* PC: the top bar's logo and icons line up with the page column; the market mood reads as part of the line */
@media (min-width:641px){.top{padding-left:max(28px,calc((100% - 1120px) / 2 + 28px));padding-right:max(28px,calc((100% - 1120px) / 2 + 28px))}}
.mood{margin-left:0;font-weight:500}.mood:not(:empty)::before{content:" · "}
.lede{text-wrap:pretty}

/* surges (형 2026-10-06): the group tabs use the full column like the rows under them; 섹터 is dimmed but tappable */
@media (min-width:641px){.tabs{max-width:none}.tabs button{flex:1}}
.seg button.lock{opacity:.45}

/* surge tiles: five (전체 + four groups), counts in plain ink - a count, not a buy or sell */
#who.tiles.sgt{grid-template-columns:repeat(5,minmax(0,1fr))}
#who.tiles.sgt button.on{box-shadow:inset 0 0 0 2px var(--c,var(--ink2))}
#who.tiles.sgt .tv{color:var(--ink)}
#who.tiles.sgt button[data-a=all]{--c:var(--ink2)}
#who.tiles.sgt button[data-a=all] .tn::before{background:var(--ink2)}
@media (max-width:640px){#who.tiles.sgt{gap:5px}#who.tiles.sgt button{padding:9px 6px 8px}#who.tiles.sgt .tn{font-size:11.5px}}
@media (max-width:380px){#who.tiles.sgt button{padding:9px 5px 8px}#who.tiles.sgt .tn::before{display:none}#who.tiles.sgt .tn{color:var(--c,var(--ink2))}}

/* the 'turned since last visit' ring: its meaning under the river, and the same ring on the since card */
.flipnote{display:flex;align-items:center;justify-content:center;gap:7px;margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.flipnote i,.since .sh i{display:inline-block;width:8px;height:8px;border-radius:50%;background:none;box-shadow:inset 0 0 0 1.6px var(--ink);flex:none}

/* 금액 | 거래 몰림 on the first screen (형 2026-10-06), with the today switch on the same line */
.modebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
.modebar .daymode{margin:0}
.modebar #mode button{padding-left:16px;padding-right:16px}
.howlink{background:none;border:0;padding:0;color:var(--down);font:inherit;font-weight:600;cursor:pointer}
/* 사용 방법: topics with a picture each */
#helpBody{display:grid;gap:12px}
#helpBody .hs{background:var(--cell);border-radius:14px;padding:14px 16px 12px}
#helpBody .hi svg{display:block;width:100%;max-width:340px;height:auto;margin:0 auto 6px}
#helpBody h3{margin:4px 0 6px;font-size:16px;font-weight:700;color:var(--ink)}
#helpBody p{margin:0 0 6px;font-size:14px;line-height:1.55;color:var(--ink2)}
#helpBody p:last-child{margin-bottom:0}
@media (min-width:900px){#help .card{width:min(860px,calc(100vw - 48px))}#helpBody{grid-template-columns:1fr 1fr}}
#helpBody .hi svg{stroke:none;stroke-width:1}
#setPop .prow.look{border-top:0;margin-top:0;padding-top:4px}

/* accessibility pass (WCAG 2.2 AA, 2026-10-06): text contrast ≥ 4.5:1, tap targets ≥ 24px */
:root:not([data-theme=light]),[data-theme=dark]{--muted:#98989f}
[data-theme=light]{--P:#1f7a35}
[data-theme=dark] .srow2 .cap,:root:not([data-theme=light]) .srow2 .cap{background:color-mix(in srgb,var(--cc) 82%,#000)}
.howlink{padding:4px 0;margin:-4px 0}
a.brand{min-height:32px}
.dstrip button span{font-size:11px}
/* dark sheets sit on grey cards: there the colours take Apple's increased-contrast variants (text ≥ 4.5:1) */
:root:not([data-theme=light]) .sheet,[data-theme=dark] .sheet,:root:not([data-theme=light]) .modal .card,[data-theme=dark] .modal .card{--down:#409cff;--up:#ff6961;--O:#da8fff}

/* motion details (형 2026-10-06): the segmented pill slides (iOS timing), tiles press like buttons, the toast rises in */
.seg.slides{position:relative;isolation:isolate}
.seg .thumb{position:absolute;left:0;top:0;z-index:0;border-radius:7px;background:var(--on);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);pointer-events:none;
  transition:transform .34s cubic-bezier(.32,.72,0,1),width .34s cubic-bezier(.32,.72,0,1),opacity .2s}
.seg.slides > button{position:relative;z-index:1}
.seg.slides > button.on{background:transparent!important;box-shadow:none!important}
#who.tiles button:active,.dstrip button:active,#helpBody .hs:active{transform:scale(.97);transition:transform .08s}
#who.tiles button,.dstrip button{transition:box-shadow .2s,background .2s,transform .25s cubic-bezier(.32,.72,0,1)}
.toast:not([hidden]){animation:toastIn .34s cubic-bezier(.32,.72,0,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.seg .thumb{transition:none}.toast:not([hidden]){animation:none}}

/* day strip: one band and one pill that slide (the buttons stay clear, their text changes colour as the pill arrives) */
.dstrip.slides{position:relative}
.dstrip .dband,.dstrip .dpill{position:absolute;left:0;top:0;bottom:0;border-radius:12px;pointer-events:none;
  transition:transform .36s cubic-bezier(.32,.72,0,1),width .36s cubic-bezier(.32,.72,0,1),opacity .2s}
.dstrip .dband{background:var(--fill)}.dstrip .dpill{background:var(--ink)}
.dstrip.slides button{position:relative;z-index:1;background:transparent!important;border-radius:12px}
.dstrip.slides button b,.dstrip.slides button span{transition:color .18s .1s}
@media (prefers-reduced-motion:reduce){.dstrip .dband,.dstrip .dpill{transition:none}}

/* the top, lighter (형 2026-10-06): title + one line + a help pill; the river comes up */
.ileg,.ihow,.today1{display:none!important}
.irow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:6px}
.irow .isub{margin:0}
.howpill{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px 0 8px;border-radius:999px;background:var(--fill);color:var(--ink);font-size:13px;font-weight:600;border:0;cursor:pointer}
.howpill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.howpill:active{transform:scale(.97)}
.modebar #lv2{margin-left:auto}
@media (max-width:640px){.modebar{flex-wrap:nowrap}.modebar .seg button{padding-left:12px;padding-right:12px}}
.dstripw #lv2{display:none}
/* '● 오늘' at the end of the day strip */
.dstrip button.tchip b{display:inline-flex;align-items:center;gap:4px;font-size:13px}
.dstrip button.tchip .ld{width:6px;height:6px;border-radius:50%;background:var(--up);animation:blink 1.6s infinite}
@media (prefers-reduced-motion:reduce){.dstrip button.tchip .ld{animation:none}}
/* the since card: one line that folds open */
.since{padding:0;overflow:hidden}
.since .sh{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;background:none;border:0;color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.since .sh span{flex:1;min-width:0}
.since .sh .chev{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;transition:transform .3s cubic-bezier(.32,.72,0,1)}
.since.open .sh .chev{transform:rotate(180deg)}
.since .sbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.32,.72,0,1)}
.since.open .sbody{grid-template-rows:1fr}
.since .sin{overflow:hidden;padding:0 14px}
.since.open .sin{padding-bottom:12px}
.since .sin ul{margin:6px 0 0;padding-left:18px}.since .sin li{display:list-item!important;margin:3px 0;font-size:13px;color:var(--ink2)}
.since .ssum{margin:10px 0 0;font-size:12px;font-weight:600;color:var(--muted)}
.since .fl{display:grid;gap:6px;margin-top:2px}
.since .fv{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.since .fv i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.since .fv b{font-weight:600;color:var(--ink2);flex:none}
.since .fv .fn{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.since .fv .fp{flex:none;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;color:#fff}
.since .fv .fp.sb{background:linear-gradient(90deg,var(--down),var(--up))}
.since .fv .fp.bs{background:linear-gradient(90deg,var(--up),var(--down))}
.since .more{margin:2px 0 0;font-size:12px;color:var(--muted)}
.since .smore{display:none}
@media (prefers-reduced-motion:reduce){.since .sbody,.since .sh .chev{transition:none}}

/* since card, iOS grouped-list look (형 2026-10-06: details follow Apple too): hairline rows, tinted capsules, no bullets */
.since .fl{gap:0;margin:0 -14px;border-top:.5px solid var(--line)}
.since .fv{padding:10px 14px;border-bottom:.5px solid var(--line);font-size:15px}
.since .fv b{font-size:13px;font-weight:500;color:var(--muted);min-width:44px}
.since .fv .fn{font-weight:600}
.since .fv .fp{background:none!important;font-size:12.5px;padding:3px 9px}
.since .fv .fp.sb{color:var(--up);background:color-mix(in srgb,var(--up) 16%,transparent)!important}
.since .fv .fp.bs{color:var(--down);background:color-mix(in srgb,var(--down) 16%,transparent)!important}
.since .more{padding:8px 0 0}
.since .ssum{margin:16px 0 4px;text-transform:none;letter-spacing:0}
.since .sin ul{list-style:none;margin:0 -14px;padding:0;border-top:.5px solid var(--line)}
.since .sin li{display:block!important;margin:0;padding:9px 14px;border-bottom:.5px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink2)}
.since .sin li b{color:var(--ink)}
.since.open .sin{padding-bottom:4px}
/* inset hairlines like iOS lists: from the text edge, none under the last row */
.since .fl,.since .sin ul{border-top:0}
.since .fv,.since .sin li{border-bottom:0;position:relative}
.since .fv::after,.since .sin li::after{content:"";position:absolute;left:14px;right:0;bottom:0;border-bottom:.5px solid var(--line)}
.since .fv:last-of-type::after,.since .sin li:last-child::after{display:none}
.since.open .sh{box-shadow:inset 0 -.5px 0 var(--line)}
.since .more{padding:8px 14px 0}

/* ===== design pass (형 2026-10-06: light looked busy next to apple.com; buttons stay, but quieter and in a clear order) =====
   light: white page, one soft grey (#f5f5f7) for every card and control, ink #1d1d1f, hairlines instead of boxes.
   both modes: three weights of control - tiles (big) > periods (segmented) > what-to-see switches (text only, pill on the chosen one);
   one height (32px) and one corner rule for controls */
[data-theme=light]{--bg:#fff;--surface:#f5f5f7;--raise:#fff;--cell:#f5f5f7;--ink:#1d1d1f;--ink2:#424245;--muted:#6e6e73;--line:rgba(0,0,0,.1);
  --hover:rgba(0,0,0,.04);--fill:#f5f5f7;--on:#fff;--bar:rgba(255,255,255,.82)}
[data-theme=light] body{background:#fff}
[data-theme=light] .seg .thumb,[data-theme=light] .seg button.on{box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04)}
[data-theme=light] #who.tiles button{background:#f5f5f7}
[data-theme=light] #who.tiles button.on{background:#fff;box-shadow:inset 0 0 0 2px var(--c),0 2px 10px rgba(0,0,0,.06)}
[data-theme=light] .msearch{background:#f5f5f7}
[data-theme=light] .top{border-bottom-color:rgba(0,0,0,.08)}
/* controls: one height */
.seg button{min-height:28px}
.ctrl .seg button{min-height:30px}
/* third weight: the what-to-see switches lose their box; the chosen side still gets the sliding pill */
.modebar .seg{background:none;padding:0}
.modebar .seg > button{color:var(--muted);font-weight:600}
.modebar .seg > button.on{color:var(--ink)}
.modebar .seg .thumb{background:var(--fill);box-shadow:none!important}
[data-theme=light] .modebar .seg .thumb{background:#f5f5f7}
.modebar{margin-top:16px}
/* the since line: a list row between hairlines, not another box */
.since{background:none!important;border-radius:0;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);margin-top:14px}
.since .sh{padding-left:2px;padding-right:2px}
.since .sin{padding:0 2px}
.since .fl,.since .sin ul{margin:0 -2px}
/* the help pill and share button: quiet fill, same height */
.howpill,.shbtn{height:30px}

/* light controls read as buttons again (형 2026-10-06: the #f5f5f7 pass was too faint): the iOS grey fill with the white
   thumb, on the white page; the what-to-see switches get their box back in both modes */
[data-theme=light]{--fill:rgba(118,118,128,.14)}
[data-theme=light] #who.tiles button{background:#f2f2f7}
[data-theme=light] .msearch{background:rgba(118,118,128,.12)}
[data-theme=light] .seg .thumb{box-shadow:0 2px 6px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.06)}
.modebar .seg{background:var(--fill);padding:2px}
.modebar .seg .thumb{background:var(--on);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)!important}
[data-theme=light] .modebar .seg .thumb{background:#fff}
.modebar .seg > button{color:var(--ink)}

/* per-group summary rows: group colour, net in red/blue with its word, then bought-most / sold-most with coloured amounts */
.since .sin li .sa{display:block}
.since .sa1{display:flex;align-items:center;gap:8px;font-size:14.5px}
.since .sa1 i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.since .sa1 b{color:var(--c);font-weight:700}
.since .sa1 .v{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.since .v.up,.since em.up{color:var(--up)}.since .v.dn,.since em.dn{color:var(--down)}
.since .sa2{display:flex;flex-wrap:wrap;gap:2px 14px;margin:3px 0 0 15px;font-size:12.5px;color:var(--muted)}
.since .sa2 b{color:var(--ink2);font-weight:600}
.since .sa2 em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.since .fv b{color:var(--c)!important;font-weight:600}
.since .sin li .sa1 b{color:var(--c)}

/* since card v3: two short columns, place names with group dots, tap to open */
.since .cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;padding:10px 0 2px}
.since .sc .st{margin:0 0 4px;font-size:12.5px;font-weight:700}
.since .sc.up .st{color:var(--up)}.since .sc.dn .st{color:var(--down)}
.since .sp{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 0;background:none;border:0;border-bottom:.5px solid var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.since .sp:last-of-type{border-bottom:0}
.since .sp .nm{flex:1;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.since .sp .ds{display:flex;gap:3px;flex:none}
.since .sp{flex-wrap:wrap;row-gap:1px}.since .sp .nm{flex:1 1 100%}.since .sp .wh{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;font-weight:600}.since .sp .wa{display:inline-flex;align-items:center;gap:4px}.since .sp .wa i{width:8px;height:8px;border-radius:50%;background:var(--c);display:inline-block}.since .sp .ct{flex:1 1 100%;font-size:12px;color:var(--muted)}.since .sp .ct em{font-style:normal;font-weight:600}.since .sp .ct .up{color:var(--up)}.since .sp .ct .dn{color:var(--down)}
.since .sp .ds i,.since .lg i{width:8px;height:8px;border-radius:50%;background:var(--c);display:inline-block}
.since .sp:active{opacity:.6}
.since .sc .none{margin:6px 0;font-size:13px;color:var(--muted)}
.since .sc .more{padding:4px 0 0;font-size:12px;color:var(--muted)}
.since .lg{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 2px;font-size:11.5px;color:var(--muted)}
.since .lg span{display:inline-flex;align-items:center;gap:5px}
/* install steps (iPhone) */
#iosBody .steps{margin:8px 0 4px;padding-left:20px;display:grid;gap:12px;font-size:15px;line-height:1.5;color:var(--ink2)}
#iosBody .steps b{color:var(--ink)}
#iosBody .ico{width:20px;height:20px;vertical-align:-4px;margin:0 4px;fill:none;stroke:var(--down);stroke-width:1.8}
#iosBody .warn{margin:4px 0 8px;font-size:13.5px;color:var(--warn)}

/* the owner's desk: top-5 brokers, two columns */
.dtop{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin:6px 0 10px}
.dtop .dth{margin:0 0 4px;font-size:12px;font-weight:700;color:var(--muted)}
.dtop .dtr{display:flex;justify-content:space-between;gap:8px;margin:0;padding:4px 0;border-bottom:.5px solid var(--line);font-size:13px}
.dtop .dtr em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--F);padding:1px 5px;border-radius:5px;background:color-mix(in srgb,var(--F) 16%,transparent)}
.dtop .dtr b{font-weight:600;font-variant-numeric:tabular-nums}
.dnote{margin:0 0 12px;font-size:11.5px}

/* 읽는 재료 (owner): five facts in an iOS-style list */
.rbox{margin:12px 0;padding:10px 14px;border-radius:12px;background:var(--cell)}
.rbox .rbh{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink)}
.rbox .rbh .mut{font-weight:500;font-size:12px}
.rbox .rbr{display:flex;align-items:center;gap:10px;margin:0;padding:8px 0;border-bottom:.5px solid var(--line);font-size:13.5px}
.rbox .rbr .l{flex:none;width:52px;color:var(--muted);font-weight:600}
.rbox .rbr .v{flex:1;min-width:0;color:var(--ink);font-variant-numeric:tabular-nums}
.rbox .rbr em{flex:none;font-style:normal;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--fill);color:var(--ink2)}
.rbox .rbn{margin:8px 0 2px;font-size:11.5px;color:var(--muted)}

/* 읽는 재료 v2: foreign | institutions side by side, a shared footer */
.rbox .rbgs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 2px}
.rbox .rbg{padding:10px 12px;border-radius:10px;background:var(--raise);min-width:0}
.rbox .rg1{display:flex;align-items:center;gap:6px;margin:0;flex-wrap:wrap}
.rbox .rg1 i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.rbox .rg1 b{font-size:13px;color:var(--c);font-weight:700}
.rbox .rg1 .amt{margin-left:auto;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.rbox .rg2{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.rbox .rg2 em{font-style:normal;font-weight:700;color:var(--ink);padding:1px 7px;border-radius:999px;background:var(--fill);margin-right:2px}
.rbox .rg3{margin:4px 0 0;font-size:13px;color:var(--ink);font-weight:600}
.rbox .rbf{margin:10px 0 0;font-size:13.5px;color:var(--ink2)}
.rbox .rbf b{font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:380px){.rbox .rbgs{grid-template-columns:1fr}}

/* the owner's briefing card */
.brief{margin:14px 0 0;padding:12px 16px;border-radius:14px;background:var(--cell)}
.brief .bh{margin:0;font-size:15px}.brief .bh .mut{font-size:12px}
.brief .bm{margin:6px 0 0;font-size:14px}
.brief .bs{margin:12px 0 4px;font-size:12px;font-weight:700;color:var(--muted)}
.brief ul{list-style:none;margin:0;padding:0}
.brief li{padding:8px 0;border-bottom:.5px solid var(--line);font-size:14px;line-height:1.5}
.brief li:last-child{border-bottom:0}
.brief .bt{font-size:13px;color:var(--ink2)}
.brief .bn{margin:8px 0 0;font-size:11.5px;color:var(--muted)}

/* search list (형 2026-10-08): the row the arrow keys are on must be plain to see; recent searches with a remove mark */
.sres .hit.on{background:color-mix(in srgb,var(--ink) 16%,transparent);box-shadow:inset 3px 0 0 var(--ink)}
.sres .hit:hover:not(.on){background:var(--fill)}
.sres .rh{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 4px;font-size:12px;color:var(--muted)}
.sres .rh .rc{font-size:12px;color:var(--muted);padding:2px 4px}
.sres .hit .x{margin-left:4px;padding:0 4px 0 10px;font-size:18px;line-height:1;color:var(--muted)}
.sres .hit .m{margin-left:auto}
/* list rows: the second line wraps instead of '지난 밤…' / '매수 전…' on narrow phones or large text (형 2026-10-08) */
.lcard .srow2 .s{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;word-break:keep-all}
.lcard .srow2 .s.tp{margin-top:1px}
.srow2 .s.tp b{font-weight:600;color:var(--ink2)}
.srow2 .s.tp em{font-style:normal;font-variant-numeric:tabular-nums}
.srow2 .s.tp em.up{color:var(--up)}.srow2 .s.tp em.dn{color:var(--down)}
/* since card, one row per place (형 2026-10-08) */
.since .fls .sp.fl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;width:100%;text-align:left;padding:10px 0;border-top:.5px solid var(--line)}
.since .fls .sp.fl:first-child{border-top:0}
.since .fls .sp.fl .nm{flex:1 1 auto;font-size:16px;font-weight:600;color:var(--ink)}
.since .fls .sp.fl .px{flex:none;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.since .fls .px.up,.since .fls b.up{color:var(--up)}.since .fls .px.dn,.since .fls b.dn{color:var(--down)}
.since .fls .wh{flex:1 1 100%}
.since .fls .wa{color:var(--ink2);font-weight:500}.since .fls .wa b{font-weight:700}
.since ul.wl{margin-bottom:10px}
/* 쌍끌이 tile (형 2026-10-08): the fifth tile on wide screens; on phones a full-width slim row under the four (five amounts do not fit) */
#who.tiles button.both .td{display:none}
#who.tiles button.both .tv{color:var(--ink)}
#who.tiles button.both .tv small{display:none;font-size:12px;font-weight:500;color:var(--muted)}
@media (max-width:640px){
  #who.tiles:not(.sgt){grid-template-columns:repeat(4,minmax(0,1fr))}
  #who.tiles button.both{grid-column:1/-1;flex-direction:row;align-items:center;gap:8px;padding:9px 12px}
  #who.tiles button.both .td{display:block;flex:1;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #who.tiles button.both .tv small{display:inline}
}
/* today: market change now with its line (형 2026-10-08) */
.mkline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:6px 0 2px;font-size:13px;color:var(--ink2)}
.mkline .mk{display:inline-flex;align-items:center;gap:6px}.mkline b{font-weight:600}.mkline em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.mkline em.up{color:var(--up)}.mkline em.dn{color:var(--down)}.mkline .t{font-size:12px;color:var(--muted)}
.mkline .spk,.srow2 .spk{display:block}
.sres .rh .rc{min-height:32px;padding:6px 8px}
/* phone: the open search takes the whole bar - nothing peeks around it, and the list under it is solid */
@media (max-width:640px){.top:has(#search.open) .brand,.top:has(#search.open) #watchBtn,.top:has(#search.open) #setBtn,.top:has(#search.open) #liveBtn,.top:has(#search.open) .tag{visibility:hidden}
  .sres{background:var(--raise)}}