*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--text);font:var(--text-base)/var(--rhythm-body-leading) var(--font)}a{color:var(--brand);text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer;border:var(--stroke-thin) solid var(--border);border-radius:var(--button-radius);font-size:var(--button-font-size);font-weight:var(--button-weight);padding:var(--button-padding-y) var(--button-padding-x);background:var(--button-bg);color:var(--text);min-height:var(--button-height)}button:hover{background:var(--button-hover-bg)}button:disabled{opacity:var(--button-disabled-opacity);cursor:wait}.primary{background:var(--button-primary-bg);color:var(--button-primary-fg);border-color:var(--brand);font-weight:var(--button-weight)}.primary:hover{background:var(--button-primary-hover-bg)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:var(--stroke-emphasis) solid var(--brand);outline-offset:var(--space-1)}header{max-width:var(--operations-content-width);margin:auto;display:flex;align-items:center;gap:var(--space-6);padding:var(--space-6)}.brand{font-size:var(--text-xl);font-weight:var(--weight-heavy);color:var(--text);margin-right:auto;letter-spacing:var(--tracking-logo)}.brand span{color:var(--brand)}.layout{display:grid;grid-template-columns:1fr 2fr 1fr;gap:var(--space-8);max-width:var(--operations-content-width);margin:var(--space-6) auto;padding:0 var(--space-6)}h1,h2{line-height:var(--leading-heading)}h1{font-size:var(--text-xl)}h2{font-size:var(--text-lg)}.eyebrow{color:var(--brand);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-label)}.intro>p,.context-guide>p,.local-note{color:var(--text-muted)}.profile{margin-top:var(--space-8);border-top:var(--stroke-thin) solid var(--border);padding-top:var(--space-6)}.local-note{font-size:var(--text-xs);margin-top:var(--space-6)}.composer,article{background:var(--surface);border:var(--stroke-thin) solid var(--border);border-radius:var(--radius-card);padding:var(--space-6)}textarea,input{display:block;width:100%;background:var(--canvas);color:var(--text);border:var(--stroke-thin) solid var(--border);border-radius:var(--radius-control);padding:var(--space-3);margin:var(--space-2) 0 var(--space-4)}textarea{resize:vertical}.row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}time,.meta{font-size:var(--text-xs);color:var(--text-muted)}#status{min-height:var(--space-6);font-size:var(--text-sm);color:var(--text-secondary)}.tabs{display:flex;gap:var(--space-2);border-bottom:var(--stroke-thin) solid var(--border);padding-bottom:var(--space-4);margin-bottom:var(--space-4)}.tabs button{font-size:var(--button-font-size)}.tabs [aria-pressed=true]{color:var(--brand);border-color:var(--brand)}#refresh{margin-left:auto}article{margin-bottom:var(--space-3)}.post-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--space-4) 0}.actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.actions button{font-size:var(--button-font-size-small);background:transparent;color:var(--text-secondary)}.context-card{display:block;background:var(--brand-wash);border:var(--stroke-thin) solid var(--brand-border);border-radius:var(--radius-card);padding:var(--space-3);margin:var(--space-3) 0;font-size:var(--text-sm)}.context-card small{display:block;color:var(--text-muted)}ol{padding-left:var(--space-6);color:var(--text-secondary)}li{padding-bottom:var(--space-3)}dialog{width:min(var(--dialog-width),calc(100% - var(--dialog-gutter)));max-height:var(--dialog-max-block);overflow:auto;background:var(--canvas);color:var(--text);border:var(--stroke-thin) solid var(--border);border-radius:var(--dialog-radius);padding:var(--space-6)}dialog::backdrop{background:var(--overlay-strong)}#more,#more-replies{width:100%;margin:var(--space-4) 0}.empty{padding:var(--space-8);text-align:center;color:var(--text-muted);border:var(--stroke-thin) dashed var(--border);border-radius:var(--radius-card)}.skip,.sr{position:absolute;width:var(--size-visually-hidden);height:var(--size-visually-hidden);overflow:hidden}.skip:focus{width:auto;height:auto;background:var(--surface);padding:var(--space-3);z-index:var(--z-skip)}[hidden]{display:none!important}@media(max-width:1100px){.layout{grid-template-columns:1fr 2fr}.context-guide{display:none}}@media(max-width:700px){header{padding:var(--space-4)}.layout{display:block;margin-top:0;padding:0 var(--space-4)}.intro h1,.intro>p:not(.eyebrow){display:none}.intro .eyebrow{margin:0}.profile{margin:var(--space-3) 0;padding:0;border:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}#session-note{display:none}#profile-form{width:100%}article,.composer{padding:var(--space-4)}.tabs{gap:var(--space-1)}.tabs button{padding:var(--button-padding-y) var(--button-padding-x)}dialog{padding:var(--space-4)}}
.voice-rule{border-left:var(--stroke-emphasis) solid var(--brand);padding-left:var(--space-3);font-weight:var(--weight-bold)}.post-heading{align-items:flex-start;flex-wrap:wrap}.post-author{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0;overflow-wrap:anywhere}.context-card>strong{display:block;margin-top:var(--space-2)}.context-note{color:var(--text-secondary);margin:var(--space-2) 0}.context-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0}.context-links a{display:inline-flex;align-items:center;min-height:var(--size-control-target);text-decoration:underline;text-underline-offset:var(--space-1)}.context-card details{font-size:var(--text-xs);color:var(--text-muted);overflow-wrap:anywhere}.context-card summary{cursor:pointer;padding:var(--space-2) 0}.context-card summary:focus-visible{outline:var(--stroke-emphasis) solid var(--brand);outline-offset:var(--space-1)}
header{flex-wrap:wrap}


/* Embedded in Mandarin (journal and channel conversations): the conversation only, no Wagle header or side columns. */









.incoming-posts{min-height:var(--size-control-target);margin-bottom:var(--space-3)}
#new-posts{color:var(--brand);border-color:var(--brand-border)}
#new-posts-status{position:absolute;width:var(--space-1);height:var(--space-1);overflow:hidden;padding:0;border:0;clip-path:inset(50%);white-space:nowrap}

.server-broadcast{padding:var(--space-4);margin-bottom:var(--space-6);border:var(--stroke-thin) solid var(--border);border-radius:var(--radius-card);background:var(--surface-raised)}
.server-broadcast p{margin:var(--space-2) 0}.server-broadcast p:lang(ko){word-break:keep-all}.server-broadcast summary{font-size:var(--text-xs);color:var(--text-secondary);cursor:pointer}.server-broadcast li{font-size:var(--text-sm);margin-block:var(--space-2)}

/* The feed is one reading surface; side rails never precede the conversation. */
.sr{padding:0;border:0;clip-path:inset(50%);white-space:nowrap}
.layout{grid-template-columns:minmax(0,var(--thread-side-width)) minmax(0,var(--thread-feed-width)) minmax(0,var(--thread-side-width));justify-content:center;gap:var(--space-8);align-items:start;margin-block:var(--space-4)}
.layout>*,.post-author{min-width:0}
.intro,.context-guide{position:sticky;top:var(--space-4);font-size:var(--text-sm)}
.intro h1{font-size:var(--text-lg);margin:var(--space-3) 0}.intro h1 span{color:var(--brand)}





.thread-column{border-inline:var(--stroke-thin) solid var(--border);border-top:var(--stroke-thin) solid var(--border);border-radius:var(--radius-card) var(--radius-card) 0 0;overflow:hidden;background:var(--canvas)}
.tabs{margin:0;padding:0 var(--space-4);gap:var(--space-4);align-items:baseline}
.tabs button{border:0;border-radius:0;background:transparent;padding:var(--button-padding-y) 0;color:var(--text-muted)}
.tabs [aria-pressed=true]{color:var(--text);box-shadow:inset 0 calc(-1 * var(--stroke-thick)) var(--brand)}
/* The smaller refresh reads on the tabs' baseline (.tabs align-items): with Pretendard (2026-11-08, narrower than the device
   face) it fits on the tabs' line on a phone, and centred it sat higher than the tab names. */
.tabs #refresh{font-size:var(--text-xs)}
.composer{background:transparent;border:0;border-bottom:var(--stroke-thin) solid var(--border);border-radius:0;padding:var(--space-4) var(--space-6)}
.composer textarea{border:0;background:transparent;resize:vertical;height:var(--thread-composer-height);min-height:var(--thread-composer-height);margin:0;padding:var(--space-3) 0;font-size:var(--text-sm)}
.composer textarea:focus,.composer textarea:not(:placeholder-shown){height:var(--thread-composer-expanded)}
.composer-tools{margin-top:var(--space-2);align-items:center}
.attach-tools{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.tool-button{border:0;background:transparent;color:var(--text-muted);padding:var(--button-padding-y) var(--button-padding-x);font-size:var(--button-font-size-small);cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--button-height)}
.attach-tools>.tool-button:first-child{margin-inline-start:calc(var(--button-padding-x) * -1)}
.tool-button:hover{color:var(--text)}.tool-button[aria-pressed="true"]{color:var(--brand)}.tool-button .bar-icon{flex:none}
.composer-submit{display:flex;align-items:center;gap:var(--space-3);margin-inline-start:auto}
.char-count{font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}.char-count[data-near="true"]{color:var(--signal-caution)}
.composer:not(:focus-within) .char-count:not([data-near="true"]){display:none}
.composer #post{font-size:var(--button-font-size);padding:var(--button-padding-y) var(--button-padding-x);border-radius:var(--button-radius)}
#status:empty,#media-status:empty,#reply-media-status:empty,.incoming-posts:has(#new-posts[hidden]){display:none}
#status{margin:0;padding:var(--space-3) var(--space-6)}
.incoming-posts{display:flex;justify-content:center;align-items:center;min-height:0;padding:var(--space-3) var(--space-6);margin:0;position:relative}
#feed article{border:0;border-bottom:var(--stroke-thin) solid var(--border);border-radius:0;background:transparent;padding:var(--space-6);margin:0;font-size:var(--text-sm)}
.post-heading{gap:var(--space-1) var(--space-3)}.post-heading time{font-size:var(--text-xs)}
.post-body{line-height:var(--leading-reading);margin:var(--space-3) 0}
.actions{gap:0 var(--space-3)}.actions button{border:0;padding:var(--button-padding-y) 0;min-height:var(--button-height);border-radius:0}.actions a{display:inline-flex;align-items:center}
.context-card{background:transparent;border-color:var(--border);margin-block:var(--space-4)}
.context-card .context-note{font-size:var(--text-xs)}
.context-guide h2{font-size:var(--text-base);margin-block:var(--space-6) var(--space-3)}
.server-broadcast{background:transparent;border:0;border-bottom:var(--stroke-thin) solid var(--border);border-radius:0;padding:0 0 var(--space-4);margin:var(--space-3) 0 var(--space-6)}
.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-block:var(--space-3)}
.media-grid>a:only-child,.media-grid>.media-draft:only-child{grid-column:1 / -1}
.media-grid img{display:block;width:100%;height:auto;max-height:var(--thread-image-height);object-fit:contain;background:var(--surface);border-radius:var(--radius-control)}
.media-draft{display:grid;gap:var(--space-3);justify-items:start}.media-draft img{justify-self:stretch}.media-draft button{font-size:var(--button-font-size-small);min-height:var(--button-height);margin:0}
.link-preview{display:block;color:var(--text);border:var(--stroke-thin) solid var(--border);border-radius:var(--radius-control);overflow:hidden;margin-block:var(--space-3)}
.link-preview img{width:100%;max-height:var(--thread-image-height);object-fit:cover;display:block}
.link-preview>div{padding:var(--space-3)}.link-preview strong{display:block;font-size:var(--text-sm)}.link-preview small,.link-preview p{color:var(--text-muted);font-size:var(--text-xs)}.link-preview p{margin:var(--space-1) 0 0}
@media(max-width:1100px){.layout{grid-template-columns:minmax(0,var(--thread-side-width)) minmax(0,var(--thread-feed-width));gap:var(--space-6)}}
@media(max-width:700px){.layout{display:flex;flex-direction:column;gap:var(--space-3);padding:0;margin:0}.intro{position:static;width:100%;padding:0 var(--space-4)}.intro h1,.intro>.local-note{display:none}.thread-column{width:100%;border-inline:0;border-radius:0}.tabs{gap:var(--space-4)}.composer,#feed article{padding:var(--space-4)}.context-guide{display:none}.post-heading time{font-size:var(--text-xs)}.composer-tools{align-items:flex-start}.attach-tools{gap:var(--space-2)}.attach-tools button:not(.chip),.file-button{font-size:var(--button-font-size-small)}#detail .row{flex-wrap:wrap}}



@media(max-width:700px),(any-pointer:coarse){button,.actions button,.file-button{min-height:var(--button-height);min-width:var(--button-min-width)}}

.rank-badge{width:var(--size-control-target);height:var(--size-control-target);object-fit:contain;flex-shrink:0;border-radius:var(--radius-pill)}
.company-mentions{margin-block:var(--space-2)}.mention-chips{display:flex;flex-wrap:wrap;gap:var(--chip-row-gap) var(--space-2);margin-block:var(--space-2)}.mention-options{display:flex;flex-direction:column;gap:var(--space-1);max-height:var(--size-menu-max-block);overflow:auto;border:var(--stroke-thin) solid var(--border);border-radius:var(--radius-card);background:var(--surface)}.mention-options[hidden]{display:none}.mention-options button{text-align:start}.mention-options button[data-active="true"]{outline:var(--stroke-emphasis) solid var(--brand);outline-offset:calc(-1 * var(--stroke-emphasis))}.share-fallback{display:block;flex-basis:100%;font-size:var(--text-xs)}.share-fallback input{display:block;width:100%;margin-block:var(--space-2)}
/* The fallback copy buffer (company-mentions.js): fixed so selecting it never scrolls the page, and never seen. */
.copy-buffer{position:fixed;inset:0 auto auto 0;opacity:0;pointer-events:none}
/* Headless app (the SDK mounts it in another service's page; that page's header stands in for Wagle's). Conversation
   layout: a host page's section shows the thread column only (no side columns, no broadcast desk) and a compact composer. */
.wagle-app[data-layout="conversation"] .layout{display:block;margin:0;padding:0}
.wagle-app[data-layout="conversation"] .play-left,.wagle-app[data-layout="conversation"] .play-right,.wagle-app[data-layout="conversation"] .server-broadcast,.wagle-app[data-layout="conversation"] #reposts{display:none}
.wagle-app[data-layout="conversation"] .play-welcome>.eyebrow,.wagle-app[data-layout="conversation"] .play-welcome>h2,.wagle-app[data-layout="conversation"] .play-welcome>p{display:none}
/* Inside a host section the host's card is the surface: the app and its thread column paint no page background
   (2026-10-10: a page-coloured band showed under the composer in Mandarin's company channel). */
.wagle-app[data-layout="conversation"],.wagle-app[data-layout="conversation"] .thread-column{background:transparent}
/* The host section's heading already names the company scope; the composer's scope note would repeat it. */
.wagle-app[data-layout="conversation"] #attachment>.scope-note{display:none}

/* A post's video (it started from a company's official video): the thumbnail, then the player in place. */
.post-video{position:relative;display:block;inline-size:100%;max-inline-size:var(--size-report-reading);aspect-ratio:16/9;margin-block:var(--space-3);padding:0;
  border:var(--stroke-thin) solid var(--border);border-radius:var(--radius-control);overflow:hidden;background:var(--canvas);cursor:pointer}
.post-video img,.post-video iframe{display:block;inline-size:100%;block-size:100%;object-fit:cover;border:0}
.post-video-play{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--text-xl);color:var(--media-text);background:var(--overlay-soft)}
.post-video:hover .post-video-play{background:var(--overlay-medium)}
.post-video.is-playing{cursor:auto}

/* A label never breaks inside a word (2026-10-24: the conversation embedded in a 375px journal article inherited the
   article's overflow-wrap and drew "Po st", "Followi ng"): a button is at least as wide as its longest word, and a
   row that runs out of room wraps between buttons. */
.wagle-app button{overflow-wrap:normal}
.tabs,.composer-tools{flex-wrap:wrap}
/* The top of the page as on Mandarin and Sally (2026-10-31 user: "메뉴 두께를 맞춰서 위로 튀는 듯한 느낌은 없었으면
   좋겠어"): the market indices strip (control-contract.css), then the site header at the shared --size-site-header. The
   board starts at the header's edge; its own top margin stays inside it. */
@media(min-width:701px){body>header{min-height:var(--size-site-header);padding-block:var(--space-3)}}
.wagle-app{display:flow-root}
/* A wish's feed card: the shared slip (shared/styles/wish-slip.css) and the way to its mandarin on Mandarin's 소원나무. */
.post-wish{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-4);margin:var(--space-4) 0}.post-wish-open{font-size:var(--text-sm)}
/* 특별한 날 (local-core/src/special-days.cjs): the day's picture and its one line above the chief's row. */
.special-day{position:relative;overflow:hidden;margin:var(--space-3) 0 var(--space-4);border:var(--stroke-thin) solid var(--border);border-radius:var(--radius-card);background:var(--media-canvas)}
.special-day img{display:block;inline-size:100%;block-size:var(--size-special-day-band);object-fit:cover;object-position:center var(--special-day-focus,55%)}
.special-day figcaption{position:absolute;inset-inline:0;inset-block-end:0;padding:var(--space-6) var(--space-5) var(--space-4);background:linear-gradient(to top,var(--overlay-strong),transparent);color:var(--media-text);font-size:var(--text-base);font-weight:var(--weight-semibold);line-height:var(--leading-body);overflow-wrap:anywhere}
.special-day[hidden]{display:none}