/* ===== 돈냄새연구소 forest UI for the analysis service (presentation only) ===== */ :root{--bg:#061019;--panel:#0c1f2d;--active:#123247;--border:#21404f;--text:#eaf3f1;--muted:#a3b9c3;--fx-mint:#7af0c4;--fx-mint2:#34d399;--fx-card:rgba(10,27,40,.94);--fx-card2:rgba(15,36,52,.96);--fx-line:rgba(122,240,196,.16);--fx-line2:#21404f;--fx-field:#0a1c29} html body:is(#fx,*){background:#061019 linear-gradient(180deg,#071521 0%,#061019 100%);color:var(--text)} html body:is(#fx,*)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(6,16,25,.55) 0%,rgba(6,16,25,.78) 40%,rgba(6,16,25,.9) 100%),url(assets/forest/forest-bg-wide.webp) center top/cover no-repeat;opacity:.9} html body.mobile:is(#fx,*)::before{background:linear-gradient(180deg,rgba(6,16,25,.45) 0%,rgba(6,16,25,.8) 35%,rgba(6,16,25,.92) 100%),url(assets/forest/forest-bg-tall.webp) center top/cover no-repeat} html body:is(#fx,*) :is(button,a,input,select,summary):focus-visible{outline:3px solid #9af5d3;outline-offset:2px} html body:is(#fx,*) .positive,html body:is(#fx,*) .teal{color:#34d8b0} html body:is(#fx,*) .negative{color:#fb7185} html body:is(#fx,*) .blue{color:#93c5fd} /* ---- shells ---- */ html body:is(#fx,*) .mobile-app{max-width:440px;background:transparent;border-inline:0} html body:is(#fx,*) .mobile-header{background:transparent;border-bottom:0;padding:14px 18px 6px} html body:is(#fx,*) .mobile-header>div{display:grid;grid-template-columns:30px auto;column-gap:10px;align-items:center} html body:is(#fx,*) .mobile-header>div::before{content:"";grid-row:1/3;width:30px;height:40px;background:url(assets/forest/sprout-mark.webp) center/contain no-repeat} html body:is(#fx,*) .mobile-header small{color:#b6cad3;font-size:11.5px;grid-column:2} html body:is(#fx,*) .mobile-header b{font-size:18px;letter-spacing:-.01em;grid-column:2;line-height:1.3} html body:is(#fx,*) .mobile-content{padding:6px 16px 110px} html body.mobile:is(#fx,*) .detail-mobile{padding-bottom:96px} html body:is(#fx,*) .back-link{color:var(--fx-mint);font-size:13px;min-height:44px;margin:0;display:inline-flex;align-items:center;gap:6px} html body:is(#fx,*) .detail-mobile>.back-link::before{content:"←"} html body:is(#fx,*) .detail-mobile>.back-link{min-width:64px;padding-right:12px} html body:is(#fx,*) .topbar nav a{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center} html body:is(#fx,*) .brand{min-height:44px} html body:is(#fx,*) .primary{min-height:44px} html body:is(#fx,*) .bottom-nav{width:min(440px,100%);background:rgba(6,17,26,.97);border-top:1px solid var(--fx-line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))} html body:is(#fx,*) .bottom-nav>*{color:#a3b9c3;min-height:52px} html body:is(#fx,*) .bottom-nav>*.active{color:var(--fx-mint);border-bottom:0;font-weight:700} html body.mobile:is(#fx,*) .add-cta{position:static;transform:none;width:auto;margin:4px 0 0;background:var(--fx-card);border:1px solid var(--fx-line);border-radius:16px;padding:10px 12px} html body:is(#fx,*) .primary{background:linear-gradient(180deg,#86f3cd,#44d8a4);border-color:#7af0c4;color:#05261b;border-radius:14px} html body.mobile:is(#fx,*) .add-cta>.primary{min-height:48px;font-size:15px} html body:is(#fx,*) .outline{background:rgba(15,36,52,.9);border:1px solid #2c5163;border-radius:12px;color:#dff7ee;min-height:44px} html body:is(#fx,*) .sample{border-color:var(--fx-line);color:var(--fx-mint);border-radius:999px} /* desktop shell */ html body:is(#fx,*) .sidebar{background:linear-gradient(180deg,rgba(8,24,35,.97),rgba(6,16,25,.97));border-right:1px solid var(--fx-line)} html body:is(#fx,*) .brand-mark{border:0;width:30px;height:40px;background:url(assets/forest/sprout-mark.webp) center/contain no-repeat} html body:is(#fx,*) .brand-mark svg{display:none} html body:is(#fx,*) .side-link.active{background:rgba(122,240,196,.12);border:1px solid rgba(122,240,196,.4);color:var(--fx-mint)} html body:is(#fx,*) .topbar{background:rgba(6,17,26,.85);border-bottom:1px solid var(--fx-line)} html body:is(#fx,*) .topbar nav a.active{color:var(--fx-mint);border-color:var(--fx-mint)} html body:is(#fx,*) .workspace>footer{border-top:1px solid var(--fx-line);color:#a3b9c3} html body:is(#fx,*) .device-link{border-top-color:var(--fx-line);min-height:44px} html body.desktop:is(#fx,*) .workspace main{max-width:1180px} html body:is(#fx,*) .panel{background:var(--fx-card);border:1px solid var(--fx-line);border-radius:16px} html body:is(#fx,*) .home-hero{background:var(--fx-card);border-color:var(--fx-line)} html body:is(#fx,*) .entry{background:var(--fx-card);border:1px solid var(--fx-line);border-radius:16px} html body:is(#fx,*) .entry-icon.detail{background:rgba(52,211,153,.2);color:var(--fx-mint)} /* ---- search (home PC + detail header) ---- */ html body:is(#fx,*) .search-bar{border-radius:16px;overflow:hidden;border:1px solid #2c5163;background:var(--fx-field)} html body:is(#fx,*) .search-bar input{background:var(--fx-field) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239fb6c2%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22M20 20l-4.2-4.2%22/%3E%3C/svg%3E") 16px center/20px no-repeat;color:var(--text);padding-left:46px;border:0} html body:is(#fx,*) .search-bar input::placeholder{color:#8ea6b2} html body:is(#fx,*) .search-bar button{background:rgba(122,240,196,.16);color:var(--fx-mint);border:0;border-left:1px solid #2c5163;min-width:56px} html body:is(#fx,*) #home-etf-select+.fx-etf-list{margin:10px 0 22px} html body:is(#fx,*) #home-etf-select+.fx-etf-list .fx-rows{max-height:520px;overflow:auto;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));padding-right:4px} html body:is(#fx,*) .detail-header{position:relative;background:transparent;border:0;border-radius:0;padding:4px 0 0;margin-bottom:12px} html body:is(#fx,*) .detail-header .identity>small{display:inline-block;color:var(--fx-mint);font-size:12.5px;font-weight:600;margin:0 0 2px} html body:is(#fx,*) .detail-header .identity h1,html body.mobile:is(#fx,*) .detail-header h1,html body.mobile:is(#fx,*) .identity h1{font-size:20px;line-height:1.4;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;margin:0} html body:is(#fx,*) #real-etf-search{display:block;margin-top:8px;min-height:48px;border-radius:12px;border:1px solid #2c5163;background:var(--fx-field) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239fb6c2%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22M20 20l-4.2-4.2%22/%3E%3C/svg%3E") 14px center/20px no-repeat;color:var(--text);padding:10px 12px 10px 44px;font-size:15px} html body:is(#fx,*) #real-etf-search::placeholder{color:#8ea6b2} html body:is(#fx,*) #real-etf-select{display:block;margin-top:8px;min-height:46px;border-radius:12px;border:1px solid #2c5163;background-color:var(--fx-field);color:var(--text);padding:8px 12px;font-size:14px;font-weight:600} html body:is(#fx,*) .fx-etf-list{margin:10px 0 12px} html body:is(#fx,*) .fx-list-toggle{min-height:44px;width:100%;border-radius:12px;background:rgba(15,36,52,.92);border:1px solid #2c5163;color:var(--fx-mint);font-weight:700;font-size:14px} html body:is(#fx,*) .fx-list-head{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#b9ccd4;font-size:13px;margin:0 2px 8px} html body:is(#fx,*) .fx-list-head .fx-list-toggle{width:auto;padding:6px 14px} html body:is(#fx,*) .fx-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-items:start} html body:is(#fx,*) .fx-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:stretch;width:100%;min-height:68px;padding:0;text-align:left;background:var(--fx-card2);border:1px solid #23465a;border-radius:14px;color:var(--text)} html body:is(#fx,*) .fx-row:hover{border-color:rgba(122,240,196,.45)} html body:is(#fx,*) .fx-row-main{min-width:0;padding:12px 10px 12px 16px;display:flex;flex-direction:column;justify-content:center;gap:2px} html body:is(#fx,*) .fx-row-main b{font-size:16px;line-height:1.35;font-weight:700;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html body:is(#fx,*) .fx-row-main small{font-size:12.5px;color:#a3b9c3;letter-spacing:.03em} html body:is(#fx,*) .fx-row-go{display:flex;align-items:center;justify-content:center;white-space:nowrap;color:var(--fx-mint);font-size:14.5px;font-weight:700;border-left:1px solid #23465a;margin:12px 0} html body:is(#fx,*) .fx-empty{color:#a3b9c3;padding:14px;text-align:center;background:var(--fx-card);border-radius:14px} html body:is(#fx,*) .detail-header .meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px;margin-top:12px;padding:12px 14px;background:var(--fx-card);border:1px solid var(--fx-line);border-radius:16px;font-size:12.5px;color:#a3b9c3} html body:is(#fx,*) .detail-header .meta span{min-width:0} html body:is(#fx,*) .detail-header .meta b{color:#eaf3f1;font-weight:600;overflow-wrap:anywhere} html body:is(#fx,*) .detail-header .strategy{margin-top:10px;font-size:12.5px;line-height:1.7;color:#b9ccd4} html body:is(#fx,*) .detail-header .source-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} html body:is(#fx,*) .detail-header .source-links a{min-height:44px;padding:8px 16px} html body:is(#fx,*) .detail-header>.definition{margin-top:8px;font-size:12px} /* ---- analysis tabs ---- */ html body:is(#fx,*) .section-tabs{position:sticky;top:0;z-index:10;display:flex;gap:4px;padding:8px 0;margin:0 0 12px;background:linear-gradient(180deg,rgba(6,16,25,.98) 80%,rgba(6,16,25,.88));border:0;border-radius:0;overflow-x:auto;scrollbar-width:none} html body:is(#fx,*) .section-tabs::-webkit-scrollbar{display:none} html body:is(#fx,*) .section-tabs :is(button,.analysis-tab),html body.mobile:is(#fx,*) .section-tabs :is(button,.analysis-tab){flex:1 0 auto;min-width:44px;min-height:44px;padding:6px 6px;font-size:12px;font-weight:600;color:#cfe0e6;background:rgba(14,34,49,.95);border:1px solid #24475a;border-radius:11px;white-space:nowrap} html body:is(#fx,*) .section-tabs :is(button,.analysis-tab).active{background:rgba(122,240,196,.16);border-color:var(--fx-mint);color:#c9ffe9;font-weight:800;box-shadow:0 0 0 1px rgba(122,240,196,.25) inset,0 0 14px rgba(122,240,196,.15)} html body.desktop:is(#fx,*) .section-tabs{padding:10px 0} html body.desktop:is(#fx,*) .section-tabs :is(button,.analysis-tab){font-size:14px;min-height:46px} /* ---- sections ---- */ html body:is(#fx,*) .panel.section,html body.mobile:is(#fx,*) .panel.section{background:var(--fx-card);border:1px solid var(--fx-line);border-radius:18px;padding:0;overflow:hidden;margin-bottom:14px;scroll-margin-top:68px} html body:is(#fx,*) .section>summary,html body.mobile:is(#fx,*) .section>summary,html body.mobile:is(#fx,*) .section[open]>summary{background:transparent;padding:14px 16px;min-height:58px;gap:12px} html body:is(#fx,*) .section[open]>summary{border-bottom:1px solid rgba(255,255,255,.06)} html body:is(#fx,*) .section-number,html body.mobile:is(#fx,*) .section-number{width:30px;height:30px;border-radius:9px;background:rgba(52,211,153,.16);border:1px solid rgba(122,240,196,.4);color:var(--fx-mint);font-size:15px;font-weight:800} html body:is(#fx,*) .section>summary h2,html body.mobile:is(#fx,*) .section h2{font-size:18px;font-weight:800;letter-spacing:-.01em;flex:1;min-width:0} html body:is(#fx,*) .section>summary>svg{color:#a3b9c3} html body:is(#fx,*) .section-body,html body.mobile:is(#fx,*) .section-body{padding:14px 14px 16px} html body:is(#fx,*) .definition{color:#a3b9c3} html body:is(#fx,*) .period-caption{color:#a3b9c3} /* generic metric cards inside detail sections */ html body[data-view="detail"]:is(#fx,*) .section .metric,html body.mobile[data-view="detail"]:is(#fx,*) .section .metric{background:var(--fx-card2);border:1px solid #22445a;border-radius:14px;padding:12px;text-align:left} html body[data-view="detail"]:is(#fx,*) .section .metric>span,html body.mobile[data-view="detail"]:is(#fx,*) .section .metric>span,html body.mobile[data-view="detail"]:is(#fx,*) #perf .metric>span,html body.mobile:is(#fx,*) #perf .metric>span,html body.mobile:is(#fx,*) #market .metric>span{color:#c4d6dd;font-size:12.5px;font-weight:600;justify-content:flex-start;text-align:left;min-height:0} html body[data-view="detail"]:is(#fx,*) .section .metric small,html body.mobile[data-view="detail"]:is(#fx,*) .section .metric small,html body.mobile[data-view="detail"]:is(#fx,*) #perf .metric small{color:#a3b9c3;font-size:11.5px} html body.mobile[data-view="detail"]:is(#fx,*) #perf .metric strong,html body[data-view="detail"]:is(#fx,*) #perf .metric strong{font-size:22px;text-align:left} /* 1 분배 */ html body:is(#fx,*) #dist .dist-cards,html body.mobile:is(#fx,*) #dist .dist-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} html body.desktop:is(#fx,*) #dist .dist-cards{grid-template-columns:repeat(4,minmax(0,1fr))} html body:is(#fx,*) #dist .dist-card{position:relative;padding:14px 12px 13px 58px!important;min-height:118px;display:block} html body:is(#fx,*) #dist .dist-card::before{content:"";position:absolute;left:12px;top:14px;width:36px;height:36px;border-radius:50%;background:rgba(122,240,196,.1) var(--fx-ico) center/20px no-repeat;border:1px solid rgba(122,240,196,.28)} html body:is(#fx,*) #dist .dist-card:nth-child(1){--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fcd34d%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2212%22 cy=%226%22 rx=%227%22 ry=%222.6%22/%3E%3Cpath d=%22M5 6v4c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6V6M5 10v4c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6v-4M5 14v4c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6v-4%22/%3E%3C/svg%3E")} html body:is(#fx,*) #dist .dist-card:nth-child(1)::before{background-color:rgba(252,211,77,.1);border-color:rgba(252,211,77,.3)} html body:is(#fx,*) #dist .dist-card:nth-child(2){--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237af0c4%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%225%22 width=%2216%22 height=%2215%22 rx=%222.5%22/%3E%3Cpath d=%22M4 10h16M8 3v4M16 3v4%22/%3E%3C/svg%3E")} html body:is(#fx,*) #dist .dist-card:nth-child(3){--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237af0c4%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6L6 18%22/%3E%3Ccircle cx=%227.5%22 cy=%227.5%22 r=%222.3%22/%3E%3Ccircle cx=%2216.5%22 cy=%2216.5%22 r=%222.3%22/%3E%3C/svg%3E")} html body:is(#fx,*) #dist .dist-card:nth-child(4){--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2393c5fd%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 19v-6M12 19V6M18 19v-9%22/%3E%3C/svg%3E")} html body:is(#fx,*) #dist .dist-card:nth-child(4)::before{background-color:rgba(147,197,253,.1);border-color:rgba(147,197,253,.3)} html body:is(#fx,*) #dist .dist-card>span{display:block;line-height:1.4;word-break:keep-all} html body:is(#fx,*) #dist .dist-card strong,html body.mobile[data-view="detail"]:is(#fx,*) #dist .dist-card strong{display:block;font-size:22px;font-weight:800;line-height:1.3;margin:6px 0 4px;text-align:left;white-space:nowrap;letter-spacing:-.01em} html body:is(#fx,*) #dist .dist-card strong:not(.blue){color:#fff} html body:is(#fx,*) #dist .dist-card small,html body:is(#fx,*) #dist .dist-card small span{display:block;line-height:1.55} html body:is(#fx,*) #dist .dist-statistics dl{margin:8px 0 0;display:grid;gap:4px} html body:is(#fx,*) #dist .dist-statistics dl div{display:flex;justify-content:space-between;gap:6px;font-size:12px} html body:is(#fx,*) #dist .dist-statistics dt{color:#a3b9c3} html body:is(#fx,*) #dist .dist-statistics dd{margin:0;font-weight:700;color:#fff;white-space:nowrap} html body:is(#fx,*) #dist .dist-chart-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)} html body:is(#fx,*) #dist .dist-chart-heading h3{font-size:16px;font-weight:800} html body:is(#fx,*) .history-link{background:transparent;border:0;color:var(--fx-mint);font-size:13px;font-weight:600;min-height:44px;padding:6px 2px} html body:is(#fx,*) .interactive-chart,html body:is(#fx,*) .market-chart{background:rgba(5,15,23,.55);border:1px solid #1d3a4b;border-radius:14px;padding:6px 4px 2px;margin-top:8px} html body:is(#fx,*) .chart text{font-family:var(--font)} html body:is(#fx,*) #dist .dist-chart-note{position:relative;background:rgba(255,255,255,.035);border:1px solid #23435a;border-radius:12px;padding:10px 12px 10px 38px;font-size:12px} html body:is(#fx,*) #dist .dist-chart-note::before{content:"";position:absolute;left:12px;top:11px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fcd34d%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1.1 1.3 1.1 2.2h5c0-.9.5-1.7 1.1-2.2A6 6 0 0 0 12 3z%22/%3E%3C/svg%3E") center/contain no-repeat} html body:is(#fx,*) .detail-chart-tooltip,html body:is(#fx,*) .market-tooltip{background:#0e2638;border:1px solid #2c5163;color:#eaf3f1;border-radius:10px} /* periods */ html body:is(#fx,*) .periods{gap:6px} html body:is(#fx,*) .periods button,html body.mobile:is(#fx,*) .periods button{min-height:44px;background:rgba(14,34,49,.95);border:1px solid #24475a;border-radius:11px;color:#cfe0e6;font-weight:600;font-size:12.5px} html body:is(#fx,*) .periods button.active{background:rgba(122,240,196,.16);border-color:var(--fx-mint);color:#c9ffe9;font-weight:800} html body:is(#fx,*) .custom-period input{background:var(--fx-field);border:1px solid #2c5163;color:var(--text);border-radius:10px;min-height:44px} html body:is(#fx,*) .custom-period button{min-height:44px;border-radius:11px;background:rgba(122,240,196,.16);border-color:var(--fx-mint);color:#c9ffe9} /* 2 실제성과 */ html body:is(#fx,*) #perf .perf-distribution{border-top-color:rgba(255,255,255,.08)} html body:is(#fx,*) #perf .perf-distribution strong{color:#fff} /* 3 원금체력 */ html body:is(#fx,*) .legend{color:#c4d6dd;gap:6px 14px} html body:is(#fx,*) #capital .legend span{padding:4px 10px;border:1px solid #23435a;border-radius:999px;background:rgba(14,34,49,.9)} html body:is(#fx,*) .capital-interpretation{background:rgba(255,255,255,.035);border:1px solid #23435a;border-radius:12px;padding:10px 12px;color:#c4d6dd} /* 4 MDD·회복 */ html body:is(#fx,*) .health-compact-grid{gap:10px} html body:is(#fx,*) .health-compact{background:var(--fx-card2)!important;border:1px solid #22445a!important;border-radius:14px!important;border-left:3px solid rgba(251,113,133,.65)!important} html body:is(#fx,*) .health-compact h3{font-size:16px;font-weight:800} html body:is(#fx,*) .health-assumption,html body:is(#fx,*) .health-dates,html body:is(#fx,*) .health-duration{color:#a3b9c3} html body:is(#fx,*) .health-dates b{color:#e3edf0} html body:is(#fx,*) .health-interpretation{background:rgba(255,255,255,.035);border:1px solid #23435a;border-radius:12px;padding:10px 12px;color:#c4d6dd} /* 5 시장대비 */ html body:is(#fx,*) .market-area{background:var(--fx-card2)!important;border:1px solid #22445a!important;border-radius:14px!important} html body:is(#fx,*) .market-area h3{font-size:16px;font-weight:800} html body:is(#fx,*) .tracking-name{color:#fff;font-weight:600} html body:is(#fx,*) .reference-options{border:0;padding:0;margin:8px 0 0} html body:is(#fx,*) .reference-options legend{color:#c4d6dd;font-size:12.5px;padding:0;margin-bottom:6px} html body:is(#fx,*) .reference-options label{min-height:44px;display:flex;align-items:center;gap:8px;background:rgba(10,28,41,.95);border:1px solid #24475a;border-radius:11px;padding:6px 12px} html body:is(#fx,*) .reference-options label:has(input:checked){border-color:var(--fx-mint);background:rgba(122,240,196,.12)} html body:is(#fx,*) .reference-options input{accent-color:#34d399;width:18px;height:18px} html body:is(#fx,*) .market-summary{border-collapse:separate;border-spacing:0;width:100%;background:rgba(5,15,23,.5);border:1px solid #1d3a4b;border-radius:12px;overflow:hidden} html body:is(#fx,*) .market-summary th,html body:is(#fx,*) .market-summary td{border-bottom:1px solid #1d3a4b;background:transparent} html body:is(#fx,*) .market-summary thead th{background:rgba(122,240,196,.08);color:#c4d6dd} /* 6 팩트 */ html body:is(#fx,*) #facts .facts-summary li{background:var(--fx-card2);border:1px solid #22445a;border-radius:12px;padding:10px 12px} html body:is(#fx,*) #facts .facts-summary li>b{color:var(--fx-mint)} html body:is(#fx,*) #facts .facts-characteristic{border-top:0;margin-top:12px;padding:12px 14px;background:rgba(122,240,196,.06);border:1px solid var(--fx-line);border-radius:12px} html body:is(#fx,*) #facts .facts-characteristic h3{color:var(--fx-mint)} /* term help */ html body:is(#fx,*) .term-help-trigger::after{border-color:rgba(122,240,196,.6);color:#c9ffe9} html body:is(#fx,*) #term-help-panel{background:#0d2333;border-color:#2c5163} html body:is(#fx,*) .term-help-more{color:var(--fx-mint)} html body:is(#fx,*) dialog{background:#0d2333;border:1px solid #2c5163;color:var(--text);border-radius:16px} html body:is(#fx,*) .distribution-history-dialog th{background:#123247} html body:is(#fx,*) .add-cta{background:var(--fx-card);border-color:var(--fx-line);border-radius:16px} /* ---- terms page ---- */ html body:is(#fx,*) .fx-brand{display:flex;align-items:center;gap:10px;max-width:900px;margin:0 auto;padding:14px 18px 2px} html body:is(#fx,*) .fx-brand::before{content:"";width:30px;height:40px;background:url(assets/forest/sprout-mark.webp) center/contain no-repeat;flex:none} html body:is(#fx,*) .fx-brand small{display:block;font-size:11.5px;color:#b6cad3} html body:is(#fx,*) .fx-brand b{display:block;font-size:18px;line-height:1.3} html body.mobile:is(#fx,*) .fx-brand{max-width:440px} html body:is(#fx,*) .terms-content{margin:0 auto;padding:4px 18px 40px} html body.mobile:is(#fx,*) .terms-content{max-width:440px;padding-inline:16px} html body:is(#fx,*) .terms-content .back-link{color:var(--fx-mint)} html body:is(#fx,*) .terms-content h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:10px 0 14px} html body:is(#fx,*) .terms-nav{gap:8px} html body:is(#fx,*) .terms-nav a{min-height:44px;display:inline-flex;align-items:center;padding:6px 14px;background:rgba(14,34,49,.95);border:1px solid #24475a;border-radius:12px;font-size:14px;color:#e3edf0} html body:is(#fx,*) .terms-nav a:hover,html body:is(#fx,*) .terms-nav a:focus-visible{border-color:var(--fx-mint);color:#c9ffe9} html body:is(#fx,*) .terms-content section{position:relative;background:var(--fx-card);border:1px solid var(--fx-line);border-radius:18px;padding:20px 18px;margin-top:16px;scroll-margin-top:70px} html body:is(#fx,*) .terms-content section h2{font-size:22px;font-weight:800;padding-right:56px;min-height:44px;display:flex;align-items:center} html body:is(#fx,*) .terms-content section::after{content:"";position:absolute;right:16px;top:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(122,240,196,.35);background:rgba(122,240,196,.08) var(--fx-ico,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2393c5fd%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 18V12M9 18V8M14 18v-5M19 18V5%22/%3E%3C/svg%3E")) center/22px no-repeat} html body:is(#fx,*) #distribution-yield{--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237af0c4%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6L6 18%22/%3E%3Ccircle cx=%227.5%22 cy=%227.5%22 r=%222.3%22/%3E%3Ccircle cx=%2216.5%22 cy=%2216.5%22 r=%222.3%22/%3E%3C/svg%3E")} html body:is(#fx,*) #nav{--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2393c5fd%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 18V12M9 18V8M14 18v-5M19 18V5%22/%3E%3C/svg%3E")} html body:is(#fx,*) #raw-nav{--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2393c5fd%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 17l5-5 4 3 8-8%22/%3E%3Cpath d=%22M15 7h5v5%22/%3E%3C/svg%3E")} html body:is(#fx,*) #nav-tr{--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237af0c4%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 12a8 8 0 1 1-2.3-5.7%22/%3E%3Cpath d=%22M20 4v5h-5%22/%3E%3C/svg%3E")} html body:is(#fx,*) #reinvestment-effect{--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237af0c4%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21V11%22/%3E%3Cpath d=%22M12 11c0-4 3-6 7-6 0 4-3 6-7 6zM12 13c0-3-2.4-5-6-5 0 3 2.4 5 6 5z%22/%3E%3C/svg%3E")} html body:is(#fx,*) #mdd{--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fb7185%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6l6 6 4-3 8 9%22/%3E%3Cpath d=%22M21 13v5h-5%22/%3E%3C/svg%3E")} html body:is(#fx,*) #recovery-period{--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237af0c4%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22/%3E%3Cpath d=%22M12 7v5l3 2%22/%3E%3C/svg%3E")} html body:is(#fx,*) #tracking-index{--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237af0c4%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%22.8%22/%3E%3C/svg%3E")} html body:is(#fx,*) #reference-market{--fx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237af0c4%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228.5%22/%3E%3Cpath d=%22M3.5 12h17M12 3.5c2.5 2.6 2.5 14.4 0 17M12 3.5c-2.5 2.6-2.5 14.4 0 17%22/%3E%3C/svg%3E")} html body:is(#fx,*) .terms-content .term-detail-copy{font-size:15px;line-height:1.8;color:#dbe7ec;word-break:keep-all;overflow-wrap:anywhere} html body:is(#fx,*) .terms-content section h3{font-size:15px;color:var(--fx-mint);margin-top:18px} html body:is(#fx,*) .terms-content section h3.fx-caution-h{position:relative;margin-top:18px;padding:12px 14px 0 42px;background:rgba(255,255,255,.035);border:1px solid #23435a;border-bottom:0;border-radius:12px 12px 0 0;color:#fff;font-size:14px} html body:is(#fx,*) .terms-content section h3.fx-caution-h::before{content:"";position:absolute;left:14px;top:12px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fcd34d%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1.1 1.3 1.1 2.2h5c0-.9.5-1.7 1.1-2.2A6 6 0 0 0 12 3z%22/%3E%3C/svg%3E") center/contain no-repeat} html body:is(#fx,*) .terms-content section .fx-caution-b{margin-top:0;padding:4px 14px 12px 42px;background:rgba(255,255,255,.035);border:1px solid #23435a;border-top:0;border-radius:0 0 12px 12px;font-size:13.5px;color:#c4d6dd;word-break:keep-all} html body:is(#fx,*) .terms-content section .fx-caution-b+.fx-caution-b{border-radius:0 0 12px 12px} html body:is(#fx,*) .terms-content section h3.fx-caution-h{border-top:1px solid #23435a} /* ---- narrow phones ---- */ @media (max-width:400px){ html body:is(#fx,*) #dist .dist-card{padding:12px 10px 12px 10px!important;min-height:0} html body:is(#fx,*) #dist .dist-card::before{position:static;display:block;width:30px;height:30px;background-size:17px;margin-bottom:6px} html body:is(#fx,*) #dist .dist-card strong,html body.mobile[data-view="detail"]:is(#fx,*) #dist .dist-card strong{font-size:19px} html body:is(#fx,*) .fx-row{grid-template-columns:minmax(0,1fr) 80px} html body:is(#fx,*) .fx-row-main b{font-size:15px} html body:is(#fx,*) .section-tabs :is(button,.analysis-tab),html body.mobile:is(#fx,*) .section-tabs :is(button,.analysis-tab){padding:6px 8px;font-size:12px} } /* ===== v2: menu / information hierarchy ===== */ /* index: one search, list directly below; the logic