/* Light/dark theme + rounded pill tabs. Loaded on every page by navigation.js. */
:root{--pill-radius:999px;--pill-ease:cubic-bezier(.2,.7,.2,1)}

/* ---- Circular reveal from the clicked button (View Transitions) ---- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}

/* ---- Theme toggle: sliding switch in the header (floating fallback on pages without header) ---- */
.theme-toggle{position:relative;flex:none;width:58px;height:34px;padding:0;border-radius:999px;border:1px solid #cfd8d2;background:#e9efe9;color:#1f3b2c;display:flex;align-items:center;cursor:pointer;transition:background .4s var(--pill-ease),border-color .3s}
.theme-toggle:hover{background:#dfe8e1}
.theme-toggle .knob{position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0003;transition:transform .45s cubic-bezier(.5,1.6,.4,1)}
html[data-theme=dark] .theme-toggle .knob{transform:translateX(24px)}
.theme-toggle svg{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;z-index:1;transition:opacity .3s,transform .45s var(--pill-ease)}
.theme-toggle .sun{left:8px}.theme-toggle .moon{right:8px;opacity:.55}
html[data-theme=dark] .theme-toggle .sun{opacity:.55;transform:rotate(90deg)}
html[data-theme=dark] .theme-toggle .moon{opacity:1}
.theme-toggle:active .knob{width:32px}
html[data-theme=dark] .theme-toggle:active .knob{transform:translateX(18px)}
.theme-toggle.floating{position:fixed;right:18px;bottom:18px;z-index:1000;box-shadow:0 6px 18px #0002}

/* ---- Header: identical on every page, search always visible, dropdown above sticky tabs ---- */
body>.sidebar{z-index:200!important}
@media(min-width:1101px){body>.sidebar{padding-left:max(72px,calc((100% - 1200px)/2))!important;padding-right:max(72px,calc((100% - 1200px)/2))!important;gap:28px!important}}
body>.sidebar .header-actions{gap:8px;align-items:center}
body>.sidebar .header-company-search{position:relative;display:flex;align-items:center;width:150px;height:36px;margin:0!important;padding:0!important;border:1px solid #dae3d9;border-radius:999px;background:#fff;box-shadow:none;box-sizing:border-box;transition:width .35s var(--pill-ease),box-shadow .3s,border-color .3s}
body>.sidebar .header-company-search:focus-within{width:260px;border-color:#19804d;box-shadow:0 0 0 4px #19804d22}
body>.sidebar .header-company-search .search-icon{display:none}
body>.sidebar .header-company-search>input{flex:1;min-width:0;height:100%;padding:0 4px 0 15px!important;border:0!important;background:transparent!important;font-size:13px!important;outline:0;box-shadow:none!important}
body>.sidebar .header-company-search>button{flex:none;width:34px;min-width:0!important;height:100%;padding:0!important;border:0!important;background:transparent!important;color:#19804d!important;font-size:16px!important;border-radius:0 999px 999px 0!important}
body>.sidebar .header-company-search .company-results{left:auto;right:0;width:380px;max-width:92vw}
@media(max-width:900px){body>.sidebar .header-company-search{width:112px}body>.sidebar .header-company-search:focus-within{width:190px}}
body>.sidebar{transition:box-shadow .3s,background .3s}body>.sidebar.scrolled{box-shadow:0 6px 24px #173c2918!important}

/* ---- Rounded pill tabs ---- */
#nav a,.analysis-jumps a,.institution-jumps a,.investor-picker-row #recommendations button,.toggle button,.periods button,.switch button,.categories button,.tickers button{border-radius:var(--pill-radius)!important;transition:background .25s var(--pill-ease),color .2s,border-color .2s,transform .15s var(--pill-ease),box-shadow .25s!important}
#nav a.active,#nav a[aria-current=page],.analysis-jumps a.section-selected,.institution-jumps a.section-selected{border-radius:var(--pill-radius)!important;box-shadow:0 2px 8px #19804d22}
.analysis-jumps,.institution-jumps{border-radius:var(--pill-radius);gap:4px}
.toggle,.switch{background:#eef2ee;border-radius:var(--pill-radius);padding:3px;gap:2px}
.toggle button,.switch button{border:0!important}
#nav a:hover,.analysis-jumps a:hover,.institution-jumps a:hover,.toggle button:hover,.periods button:hover,.categories button:hover,.tickers button:hover{transform:translateY(-1px)}
#nav a:active,.analysis-jumps a:active,.institution-jumps a:active,button:active{transform:scale(.96)}
@media(max-width:1100px){#nav{gap:4px}#nav a{padding:8px 14px}}

/* ---- Light, cheap hover feedback only (no entrance animations: they made pages feel slow) ---- */
/* no hover lift: a card that moves out from under the pointer flickers (hover on/off loop) */
body>.sidebar.scrolled{box-shadow:0 6px 24px #173c2918!important}
.company-results button:hover{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ---- Sliding highlight behind the top menu ---- */
#nav{position:relative}
#nav .nav-pill{position:absolute;left:0;top:0;height:0;width:0;border-radius:999px;background:#dcebdc;box-shadow:0 2px 10px #19804d26;pointer-events:none;transition:transform .4s cubic-bezier(.5,1.4,.4,1),opacity .25s;opacity:0;z-index:0}
#nav.has-pill a{position:relative;z-index:1}
#nav.has-pill a.active,#nav.has-pill a[aria-current=page]{background:transparent!important;box-shadow:none}
#nav.has-pill a:hover{color:#19804d}
#nav a svg{transition:transform .3s cubic-bezier(.5,1.6,.4,1)}#nav a:hover svg{transform:scale(1.2) rotate(-6deg)}
main section,main .analysis-section,main details{border-radius:22px}

/* ---- Logos fill their tile completely (the tile box is not square, 'contain' left white bars) ---- */
.company-logo img,.table-company img,.company-results img,.logo img{object-fit:cover!important;padding:0!important}

/* 헤더 검색: 관심 버튼이 빠진 자리까지 길게, 돋보기 대신 '검색' 글자 버튼(초록·검은 테두리), 모양은 둥글게 */
body>.sidebar .header-company-search{width:224px!important}
body>.sidebar .header-company-search:focus-within{width:300px!important}
body>.sidebar .header-company-search>button{width:auto!important;min-width:46px!important;height:26px!important;margin:0 4px 0 0!important;padding:0 12px!important;background:#3d7e52!important;border:1px solid #10171b!important;border-radius:999px!important;color:#fff!important;font-size:13px!important;font-weight:700!important;line-height:1;white-space:nowrap;align-self:center}
body>.sidebar .header-company-search>input{padding-right:6px!important}
@media(max-width:900px){body>.sidebar .header-company-search{width:150px!important}body>.sidebar .header-company-search:focus-within{width:210px!important}}

/* 기업 분석 탭 헤더 검색도 다른 탭과 같은 모양(길게·둥글게·'검색' 글자 버튼) */
body.analysis-compact>.sidebar #search.header-company-search{width:224px!important;border-radius:999px!important}
body.analysis-compact>.sidebar #search.header-company-search:focus-within{width:300px!important}
body.analysis-compact>.sidebar #search.header-company-search>button{width:auto!important;min-width:46px!important;height:26px!important;margin:0 4px 0 0!important;padding:0 12px!important;background:#3d7e52!important;border:1px solid #10171b!important;border-radius:999px!important;color:#fff!important;font-size:13px!important;font-weight:700!important;line-height:1;white-space:nowrap;align-self:center}
body.analysis-compact>.sidebar #search.header-company-search>input{padding:0 6px 0 15px!important;font-size:13px!important}
@media(max-width:900px){body.analysis-compact>.sidebar #search.header-company-search{width:150px!important}body.analysis-compact>.sidebar #search.header-company-search:focus-within{width:210px!important}}

/* 검색창 통합 디자인(2026-10-25): 흰 라운드 박스 + 초록 '검색' 버튼(검은 테두리). 메인·상단 모두 동일. */
main>#search{display:flex;align-items:center;gap:8px;max-width:980px;margin:0 auto;padding:6px 6px 6px 18px!important;background:#fff;border:1px solid #e1e4dc!important;border-radius:12px!important;box-shadow:0 1px 3px #363a2810}
main>#search .search-icon{display:none}
main>#search input{flex:1;min-width:0;border:0!important;background:transparent!important;outline:0;box-shadow:none!important;font-size:15px!important;padding:10px 0!important;color:#1c2a22}
main>#search input::placeholder,body>.sidebar .header-company-search input::placeholder{color:#8a93a8;opacity:1}
main>#search>button{flex:none;min-width:56px;height:40px;padding:0 16px!important;background:#3d7e52!important;color:#fff!important;border:1px solid #10171b!important;border-radius:8px!important;font-size:14px;font-weight:700;white-space:nowrap}
body>.sidebar .header-company-search,body.analysis-compact>.sidebar #search.header-company-search{border-radius:12px!important;border:1px solid #e1e4dc!important;background:#fff}
body>.sidebar .header-company-search>button,body.analysis-compact>.sidebar #search.header-company-search>button{border-radius:8px!important}
/* 상단 오른쪽 순서: 검색창 → 화면 밝기 → 언어 */
body>.sidebar .header-actions>.header-company-search,body>.sidebar .header-actions>#search{order:0!important}
body>.sidebar .header-actions>.theme-toggle{order:1!important}
body>.sidebar .header-actions>.language-toggle{order:2!important}
body>.sidebar .header-actions>.personal-watch-button{order:3!important}
@media(min-width:1101px){body.analysis-compact>.sidebar{padding-left:calc(max(72px,calc((100% - 1200px)/2)) + 18px)!important;padding-right:calc(max(72px,calc((100% - 1200px)/2)) + 18px)!important}}
.notice:empty{display:none!important}

/* 모바일(iPhone Safari): 입력칸 글자가 16px 미만이면 눌렀을 때 화면이 자동 확대되어 왼쪽이 잘린다. 검색칸만 16px로 맞춘다(PC 영향 없음). */
@media (max-width:760px){
  html body>.sidebar .header-company-search input,
  html body>.sidebar #search.header-company-search>input,
  html body.analysis-compact>.sidebar #search.header-company-search>input,
  html body.analysis-compact .sidebar #search input,
  html body main>#search input{font-size:16px!important}
  html body>.sidebar .header-company-search input::placeholder{font-size:13px}
  /* 검색 결과 팝업: 검색칸 오른쪽 끝에 붙어 있어 좁은 화면(아이폰)에서 왼쪽이 잘렸다. 화면 가운데에 놓는다. */
  html body>.sidebar .header-company-search .company-results,
  html body.analysis-compact>.sidebar #search.header-company-search .company-results{position:fixed!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;top:calc(var(--page-header-height,64px) + 6px)!important;width:min(360px,calc(100vw - 24px))!important;max-width:none!important}
}