/* =========================================================
   DBR CASE ATLAS CSS v2
   Base: DBR UI Foundation v2607
   Scope: existing PHP/JS class names preserved
   ========================================================= */
   :root{--color-primary:#EE7B1A;--color-primary-hover:#D96A0C;--color-primary-active:#C45D07;--color-primary-light:#FFF3E8;--color-text-primary:#1F1F1F;--color-text-secondary:#5F6368;--color-text-tertiary:#8A8F98;--color-text-disabled:#B5B8BD;--color-text-inverse:#FFFFFF;--color-border-default:#E1E3E6;--color-border-strong:#C9CDD2;--color-border-focus:#EE7B1A;--color-bg-page:#FFFFFF;--color-bg-subtle:#F7F8F9;--color-bg-muted:#F1F3F5;--color-bg-selected:#FFF3E8;--color-bg-dark:#1F1F1F;--color-success:#16883A;--color-success-bg:#EBF7EE;--color-warning:#B26A00;--color-warning-bg:#FFF6E5;--color-error:#D93025;--color-error-bg:#FDEEEE;--color-info:#246BCE;--color-info-bg:#EDF4FF;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:999px;--layout-max-width:1200px;--layout-content-width:800px;--layout-atlas-wide:1500px;--layout-atlas-results:1440px;--shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 16px rgba(0,0,0,.10);--shadow-floating:0 18px 60px rgba(31,31,31,.14);--font-family-base:"Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--orange:var(--color-primary);--orange-dark:var(--color-primary-hover);--orange-soft:var(--color-primary-light);--ink:var(--color-text-primary);--sub:var(--color-text-secondary);--muted:var(--color-text-tertiary);--line:var(--color-border-default);--soft:var(--color-bg-subtle);--green:var(--color-success);--shadow:var(--shadow-floating);}
   /* 01. Foundation / Reset */
   [hidden]{display:none!important;}
   *{box-sizing:border-box;}
   html{scroll-behavior:smooth;}
   body{margin:0;color:var(--color-text-primary);background:var(--color-bg-page);font-family:var(--font-family-base);line-height:1.65;word-break:keep-all;-webkit-font-smoothing:antialiased;}
   button, input, textarea, select{font:inherit;}
   button{cursor:pointer;color:inherit;}
   em{font-style:normal;}/* SVG defaults are intentionally limited to UI icons. Map SVG owns its paint rules. */
   .site-header svg,button svg,a svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
   /* 02. Existing Atlas components — consolidated */
   .brand{display:flex;align-items:center;gap:16px;padding:0;border:0;background:none;}
   .brand-home{padding:0;border:0;background:none;}
   .brand b{font:900 46px/.8 Georgia,"Times New Roman",serif;letter-spacing:-3px;}
   .brand i{width:1px;height:28px;background:#ddd;}
   .brand span{color:var(--orange);font-size:20px;font-weight:700;letter-spacing:-.5px;}
   .site-header nav{display:flex;align-items:center;gap:10px;}
   .header-account-link{color:var(--sub);font-size:14px;text-decoration:none;white-space:nowrap;}
   .header-account-link:hover{color:var(--orange);}
   @media(max-width:700px){.header-join-link{display:none;}.site-header nav{gap:8px;}.header-account-link{font-size:13px;}}
   .circle-link{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:9px;color:inherit;text-decoration:none;border:1px solid #e0e0e0;border-radius:50%;background:#fff;}
   .circle-link:hover{color:var(--orange);border-color:#f5b85a;background:#fffaf5;}
   .circle-link svg{width:100%;height:100%;}
   .circle-link span{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;color:#fff;background:var(--orange);border:2px solid #fff;border-radius:10px;font-size:13px;font-weight:800;}
   .page-view{animation:fadeIn .25s ease;}
   @keyframes fadeIn {
     from {
     opacity:.25;
     transform:translateY(5px)
   }
   to {
     opacity:1;
     transform:none
   }
   
   }
   .landing-view,.about-view{width:1000px;margin:0 auto;}
   .landing-hero{padding:56px 36px 44px;text-align:center;}
   .landing-eyebrow,.section-label{margin:0 0 10px;color:var(--orange);font-size:15px;font-weight:600;letter-spacing:1.5px;}
   .landing-hero h1{margin:0;font:400 42px/1.2 Georgia,"Times New Roman",serif;letter-spacing:-1.8px;}
   .landing-hero h1 em{color:var(--orange);}
   .landing-hero>p:last-of-type{margin:18px 0 0;color:var(--sub);font-size:16px;line-height:1.75;}
   .landing-actions{display:flex;justify-content:center;gap:9px;margin-top:28px;}
   .primary,.outline,.reset-button,.back-button,.analysis-link,.compare-reset{border-radius:var(--radius-lg);font-size:15px;font-weight:600;}
   .primary:disabled{opacity:.5;cursor:wait;}
   .landing-stats{display:flex;justify-content:center;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);}
   .landing-stats div{min-width:250px;padding:18px 28px;text-align:center;border-right:.5px solid var(--line);}
   .landing-stats div:last-child{border:0;}
   .landing-stats b{display:block;color:var(--orange);font:600 24px Georgia,serif;}
   .landing-stats span{display:block;margin-top:3px;color:#8a7e74;font-size:13px;}
   .landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:28px 36px 40px;}
   .landing-features article{padding:20px;background:#f0f0f0;border-radius:var(--radius-lg);}
   .feature-icon{display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;color:var(--orange);background:#fff;border-radius:10px;font-size:21px;}
   .landing-features h2{margin:0 0 7px;font-size:16px;}
   .landing-features p{margin:0;color:#81776e;font-size:14px;line-height:1.65;}
   .about-view{padding:40px 32px 70px;}
   .about-section{padding-bottom:40px;margin-bottom:40px;border-bottom:.5px solid var(--line);}
   .about-section>h1,.about-section>h2{margin:0 0 10px;font:400 28px/1.35 Georgia,serif;letter-spacing:-1px;}
   .about-section>p:last-child{max-width:800px;margin:0;color:var(--sub);font-size:16px;line-height:1.75;}
   .good b{color:#085041;background:#9fe1cb;}
   .bad b{color:#791f1f;background:#f7c1c1;}
   .search-heading{min-height:122px;padding-top:35px;text-align:center;}
   .search-heading em{color:var(--orange);}
   .search-main{min-width:0;}
   .tag:hover,.tag.selected{color:var(--orange);background:#fff9f3;border-color:var(--orange);}
   .mode-help{max-width:800px;margin:18px auto 8px;display:flex;align-items:center;gap:9px;}
   .mode-help>span{display:grid;place-items:center;width:22px;height:22px;color:#fff;background:#aaa;border-radius:50%;font-size:13px;font-weight:700;}
   .mode-help p{margin:0;}
   .mode-help b{display:block;font-size:13px;}
   .mode-help small{display:block;margin-top:2px;color:#aaa;font-size:13px;}
   .mode-tabs{max-width:800px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;padding:4px;background:#f1f1f1;border-radius:10px;}
   .mode-tabs button{padding:10px;border:0;border-radius:var(--radius-md);background:none;color:#888;font-size:13px;font-weight:600;}
   .mode-tabs button.active{color:var(--orange);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);}
   .input-panel textarea:focus,.input-panel input:focus{box-shadow:0 0 0 1px var(--orange);}
   .apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
   .apply-grid>h2,.apply-grid>p,.apply-grid label:first-of-type{grid-column:1/-1;}
   .apply-grid label{font-size:13px;font-weight:600;}
   .apply-grid input,.apply-grid textarea{margin-top:7px;}
   .apply-grid textarea{min-height:86px;}
   .reset-button{padding:11px 20px;color:#6d655d;background:#fff;border:1px solid #d9d2ca;}
   .side-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
   .side-title h2{margin:0;font-size:20px;}
   
   .rank-item{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;width:100%;padding:10px 0;border:0;border-bottom:.5px solid var(--line);background:none;text-align:left;}
   .rank-item>b{color:var(--orange);font-size:13px;}
   .rank-item strong{display:block;overflow:hidden;font-size:13px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;}
   .rank-item small{display:block;margin-top:4px;color:#aaa;font-size:13px;}
   .empty{color:#aaa;font-size:13px;line-height:1.7;}
   .results-section{margin-top:72px;padding-top:42px;border-top:1px solid var(--line);}
   .results-head h2 span{color:var(--orange);}
   .apply-banner span b,.apply-banner span small{display:block;}
   .apply-banner span small{margin-top:3px;color:#9a7c66;font-size:13px;}
   .apply-banner em{display:block;margin-top:2px;color:#a46c3c;font-size:13px;}
   .score{color:var(--orange);font-size:13px;font-weight:700;}
   .company{margin:0 0 5px;color:#999;font-size:13px;}
   .reason{display:-webkit-box;overflow:hidden;margin:0;color:#736a62;font-size:13px;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
   .article-meta{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0;}
   .article-meta span{padding:3px 7px;color:#7c7168;background:#f3f3f3;border-radius:10px;font-size:13px;}
   .subscriber-badge{color:#a66a39;font-size:13px;}
   .map-controls button{width:29px;height:29px;border:0;background:#fff;}
   .map-legend i{display:inline-block;width:7px;height:7px;margin-right:3px;border-radius:50%;}
   .map-row{display:grid;grid-template-columns:40px 1fr auto;gap:8px;width:100%;padding:10px 0;text-align:left;background:#fff;border:0;border-top:.5px solid var(--line);}
   .map-row>b,.map-row>span:last-child{color:var(--orange);font-size:13px;}
   .map-row strong{display:block;font-size:13px;}
   .map-row small{color:#aaa;font-size:13px;}
   .compare-bar>div{display:flex;align-items:center;gap:13px;}
   .compare-bar span{color:#bbb;font-size:13px;}
   .compare-bar strong{color:#fff;}
   .compare-reset{padding:8px 12px;color:#fff;background:none;border:0;}
   .compare-bar .primary{padding:9px 16px;}
   .modal,.drawer{padding:0;border:0;border-radius:16px;box-shadow:var(--shadow);}
   dialog::backdrop{background:#211a1599;}
   .modal{width:min(720px,calc(100% - 30px));max-height:88vh;}
   .medium-modal{width:min(620px,calc(100% - 30px));}
   .wide-modal{width:min(1180px,92%);max-height:86vh;}
   .close{position:absolute;z-index:5;top:15px;right:17px;width:34px;height:34px;padding:0;border:0;background:#f2efec;border-radius:50%;font-size:22px;}
   .dialog-body{padding:34px 38px;}
   .dialog-body h1{margin:6px 45px 8px 0;font:400 26px/1.35 Georgia,serif;}
   .dialog-body h2{margin:25px 0 8px;font-size:14px;}
   .dialog-body p{color:#625b54;font-size:13px;line-height:1.7;}
   .detail-section{padding:17px 0;border-top:.5px solid var(--line);}
   .detail-section h3{margin:0 0 7px;font-size:13px;}
   .strategy-box{margin-top:12px;padding:14px;background:#fff8f1;border:1px solid #f4d0b0;border-radius:9px;}
   .strategy-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
   .strategy-section{padding:13px;background:#fff;border-radius:7px;}
   .strategy-section h3{margin:0 0 7px;color:var(--orange);font-size:13px;}
   .strategy-section ul,.strategy-section ol{margin:0;padding-left:17px;font-size:13px;line-height:1.65;}
   .strategy-form .primary{float:right;margin-top:10px;}
   .strategy-results{clear:both;padding-top:18px;}
   .strategy-article{padding:16px;margin-top:12px;border:.5px solid var(--line);border-radius:9px;}
   .compare-table-wrap{overflow:auto;margin:0 -38px;}
   .compare-table th,.compare-table td{padding:13px 15px;vertical-align:top;border:.5px solid var(--line);font-size:13px;line-height:1.55;}
   .compare-table thead th{background:#fafafa;}
   .compare-table th:first-child{width:125px;background:#f3f3f3;}
   .compare-table .strategy-box{font-size:13px;}
   .library-view{width:1000px;margin:0 auto;padding:42px 32px 80px;}
   .library-page-head{display:flex;align-items:end;justify-content:space-between;padding-bottom:18px;border-bottom:.5px solid var(--line);}
   .library-page-head h1{margin:0;font:400 30px Georgia,serif;}
   .back-button{padding:9px 15px;color:#6f675f;background:#fff;border:1px solid #ddd5ce;}
   .library-group{margin:14px 0;border:.5px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
   .library-group>h3{margin:0;padding:17px 18px 3px;font-size:14px;}
   .library-group>small{display:block;padding:0 18px 14px;color:#aaa;font-size:13px;}
   .library-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 18px;border-top:.5px solid var(--line);}
   .library-item h4{margin:0 0 4px;font-size:13px;}
   .library-item p{margin:0;color:#877c72;font-size:13px;line-height:1.55;}
   .library-item .outline,.library-item .back-button{padding:7px 11px;font-size:13px;}
   .empty-state{padding:80px 20px;text-align:center;color:#aaa;}
   .empty-state b{display:block;margin-bottom:8px;color:#555;font-size:16px;}
   .loading-overlay{position:fixed;z-index:100;inset:0;display:grid;place-items:center;background:#19130fbb;backdrop-filter:blur(4px);}
   .loading-card{width:min(420px,calc(100% - 30px));padding:42px;text-align:center;background:#fff;border-radius:18px;box-shadow:var(--shadow);}
   .loading-card h2{margin:8px 0;font-size:21px;}
   .loading-card>p:not(.section-label){color:#777;font-size:13px;}
   .atlas-loader{height:54px;display:flex;align-items:center;justify-content:center;gap:7px;}
   .atlas-loader i{width:10px;height:10px;background:var(--orange);border-radius:50%;animation:bounce 1.1s infinite;}
   .atlas-loader i:nth-child(2){animation-delay:.15s;}
   .atlas-loader i:nth-child(3){animation-delay:.3s;}
   @keyframes bounce {
     0%,70%,100% {
     transform:translateY(0);
     opacity:.4
   }
   35% {
     transform:translateY(-13px);
     opacity:1
   }
   
   }
   .progress{height:6px;margin:22px 0 8px;overflow:hidden;background:#eeeae6;border-radius:var(--radius-sm);}
   .progress i{display:block;width:10%;height:100%;background:var(--orange);transition:width .5s;}
   .loading-card>b{color:var(--orange);font-size:13px;}
   .toast{position:fixed;z-index:120;left:50%;bottom:24px;transform:translateX(-50%);padding:11px 17px;color:#fff;background:#26221f;border-radius:var(--radius-md);box-shadow:0 8px 22px #0004;font-size:13px;}
   @media(max-width:1250px) {
     .header-inner {
     width:calc(100% - 64px)
   }
   .top-search-layout {
     grid-template-columns:minmax(600px,1fr) 420px
   }
   .results-shell {
     grid-template-columns:390px minmax(560px,1fr)
   }
   
   }
   @media(max-width:1000px) {
     .landing-view,.about-view,.library-view {
     width:100%
   }
   .top-search-layout {
     width:min(800px,calc(100% - 40px));
     grid-template-columns:1fr
   }
   .popular-panel {
     position:static;
     grid-template-columns:1fr 1px 1fr
   }
   .results-shell {
     width:min(800px,calc(100% - 40px));
     grid-template-columns:1fr
   }
   .results-column {
     max-width:none
   }
   .map-card {
     width:100%
   }
   
   }
   @media(max-width:700px) {
     .header-inner {
     width:calc(100% - 28px)
   }
   .brand b {
     font-size:34px
   }
   .brand span {
     font-size:16px
   }
   .brand i {
     height:22px
   }
   .landing-hero {
     padding:42px 20px 32px
   }
   .landing-hero h1 {
     font-size:36px
   }
   .landing-stats {
     display:grid;
     grid-template-columns:1fr
   }
   .landing-stats div {
     border-right:0;
     border-bottom:.5px solid var(--line)
   }.landing-features{
     grid-template-columns:1fr
   }
   .landing-features {
     padding:20px
   }
   .about-view,.library-view {
     padding:32px 20px
   }
   .search-heading p {
     font-size:28px
   }
   .top-search-layout,.results-shell {
     width:calc(100% - 28px)
   }
   .filter-wrapper,.input-panel {
     padding:18px
   }
   .popular-panel {
     grid-template-columns:1fr
   }
   .popular-panel>i {
     display:none
   }
   .apply-grid {
     grid-template-columns:1fr
   }
   .apply-grid>* {
     grid-column:1!important
   }
   .results-head {
     align-items:flex-start;
     gap:8px;
     flex-direction:column
   }
   .apply-banner {
     align-items:flex-start;
     gap:10px;
     flex-direction:column
   }
   .map-stage {
     height:430px
   }
   .strategy-grid {
     grid-template-columns:1fr
   }
   .dialog-body {
     padding:28px 20px
   }
   .compare-table-wrap {
     margin:0 -20px
   }
   .drawer {
     width:100%;
     border-radius:0
   }
   .library-page-head {
     align-items:flex-start;
     gap:18px;
     flex-direction:column
   }
   .compare-bar {
     bottom:10px
   }
   
   }
   /* 원본 데모의 탐색 필터 규격 */
   .search-heading p{margin:0;font:400 34px/1.45 Georgia,"Times New Roman",serif;letter-spacing:-1.5px;font-family:var(--font-family-base);font-weight:700;}
   .search-heading #rotatingLead{display:inline-block;min-width:250px;text-align:right;font-weight:850;line-height:1.18;letter-spacing:-.045em;vertical-align:baseline;will-change:transform,opacity;animation:heroKeywordSlide 2.3s ease-in-out both;}
   @keyframes heroKeywordSlide {
     0% {
     opacity:0;
     transform:translateY(18px)
   }
   16% {
     opacity:1;
     transform:translateY(0)
   }
   82% {
     opacity:1;
     transform:translateY(0)
   }
   100% {
     opacity:0;
     transform:translateY(-16px)
   }
   
   }
   @media(prefers-reduced-motion:reduce) {
     .search-heading #rotatingLead {
     animation:none
   }
   
   }
   @media(max-width:700px) {
     .search-heading #rotatingLead {
     min-width:255px
   }
   
   }
   .input-example #inputExample{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;animation:fadeInOut 4s ease-in-out;}
   @keyframes fadeInOut {
     0% {
     opacity:0
   }
   15% {
     opacity:1
   }
   85% {
     opacity:1
   }
   100% {
     opacity:0
   }
   
   }
   @media(prefers-reduced-motion:reduce) {
     .input-example #inputExample {
     animation:none
   }
   
   }
   .filter-wrapper{max-width:800px;margin:0 auto 1.5rem;padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.02);}
   .filter-section{padding-bottom:16px;margin-bottom:16px;border-bottom:1px dashed #f0f0f0;}
   
   .filter-label{margin:0 0 10px;color:#666;font-size:15px;font-weight:600;}
   .tag-list{display:flex;flex-wrap:wrap;gap:8px;}
   .tag:hover{color:#666;background:#fff;border-color:var(--orange);}
   .tag.selected{color:#fff;background:var(--orange);border-color:var(--orange);font-weight:600;box-shadow:0 2px 6px rgba(232,111,0,.2);}
   .tag.none{color:#888;background:#f9f9f9;border:1px dashed #d0d0d0;}
   .tag.none.selected{color:#fff;background:#666;border:1px solid #666;box-shadow:0 2px 6px rgba(0,0,0,.15);}
   .map-card{overflow:visible;border:0;border-radius:0;background:#fff;padding:.5rem 0;}
   .map-card>header{display:flex;align-items:center;justify-content:space-between;padding:0;border-bottom:.5px solid var(--line);margin-bottom:1rem;border:0;}
   .map-card header p{margin:0 0 2px;color:#999;font-size:15px;letter-spacing:.1em;}
   .map-title-row{display:flex;align-items:center;gap:14px;}
   .map-card header h2{margin:0;font-size:25px;font-weight:600;}
   .map-tabs{display:flex;padding:4px;background:var(--color-bg-subtle);border-radius:var(--radius-full);gap:4px;border:1px solid #e0e0e0;}
   .map-tabs button{padding:7px 14px;border:0;border-radius:var(--radius-full);background:none;color:#666;font-size:13px;font-weight:700;}
   .map-tabs button.active{color:#fff;background:#111827;box-shadow:0 2px 7px rgba(0,0,0,.14);}
   .map-stage{position:relative;height:700px;overflow:hidden;background-color:#fcfbfa;background-image:none;background-size:18px 18px;margin-bottom:1rem;background:#fafafa;border:.5px solid #e0e0e0;border-radius:2px;}
   .map-status{position:absolute;top:10px;left:16px;right:70px;color:#777;font-size:13px;line-height:1.6;pointer-events:none;}
   .map-status button{margin-left:8px;padding:2px 8px;border:1px solid #ddd;border-radius:var(--radius-sm);background:#fff;color:var(--color-primary);pointer-events:auto;}
   .map-stage g[data-map-detail] rect{stroke:none;}
   .map-legend{position:absolute;left:12px;bottom:auto;display:flex;gap:7px;flex-wrap:wrap;padding:8px 12px;background:#fffffff0;border-radius:var(--radius-full);font-size:13px;top:14px;border:1px solid #e5e7eb;}
   .map-controls{position:absolute;top:auto;right:14px;display:flex;align-items:center;padding:3px;background:#fff;border:1px solid #ddd;border-radius:7px;box-shadow:0 3px 12px #0001;bottom:14px;flex-direction:column;gap:4px;}
   .map-controls span{min-width:44px;color:#888;text-align:center;font-size:13px;padding:5px 0;}
   /* 원본 React SearchPage / CaseMap의 결과·상호작용 규격 */
   .input-panel{max-width:848px;margin:10px auto 0;padding:18px;border:0;border-radius:var(--radius-lg);background:#f0f0f0;}
   .input-panel>h2{margin:0 0 4px;font-size:16px;}
   .input-panel>p{margin:0 0 14px;color:#888;font-size:13px;}
   .input-panel textarea,.input-panel input{width:100%;padding:14px 16px;border:0;border-radius:var(--radius-lg);background:var(--color-bg-subtle);outline:none;font-size:16px;line-height:1.6;resize:none;}
   #query{min-height:110px;max-height:180px;}
   .input-example{display:flex;align-items:center;gap:12px;margin:10px -18px -18px;padding:9px 14px 11px;background:#fff;}
   .input-example b{color:#999;font-size:13px;}
   .input-example span{color:var(--color-primary);font-size:13px;}
   .search-submit{max-width:848px;margin:14px auto 0;display:flex;justify-content:flex-end;gap:8px;margin-top:12px;}
   .search-status{max-width:800px;margin:8px auto 0;color:#aaa;text-align:right;font-size:13px;display:none;}
   #popularCases .rank-item{padding:10px 8px;margin-bottom:8px;background:#fff;border:1px solid #f0f0f0;border-radius:var(--radius-md);}
   #popularCases .rank-item strong{font-size:13.5px;font-weight:700;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
   #popularQueries .rank-item>b{color:#e0e0e0;}
   #popularQueries .rank-item:hover>b{color:var(--orange);}
   .results-shell{width:min(1600px,calc(100vw - 96px));margin:0 auto;display:grid;grid-template-columns:420px minmax(620px,1fr);gap:16px;align-items:start;}
   .results-column{padding-right:16px;border-right:1px solid #e0e0e0;}
   .results-head{display:flex;align-items:end;justify-content:space-between;padding:1rem 1.25rem 0;}
   .results-head h2{margin:0;font:400 27px Georgia,serif;font-family:inherit;font-size:21px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
   .results-head .section-label{font-size:13px;display:none;}
   .analysis-link{padding:6px 12px;color:var(--orange);background:var(--color-primary-light);border:0;font-size:13px;display:flex;align-items:center;gap:6px;border-radius:20px;font-weight:600;}
   .apply-banner span small,.apply-banner strong em{display:none;}
   .apply-banner span b{font-size:14px;}
   .apply-banner strong{color:var(--orange);font-size:0;}
   .apply-banner strong::after{content:"→";font-size:16px;color:#fff;margin-left:8px;}
   .result-status{padding:12px 14px;color:#666;background:var(--color-primary-light);font-size:13px;line-height:1.55;margin:0 1.25rem 12px;border:1px solid #f3d8c7;border-left:3px solid var(--orange);border-radius:6px;}
   .result-status b{display:block;color:var(--color-primary-active);font-size:14px;margin-bottom:4px;}
   .case-list{border-top:.5px solid var(--line);padding:0 1.25rem;border:0;}
   .case-card{position:relative;display:flex;grid-template-columns:34px 1fr;padding:14px 12px;border-bottom:1px solid #f0f0f0;transition:.15s;align-items:flex-start;gap:14px;background:#fff;border:1px solid transparent;border-radius:2px;cursor:pointer;}
   .case-card.viewing{background:#fff9f5;border:2px solid var(--orange);}
   .case-card.comparing{background:var(--color-primary-light);}
   .case-rank{padding-top:1px;color:var(--color-primary);font:700 22px/1 inherit;display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;padding:0;}
   .case-card-main{flex:1;min-width:0;}
   .case-card h3{margin:5px 0 3px;font-size:15px;line-height:1.5;}
   .case-card .company{margin:0;color:#999;font-size:13px;}
   .icon-bookmark{flex:0 0 26px;width:26px;height:28px;padding:4px;color:var(--color-primary);background:none;border:0;}
   .icon-bookmark svg{width:18px;height:18px;}
   .icon-bookmark.active svg{fill:var(--color-primary);}
   .case-add{flex:0 0 auto;padding:4px 8px;color:#fff;background:var(--color-primary);border:0;border-radius:2px;font-size:13px;font-weight:600;}
   .case-add.selected{background:var(--color-text-primary);}
   .map-tooltip b,.map-tooltip strong,.map-tooltip span,.map-tooltip em{display:block;}
   .map-tooltip b{margin-bottom:4px;color:var(--color-primary);font-size:13px;}
   .map-tooltip strong{margin-bottom:3px;font-size:13px;line-height:1.4;}
   .map-tooltip span{color:#888;font-size:13px;line-height:1.5;}
   .map-tooltip em{margin-top:4px;color:var(--color-primary);font-size:13px;font-style:normal;font-weight:700;}
   .zoom-hint{position:absolute;left:14px;bottom:12px;color:#aaa;font-size:13px;pointer-events:none;}
   .top-search-layout{width:min(1600px,calc(100vw - 96px));margin:0 auto;display:grid;grid-template-columns:minmax(840px,1fr) 560px;gap:24px;align-items:start;}
   .mode-control-row{max-width:824px;margin:0 auto;display:flex;align-items:center;gap:12px;}
   .mode-control-row .mode-tabs{flex:1;max-width:none;margin:0;}
   .apply-banner{width:calc(100% - 2.5rem);margin:0 1.25rem 12px;padding:13px 15px;display:flex;align-items:center;justify-content:center;text-align:left;background:var(--orange);border:1px solid #f6c89e;border-radius:6px;min-height:44px;color:#fff;border-color:var(--orange);box-shadow:0 8px 18px rgba(232,111,0,.18);gap:8px;}
   .apply-banner>b{font-size:14px;}
   .apply-banner>i{color:#fff;font-size:16px;font-style:normal;font-weight:900;}
   .apply-banner>span,.apply-banner>strong{display:none;}
   .case-card:focus{outline:none;border:2px solid var(--orange);background:linear-gradient(135deg,#fff 60%,var(--color-primary-light) 100%);}
   /* 원본 React CasePanel 우측 상세 패널 */
   .drawer{width:420px;height:calc(100vh - 72px);max-height:none;margin:0;border-radius:0;position:fixed;z-index:200;top:72px;right:0;left:auto;padding:0;background:#fff;border:0;border-left:1px solid #e0e0e0;box-shadow:-4px 0 20px rgba(0,0,0,.08);overflow:hidden;overscroll-behavior:contain;}
   .drawer:focus{outline:none;}
   .case-panel{position:absolute;inset:0;height:auto;min-height:0;padding:2rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;box-sizing:border-box;}
   .panel-bookmark,.panel-close{display:flex;align-items:center;justify-content:center;padding:4px;background:none;border:0;}
   .panel-bookmark:focus,.panel-close:focus{outline:none;}
   .panel-bookmark{width:30px;height:30px;color:var(--color-primary);}
   .panel-bookmark svg{width:22px;height:22px;}
   .panel-bookmark.active svg{fill:var(--color-primary);}
   .panel-close{width:28px;height:30px;color:#ccc;font-size:25px;font-weight:300;}
   .case-panel-company{min-height:20px;margin:0 0 16px;color:#666;font-size:15px;}
   .case-panel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:12px;color:var(--color-primary);font-size:14px;font-weight:600;}
   .case-panel-meta i{font-style:normal;}
   .panel-compare{width:100%;padding:12px;margin-bottom:14px;color:#fff;background:var(--color-primary);border:0;border-radius:var(--radius-lg);font-size:14px;font-weight:600;}
   .panel-compare:hover{background:var(--color-primary-active);}
   .panel-compare.selected{background:var(--color-text-primary);}
   .case-panel-sections{flex:1;}.panel-white,.panel-strategy{padding:14px 15px;margin-bottom:14px;border-radius:6px;}
   .panel-white{background:#fff;border:1px solid #eee;}.panel-white h4,.panel-strategy h4{margin:0 0 8px;font-size:13px;font-weight:900;}
   .panel-white h4{color:#333;}.panel-white p{margin:0;color:#555;font-size:14px;line-height:1.7;word-break:keep-all;}
   .panel-strategy{background:#fff;border:1px solid #d9e7dc;border-left:3px solid #4a8f57;}
   .panel-strategy>div{display:flex;align-items:center;justify-content:space-between;}
   .panel-strategy h4{color:#2f6f3a;}
   .panel-strategy>div span{padding:3px 7px;color:#2f6f3a;background:#eef7ef;border-radius:var(--radius-full);font-size:13px;font-weight:800;}
   .panel-strategy p{margin:0 0 11px;color:#666;font-size:13px;line-height:1.6;}
   .panel-strategy button{width:100%;padding:10px 12px;color:#2f6f3a;background:#f4faf4;border:1px solid #cfe4d2;border-radius:var(--radius-sm);font-size:13px;font-weight:800;}
   @media(max-width:700px) {
     .drawer {
     top:72px;
     width:100%;
     height:calc(100vh - 72px)
   }
   .case-panel {
     padding:1.4rem
   }
   
   }
   /* 기능 보완용 최소 스타일. 상세 레이아웃 퍼블리싱은 별도 작업한다. */
   .access-badge{display:inline-block;padding:3px 7px;border-radius:10px;background:var(--color-primary-light);color:#b95000;font-size:13px;font-weight:400;}
   #analysisDialog{position:fixed;inset:auto;margin:0;width:min(390px,calc(100vw - 16px));max-height:65vh;box-shadow:0 5px 24px #0002;border:1px solid #ddd;}
   #analysisDialog .dialog-body{padding:24px;}
   #analysisDialog h1{font-size:19px;}
   .concern-history-field{position:relative;}
   .concern-history-field #query{display:block;}
   .concern-history-field .service-history-list{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;max-height:224px;overflow-y:auto;padding:5px;background:#fff;border:1px solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:0 6px 18px rgba(70,50,30,.09);}
   .service-history-list button{display:flex;align-items:center;gap:16px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid #f0ece8;border-radius:var(--radius-sm);background:#fff;color:#655d56;text-align:left;font-family:inherit;font-size:13px;line-height:1.6;}
   .service-history-list button:last-child{border-bottom:0;}
   .service-history-list button span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
   .service-history-list time{flex-shrink:0;color:#a3988e;font-size:13px;font-variant-numeric:tabular-nums;}
   .service-history-list button:hover,.service-history-list button:focus-visible{background:#fff5ec;color:var(--color-primary-active);}
   .service-history-list button:focus-visible{outline:1px solid var(--orange);outline-offset:-1px;}
   .service-history-list>p{margin:0;padding:12px;color:#958a80;font-size:13px;}
   @media(max-width:700px) {
     .concern-history-field .service-history-list {
     display:none
   }
   
   }
   .map-tooltip{position:absolute;z-index:30;max-width:min(320px,calc(100% - 16px));padding:9px 12px;background:#fff;border:.5px solid #e0e0e0;border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(0,0,0,.08);pointer-events:auto;max-height:calc(100% - 16px);overflow:auto;}
   .map-tooltip button{display:block;width:100%;margin-top:10px;padding:8px;border:0;border-radius:5px;color:#fff;background:var(--color-primary);}
   .compare-bar{position:fixed;z-index:55;left:50%;bottom:20px;transform:translateX(-50%);width:min(700px,calc(100% - 32px));padding:12px 14px 12px 20px;display:flex;align-items:center;justify-content:space-between;color:#fff;background:#292522;border-radius:var(--radius-lg);box-shadow:0 14px 38px #0005;flex-wrap:wrap;}
   .compare-bar #compareSelection{flex-basis:100%;width:100%;display:block;max-height:220px;overflow:auto;}
   .compare-bar #compareSelection[hidden]{display:none;}
   .compare-bar #compareSelection>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #eee;}
   .compare-bar #compareSelection button{border:0;background:none;font-size:20px;}
   .compare-table{width:100%;min-width:620px;border-collapse:collapse;table-layout:fixed;}
   .compare-table td{overflow-wrap:anywhere;}
   .history-tabs{display:flex;gap:20px;padding:12px 0;border-bottom:1px solid #ddd;}
   .history-tabs a[aria-current]{color:var(--color-primary);font-weight:bold;}
   .strategy-form label{display:block;margin:12px 0;font-size:13px;}
   .strategy-form input{width:100%;padding:12px;border:1px solid #ddd;border-radius:var(--radius-md);}
   .strategy-form textarea{width:100%;min-height:110px;padding:13px;border:1px solid #ddd5ce;border-radius:var(--radius-md);resize:vertical;display:block;margin-top:6px;}
   .strategy-form .back-button{margin-top:10px;}
   .strategy-results .result-status p{white-space:normal;}
   .popular-panel{position:sticky;top:96px;display:grid;grid-template-columns:1fr;gap:22px;padding:16px 0;}
   .popular-panel>i{width:1px;height:100%;background:var(--line);display:none;}
   @media(max-width:700px) {
     .popular-panel {
     display:none
   }
   .service-history {
     display:none
   }
   .compare-bar {
     width:calc(100% - 20px);
     gap:10px
   }
   .compare-bar>div {
     flex-wrap:wrap
   }
   .compare-reset {
     display:none
   }
   .library-item {
     flex-wrap:wrap
   }
   .input-example {
     align-items:flex-start
   }
   .input-example b {
     flex-shrink:0
   }
   
   }
   
   /* 03. DBR Foundation alignment layer */
   .site-header{position:sticky;top:0;z-index:50;height:72px;background:rgba(255,255,255,.97);border-bottom:1px solid #f0ece7;backdrop-filter:blur(12px);border-bottom-color:var(--color-border-default);}
   .header-inner{width:min(calc(100% - 64px), var(--layout-atlas-wide));max-width:1500px;height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;}
   .primary, .outline, .reset-button, .back-button, .analysis-link, .compare-reset{min-height:44px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;}
   .primary{padding:11px 24px;color:#fff;background:var(--color-primary);border:1px solid var(--orange);border-color:var(--color-primary);}
   .primary:hover{background:var(--color-primary-hover);}
   .outline{padding:11px 24px;background:var(--color-bg-page);border:1px solid #d8d1ca;color:var(--color-text-primary);border-color:var(--color-border-strong);}
   .outline:hover{border-color:var(--color-primary);color:var(--color-primary);}
   .large{padding:12px 24px;min-height:52px;}.filter-wrapper,.input-panel,.popular-panel,.library-group{border-color:var(--color-border-default);border-radius:var(--radius-md);}
   .filter-label, .section-label, .landing-eyebrow{color:var(--color-primary);}
   .tag{padding:7px 14px;color:var(--color-text-secondary);background:var(--color-bg-page);border:1px solid var(--color-border-default);border-radius:var(--radius-full);font-size:14px;font-weight:500;transition:all .2s;min-height:36px;}
   .tag.active, .tag.selected, .tag[aria-pressed="true"]{color:var(--color-primary-active);background:var(--color-primary-light);border-color:var(--color-primary);font-weight:600;}
   .input-panel textarea,
   .strategy-form textarea,
   .strategy-form input{border-color:var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-primary);background:var(--color-bg-page);font-size:16px;}
   .input-panel textarea:focus,
   .strategy-form textarea:focus,
   .strategy-form input:focus{outline:2px solid rgba(238,123,26,.24);border-color:var(--color-border-focus);}
   /* Cards use border first;
      shadows are reserved for hover/floating layers. */
   .case-card, .map-card, .library-group, .panel-white{border-color:var(--color-border-default);}
   .case-card:hover{background:#fff;box-shadow:var(--shadow-md);transform:none;border-color:#f0f0f0;}
   .modal, .drawer, .compare-bar, .loading-card{box-shadow:var(--shadow-floating);}
   /* Avoid globally painting the data visualization SVG. */
   .map-stage svg{width:100%;height:100%;touch-action:none;stroke:initial;fill:initial;}
   .map-stage text{stroke:none;}
   /* 04. Responsive alignment with DBR Foundation breakpoints */
   @media (max-width: 1023px)  {
   
     .header-inner  {
      width: min(calc(100% - 48px), var(--layout-atlas-wide));
   
   }
   
   
   }
   @media (max-width: 767px)  {
   
     .header-inner  {
      width: calc(100% - 40px);
   
   }
   
   
   }
   @media (max-width: 359px)  {
   
     .header-inner  {
      width: calc(100% - 32px);
   
   }
   
   
   }
   
   /* =========================================================
      05. STEP 2 — Screen-level UI correction
      Landing → Search → Results / Map → Detail Drawer
      This layer intentionally keeps existing PHP/JS hooks intact.
      ========================================================= */
   
   /* ---------- A. Landing ---------- */
   .landing-view{
     width:min(calc(100% - 64px),var(--layout-max-width));
     margin:0 auto;
   }
   .landing-hero{
     max-width:800px;
     margin:0 auto;
     padding:72px 24px 64px;
   }
   .landing-eyebrow{
     margin-bottom:12px;
     font-size:14px;
     font-weight:700;
     letter-spacing:.04em;
   }
   .landing-hero h1{
     margin:0;
     color:var(--color-text-primary);
     font-family:var(--font-family-base);
     font-size:clamp(42px,5vw,60px);
     font-weight:700;
     line-height:1.18;
     letter-spacing:-.045em;
   }
   .landing-hero h1 em{color:var(--color-primary);}
   .landing-hero>p:last-of-type{
     margin-top:20px;
     color:var(--color-text-secondary);
     font-size:17px;
     line-height:1.65;
   }
   .landing-actions{gap:12px;margin-top:32px;}
   .landing-stats{
     display:grid;
     grid-template-columns:repeat(4,minmax(0,1fr));
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-lg);
     overflow:hidden;
     background:var(--color-bg-page);
   }
   .landing-stats div{
     min-width:0;
     padding:24px 20px;
     border-right:1px solid var(--color-border-default);
     text-align:center;
   }
   .landing-stats b{
     color:var(--color-text-primary);
     font-family:var(--font-family-base);
     font-size:21px;
     font-weight:700;
     line-height:1.4;
   }
   .landing-stats span{
     margin-top:6px;
     color:var(--color-text-tertiary);
     font-size:13px;
     line-height:1.5;
   }
   .landing-features{
     gap:16px;
     padding:24px 0 80px;
   }
   .landing-features article{
     min-height:180px;
     padding:24px;
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
   }
   .feature-icon{
     width:40px;
     height:40px;
     margin-bottom:20px;
     color:var(--color-primary-active);
     background:var(--color-primary-light);
     border-radius:var(--radius-md);
     font-size:20px;
   }
   .landing-features h2{
     margin:0 0 8px;
     font-size:18px;
     line-height:1.45;
   }
   .landing-features p{
     color:var(--color-text-secondary);
     font-size:15px;
     line-height:1.6;
   }
   
   /* ---------- B. Search ---------- */
   .search-heading{
     min-height:auto;
     padding:64px 24px 40px;
   }
   .search-heading p{
     margin:0;
     color:var(--color-text-primary);
     font-family:var(--font-family-base);
     font-size:clamp(30px,3vw,40px);
     font-weight:700;
     line-height:1.35;
     letter-spacing:-.035em;
   }
   .search-heading #rotatingLead{
     min-width:300px;
     text-align:right;
     font-weight:700;
   }
   .top-search-layout{
     width:min(calc(100% - 64px),var(--layout-max-width));
     margin:0 auto;
     display:grid;
     grid-template-columns:minmax(0,800px) minmax(260px,1fr);
     gap:48px;
     align-items:start;
   }
   .search-main{width:100%;}
   .filter-wrapper{
     width:100%;
     max-width:none;
     margin:0 0 24px;
     padding:24px;
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-lg);
     box-shadow:none;
   }
   .filter-section{
     padding-bottom:20px;
     margin-bottom:20px;
     border-bottom:1px solid var(--color-border-default);
   }
   .filter-section.last{padding-bottom:0;margin-bottom:0;border-bottom:0;}
   .filter-label{
     margin-bottom:12px;
     color:var(--color-text-primary);
     font-size:14px;
     font-weight:700;
   }
   .tag-list{gap:8px;}
   .tag:hover{
     color:var(--color-primary-active);
     background:var(--color-primary-light);
     border-color:var(--color-primary);
   }
   .tag.selected,.tag.active,.tag[aria-pressed="true"]{
     color:var(--color-primary-active);
     background:var(--color-primary-light);
     border-color:var(--color-primary);
     box-shadow:none;
   }
   .tag.none{color:var(--color-text-tertiary);background:var(--color-bg-subtle);border:1px dashed var(--color-border-strong);}
   .tag.none.selected{color:var(--color-text-primary);background:var(--color-bg-muted);border-color:var(--color-border-strong);box-shadow:none;}
   .mode-control-row{
     width:100%;
     max-width:none;
     margin:0 0 12px;
   }
   .mode-tabs{
     width:100%;
     max-width:none;
     min-height:48px;
     padding:4px;
     background:var(--color-bg-muted);
     border-radius:var(--radius-md);
   }
   .mode-tabs button{
     min-height:40px;
     padding:0 16px;
     color:var(--color-text-secondary);
     border-radius:var(--radius-sm);
     font-size:14px;
     font-weight:600;
   }
   .mode-tabs button.active{
     color:var(--color-text-primary);
     background:var(--color-bg-page);
     box-shadow:var(--shadow-sm);
   }
   .input-panel{
     width:100%;
     max-width:none;
     margin:0;
     padding:24px;
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-lg);
   }
   .input-panel>h2{
     margin:0 0 6px;
     font-size:21px;
     line-height:1.4;
   }
   .input-panel>p{
     margin:0 0 20px;
     color:var(--color-text-secondary);
     font-size:15px;
     line-height:1.6;
   }
   .input-panel textarea,.input-panel input{
     min-height:48px;
     padding:14px 16px;
     color:var(--color-text-primary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
     font-size:16px;
     line-height:1.6;
   }
   #query{min-height:144px;}
   .input-panel textarea::placeholder,.input-panel input::placeholder{color:var(--color-text-tertiary);}
   .input-example{
     display:flex;
     align-items:flex-start;
     gap:10px;
     margin-top:12px;
     color:var(--color-text-tertiary);
     font-size:13px;
     font-weight:400;
   }
   .input-example b{
     flex:0 0 auto;
     color:var(--color-text-secondary);
     font-weight:600;
   }
   .apply-grid{gap:16px;}
   .apply-grid label{
     color:var(--color-text-primary);
     font-size:14px;
     font-weight:600;
   }
   .apply-grid input,.apply-grid textarea{margin-top:8px;}
   .apply-grid textarea{min-height:112px;}
   .search-submit{
     width:100%;
     max-width:none;
     margin:16px 0 0;
     gap:8px;
   }
   .reset-button{
     min-height:52px;
     padding:0 20px;
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-strong);
   }
   .search-status{
     width:100%;
     max-width:none;
     margin:10px 0 0;
     color:var(--color-text-tertiary);
     font-size:13px;
     text-align:right;
   }
   .popular-panel{
     position:sticky;
     top:96px;
     display:block;
     padding:0;
     background:transparent;
     border:0;
     border-radius:0;
   }
   .popular-panel section{
     padding:0 0 24px;
     margin-bottom:24px;
     border-bottom:1px solid var(--color-border-default);
   }
   .popular-panel section:last-child{margin-bottom:0;border-bottom:0;}
   .side-title{margin-bottom:8px;}
   .side-title h2{font-size:17px;line-height:1.45;}
   .side-title{
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:12px;
   }
   .side-title>span{
     flex:0 0 auto;
     color:var(--color-primary);
     font-size:11px;
     font-weight:700;
     line-height:1;
     letter-spacing:.04em;
   }
   #popularCases .rank-item:hover>b,
   #popularQueries .rank-item:hover>b{
     color:var(--color-primary);
   }
   
   .rank-item{
     grid-template-columns:24px minmax(0,1fr);
     gap:10px;
     padding:12px 0;
     border-bottom:1px solid var(--color-border-default);
   }
   .rank-item:last-child{border-bottom:0;}
   .rank-item>b{color:var(--color-text-tertiary);font-size:13px;font-variant-numeric:tabular-nums;}
   .rank-item strong{
     color:var(--color-text-primary);
     font-size:14px;
     font-weight:600;
     line-height:1.5;
   }
   .rank-item small{margin-top:4px;color:var(--color-text-tertiary);font-size:13px;}
   .service-history-list{
     top:calc(100% + 8px);
     padding:8px;
     border-color:var(--color-border-default);
     border-radius:var(--radius-md);
     box-shadow:var(--shadow-md);
   }
   .service-history-list button{
     gap:12px;
     min-height:44px;
     padding:10px 12px;
     color:var(--color-text-secondary);
     border-bottom:1px solid var(--color-border-default);
     border-radius:var(--radius-sm);
     font-size:13px;
   }
   .service-history-list button:hover{background:var(--color-bg-subtle);}
   .service-history-list time{color:var(--color-text-tertiary);font-size:13px;}
   
   /* ---------- C. Results / Case list ---------- */
   .results-section{
     margin-top:64px;
     padding:48px 0 96px;
     background:var(--color-bg-subtle);
     border-top:1px solid var(--color-border-default);
   }
   .results-shell{
     width:min(calc(100% - 64px),var(--layout-atlas-results));
     margin:0 auto;
     display:grid;
     grid-template-columns:minmax(380px,440px) minmax(0,1fr);
     gap:32px;
     align-items:start;
   }
   .results-column{
     overflow:hidden;
     padding:0;
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-lg);
   }
   .results-head{
     align-items:center;
     padding:24px 24px 0;
   }
   .results-head h2{
     margin:0;
     color:var(--color-text-primary);
     font-family:var(--font-family-base);
     font-size:21px;
     font-weight:700;
     line-height:1.4;
     letter-spacing:-.02em;
     text-transform:none;
   }
   .results-head h2 span{color:var(--color-text-tertiary);font-size:16px;font-weight:600;}
   .analysis-link{
     min-height:36px;
     padding:0 12px;
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-sm);
     font-size:13px;
   }
   .analysis-link:hover{color:var(--color-primary-active);border-color:var(--color-primary);background:var(--color-primary-light);}
   .apply-banner{
     width:calc(100% - 48px);
     min-height:48px;
     margin:16px 24px;
     padding:0 16px;
     justify-content:space-between;
     color:var(--color-text-primary);
     background:var(--color-primary-light);
     border:1px solid #F2C59E;
     border-radius:var(--radius-md);
     box-shadow:none;
   }
   .apply-banner>b{font-size:14px;font-weight:700;}
   .apply-banner>i{color:var(--color-primary-active);font-size:18px;}
   .apply-banner:hover{border-color:var(--color-primary);background:#FFEEE0;}
   .result-status{padding:0 24px 12px;color:var(--color-text-tertiary);font-size:13px;}
   .case-list{padding:0 12px 12px;border:0;}
   .case-card{
     position:relative;
     display:flex;
     gap:14px;
     align-items:flex-start;
     padding:16px 12px;
     background:var(--color-bg-page);
     border:1px solid transparent;
     border-top:1px solid var(--color-border-default);
     border-radius:0;
     box-shadow:none;
   }
   .case-card:first-child{border-top-color:transparent;}
   .case-card:hover{
     background:var(--color-bg-subtle);
     border-color:transparent;
     border-top-color:var(--color-border-default);
     box-shadow:none;
   }
   .case-card.viewing{
     background:var(--color-primary-light);
     border:1px solid #F2C59E;
     border-radius:var(--radius-md);
   }
   
   .case-card:focus-visible{outline:2px solid rgba(238,123,26,.35);outline-offset:2px;}
   .case-card h3{
     margin:4px 0 6px;
     color:var(--color-text-primary);
     font-size:16px;
     font-weight:700;
     line-height:1.5;
   }
   .case-card .company,.company{color:var(--color-text-tertiary);font-size:13px;}
   .score{color:var(--color-primary-active);font-size:13px;}
   .reason{color:var(--color-text-secondary);font-size:14px;line-height:1.6;}
   .article-meta{gap:6px;margin:10px 0 0;}
   .article-meta span{
     padding:3px 8px;
     color:var(--color-text-secondary);
     background:var(--color-bg-muted);
     border-radius:var(--radius-full);
     font-size:12px;
   }
   
   /* ---------- D. Map ---------- */
   .map-card{
     overflow:visible;
     padding:24px;
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-lg);
   }
   .map-card>header{
     display:block;
     margin:0 0 20px;
     padding:0;
     border:0;
   }
   .map-card header p{
     margin:0 0 4px;
     color:var(--color-text-tertiary);
     font-size:13px;
     font-weight:600;
     letter-spacing:.06em;
     text-transform:uppercase;
   }
   .map-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;}
   .map-card header h2{
     margin:0;
     color:var(--color-text-primary);
     font-size:24px;
     font-weight:700;
     line-height:1.4;
   }
   .map-tabs{
     flex:0 0 auto;
     padding:4px;
     gap:2px;
     background:var(--color-bg-muted);
     border:0;
     border-radius:var(--radius-md);
   }
   .map-tabs button{
     min-height:36px;
     padding:0 14px;
     color:var(--color-text-secondary);
     border-radius:var(--radius-sm);
     font-size:13px;
     font-weight:600;
   }
   .map-tabs button.active{
     color:var(--color-text-primary);
     background:var(--color-bg-page);
     box-shadow:var(--shadow-sm);
   }
   .map-stage{
     height:680px;
     margin-bottom:12px;
     overflow:hidden;
     background:var(--color-bg-subtle);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
   }
   .map-controls{
     overflow:hidden;
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
     box-shadow:var(--shadow-sm);
   }
   .map-controls button{
     width:36px;
     height:36px;
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:0;
     border-bottom:1px solid var(--color-border-default);
   }
   .map-controls button:last-child{border-bottom:0;}
   .map-controls button:hover{color:var(--color-primary-active);background:var(--color-primary-light);}
   .map-controls span{color:var(--color-text-secondary);background:var(--color-bg-page);font-size:12px;}
   .zoom-hint{color:var(--color-text-tertiary);font-size:12px;}
   
   /* ---------- E. Detail drawer ---------- */
   .drawer{
     top:72px;
     width:min(480px,100%);
     height:calc(100vh - 72px);
     background:var(--color-bg-page);
     border-left:1px solid var(--color-border-default);
     box-shadow:-8px 0 28px rgba(31,31,31,.10);
   }
   .case-panel{padding:28px;}
   .panel-bookmark,.panel-close{
     width:36px;
     height:36px;
     padding:7px;
     border-radius:var(--radius-sm);
   }
   .panel-bookmark:hover,.panel-close:hover{background:var(--color-bg-subtle);}
   .panel-close{color:var(--color-text-secondary);font-size:23px;}
   .case-panel-company{margin-bottom:12px;color:var(--color-text-tertiary);font-size:14px;}
   .case-panel-meta{gap:6px;margin-bottom:20px;color:var(--color-text-secondary);font-size:13px;font-weight:500;}
   .panel-compare{
     min-height:44px;
     margin-bottom:20px;
     padding:0 16px;
     border-radius:var(--radius-sm);
     font-size:14px;
   }.panel-white,.panel-strategy{
     padding:18px;
     margin-bottom:12px;
     border-radius:var(--radius-md);
   }
   .panel-white{background:var(--color-bg-page);border:1px solid var(--color-border-default);}
   .panel-strategy{background:var(--color-success-bg);border:1px solid #CFE6D5;border-left:3px solid var(--color-success);}.panel-white h4,.panel-strategy h4{
     margin:0 0 8px;
     font-size:14px;
     font-weight:700;
     line-height:1.45;
   }.panel-white p,.panel-strategy p{
     color:var(--color-text-secondary);
     font-size:14px;
     line-height:1.7;
   }
   .panel-strategy h4,.panel-strategy>div span{color:var(--color-success);}
   .panel-strategy>div span{background:#fff;font-size:12px;font-weight:600;}
   .panel-strategy button{
     min-height:40px;
     color:var(--color-success);
     background:#fff;
     border:1px solid #BFDCC6;
     border-radius:var(--radius-sm);
     font-size:13px;
     font-weight:600;
   }
   
   /* ---------- F. Compare / floating ---------- */
   .compare-bar{
     width:min(760px,calc(100% - 40px));
     padding:12px 14px 12px 20px;
     color:var(--color-text-inverse);
     background:var(--color-bg-dark);
     border-radius:var(--radius-lg);
     box-shadow:var(--shadow-floating);
   }
   .compare-bar .back-button{
     min-height:36px;
     padding:0 12px;
     color:#fff;
     background:transparent;
     border-color:#555;
   }
   .compare-bar .primary{min-height:40px;padding:0 16px;}
   .access-badge{background:#3A3A3A;color:#E5E5E5;font-size:12px;}
   
   /* ---------- Responsive: Step 2 ---------- */
   @media (max-width:1250px){
     .top-search-layout{width:min(calc(100% - 48px),var(--layout-max-width));grid-template-columns:minmax(0,1fr) 300px;gap:32px;}
     .results-shell{width:min(calc(100% - 48px),var(--layout-atlas-results));grid-template-columns:400px minmax(0,1fr);gap:24px;}
     .map-stage{height:620px;}
   }
   @media (max-width:1023px){
     .landing-view{width:min(calc(100% - 48px),var(--layout-max-width));}
     .top-search-layout{width:min(calc(100% - 48px),800px);grid-template-columns:1fr;}
     .popular-panel{position:static;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px;}
     .popular-panel section{margin:0;padding:20px;border:1px solid var(--color-border-default);border-radius:var(--radius-md);}
     .results-shell{width:min(calc(100% - 48px),900px);grid-template-columns:1fr;}
     .map-stage{height:580px;}
   }
   @media (max-width:767px){
     .landing-view{width:calc(100% - 40px);}
     .landing-hero{padding:48px 0 40px;}
     .landing-hero h1{font-size:40px;}
     .landing-hero>p:last-of-type{font-size:16px;}
     .landing-actions{flex-direction:column;}
     .landing-actions .primary,.landing-actions .outline{width:100%;}
     .landing-stats{grid-template-columns:1fr 1fr;}
     .landing-stats div{border-bottom:1px solid var(--color-border-default);}
     .landing-stats div:nth-child(2){border-right:0;}
     .landing-stats div:nth-child(3),.landing-stats div:nth-child(4){border-bottom:0;}
     .landing-features{grid-template-columns:1fr;padding-bottom:56px;}
     .landing-features article{min-height:0;}
     .search-heading{padding:44px 20px 28px;}
     .search-heading p{font-size:28px;}
     .search-heading #rotatingLead{display:block;min-width:0;text-align:center;}
     .top-search-layout{width:calc(100% - 40px);}
     .filter-wrapper,.input-panel{padding:20px;}
     .mode-tabs button{font-size:13px;}
     .input-example{display:block;}
     .input-example b{display:block;margin-bottom:4px;}
     .apply-grid{grid-template-columns:1fr;}
     .apply-grid>*{grid-column:1!important;}
     .search-submit{display:grid;grid-template-columns:1fr 1.5fr;}
     .search-submit>*{width:100%;}
     .search-status{text-align:left;}
     .popular-panel{display:none;}
     .results-section{margin-top:48px;padding:32px 0 72px;}
     .results-shell{width:calc(100% - 40px);}
     .results-head{align-items:flex-start;gap:12px;flex-direction:column;padding:20px 20px 0;}
     .apply-banner{width:calc(100% - 40px);margin:14px 20px;}
     .result-status{padding-inline:20px;}
     .case-list{padding:0 8px 8px;}
     .map-card{padding:20px;}
     .map-title-row{align-items:flex-start;flex-direction:column;gap:12px;}
     .map-tabs{width:100%;}
     .map-tabs button{flex:1;padding-inline:8px;}
     .map-stage{height:460px;}
     .drawer{top:72px;width:100%;height:calc(100vh - 72px);}
     .case-panel{padding:24px 20px 40px;}
     .compare-bar{width:calc(100% - 20px);padding:12px;gap:10px;}
   }
   @media (max-width:359px){
     .landing-view,.top-search-layout,.results-shell{width:calc(100% - 32px);}
     .landing-stats{grid-template-columns:1fr;}
     .landing-stats div{border-right:0;border-bottom:1px solid var(--color-border-default)!important;}
     .landing-stats div:last-child{border-bottom:0!important;}
     .search-submit{grid-template-columns:1fr;}
   }
   
   
   /* 06. Header logo asset */
   .brand img{display:block;width:auto;height:34px;object-fit:contain;}
   @media(max-width:767px){.brand img{height:30px;}}
   
   /* ========================================================================== */
   
   /* ========================================================================== */
   
   /* Search workspace: 필터·모드·입력·CTA를 하나의 검색 작업 흐름으로 묶는다. */
   .search-main{
     padding:24px;
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-lg);
   }
   
   .search-main .filter-wrapper{
     margin:0;
     padding:0 0 20px;
     background:transparent;
     border:0;
     border-bottom:1px solid var(--color-border-default);
     border-radius:0;
   }
   
   .search-main .filter-section{
     padding-bottom:16px;
     margin-bottom:16px;
     border-bottom:1px solid var(--color-bg-muted);
   }
   .search-main .filter-section.last{
     padding-bottom:0;
     margin-bottom:0;
     border-bottom:0;
   }
   
   .search-main .mode-control-row{
     margin:16px 0 0;
   }
   
   .search-main .mode-tabs{
     min-height:48px;
     background:var(--color-bg-muted);
   }
   
   /* 입력이 현재 화면의 메인 행동이라는 위계를 더 분명하게 */
   .search-main .input-panel{
     margin:16px 0 0;
     padding:24px 0 0;
     background:transparent;
     border:0;
     border-radius:0;
   }
   .search-main .input-panel>h2{
     margin-bottom:6px;
     font-size:21px;
     font-weight:700;
   }
   .search-main .input-panel>p{
     margin-bottom:16px;
   }
   .search-main .input-panel textarea,
   .search-main .input-panel input{
     background:var(--color-bg-page);
     border-color:var(--color-border-strong);
   }
   .search-main #query{
     min-height:152px;
   }
   
   /* 입력 예시는 보조 정보로 낮추되 입력창과 연결된 상태로 유지 */
   .search-main .input-example{
     margin-top:10px;
     padding-top:0;
   }
   
   /* CTA를 검색 입력과 한 묶음으로 보이도록 가까이 배치 */
   .search-main .search-submit{
     margin-top:12px;
   }
   .search-main .search-submit .primary.large{
     min-width:152px;
   }
   .search-main .search-status{
     margin-top:10px;
     padding:10px 12px;
     color:var(--color-text-secondary);
     background:var(--color-bg-subtle);
     border-radius:var(--radius-sm);
     text-align:left;
     line-height:1.5;
   }
   
   /* 인기 케이스: 작은 카드 반복 대신 DBR 콘텐츠 리스트처럼 보이게 */
   #popularCases .rank-item{
     margin:0;
     padding:14px 0;
     background:transparent;
     border:0;
     border-bottom:1px solid var(--color-border-default);
     border-radius:0;
   }
   #popularCases .rank-item:last-child{
     border-bottom:0;
   }
   #popularCases .rank-item>b{
     padding-top:1px;
     color:var(--color-text-tertiary);
     font-weight:600;
   }
   #popularCases .rank-item strong{
     display:-webkit-box;
     overflow:hidden;
     -webkit-box-orient:vertical;
     -webkit-line-clamp:2;
     color:var(--color-text-primary);
     font-size:14px;
     font-weight:650;
     line-height:1.5;
     white-space:normal;
     text-overflow:clip;
   }
   #popularCases .rank-item small{
     margin-top:4px;
     color:var(--color-text-tertiary);
     font-size:13px;
     line-height:1.4;
   }
   
   /*
    * 자주 찾는 고민
    * [순위 고정] [고민명 가변/줄바꿈] [검색 횟수 고정]
    * 제목이 길어져도 순위와 검색 횟수의 x 위치는 변하지 않는다.
    */
   #popularQueries .rank-item{
     grid-template-columns:24px minmax(0,1fr);
     align-items:start;
     gap:10px;
     padding:13px 0;
   }
   #popularQueries .rank-item>b{
     width:24px;
     padding-top:1px;
     color:var(--color-text-tertiary);
     font-weight:600;
     text-align:left;
     font-variant-numeric:tabular-nums;
   }
   #popularQueries .rank-item:hover>b{
     color:var(--color-primary);
   }
   
   /* 현재 JS가 rank-item 안에 제목/횟수를 하나의 div로 출력하는 구조 대응 */
   #popularQueries .rank-item>div{
     min-width:0;
     display:grid;
     grid-template-columns:minmax(0,1fr) max-content;
     align-items:start;
     column-gap:16px;
   }
   #popularQueries .rank-item strong{
     min-width:0;
     margin:0;
     overflow:visible;
     color:var(--color-text-primary);
     font-size:14px;
     font-weight:600;
     line-height:1.5;
     white-space:normal;
     overflow-wrap:anywhere;
     text-overflow:clip;
   }
   #popularQueries .rank-item small{
     min-width:58px;
     margin:0;
     padding-top:1px;
     color:var(--color-text-tertiary);
     font-size:13px;
     line-height:1.5;
     text-align:right;
     white-space:nowrap;
     font-variant-numeric:tabular-nums;
   }
   
   /* Sidebar headings: 보조 영역이지만 콘텐츠 섹션임을 명확히 */
   .popular-panel .side-title{
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:16px;
     margin-bottom:4px;
   }
   .popular-panel .side-title h2{
     margin:0;
     font-size:17px;
     font-weight:700;
   }
   
   @media(max-width:1023px){
     .search-main{
       padding:24px;
     }
   }
   
   @media(max-width:767px){
     .search-main{
       padding:20px;
     }
     .search-main .input-panel{
       padding-top:20px;
     }
     .search-main #query{
       min-height:132px;
     }
     #popularQueries .rank-item>div{
       column-gap:12px;
     }
   }
   
   /* =========================================================
      STEP 2.2 — Search page refinement (v5)
      1) filter divider cleanup
      2) popular query row baseline alignment
      3) '상관없음' selected state clarity
      4) mode tabs → editorial underline tabs
      ========================================================= */
   
   /* 1. 필터 내부 구분선 제거: 필터 그룹 자체의 흐름은 여백으로만 구분 */
   .search-main .filter-section,
   .search-main .filter-section.last{
     padding-bottom:0;
     margin-bottom:20px;
     border-bottom:0;
   }
   .search-main .filter-section.last{
     margin-bottom:0;
   }
   
   /* 필터 전체와 다음 액션 영역 사이에는 구분선 1개만 유지 */
   .search-main .filter-wrapper{
     padding-bottom:22px;
     border-bottom:1px solid var(--color-border-default);
   }
   
   /* 2. 자주 찾는 고민: 첫 줄 기준으로 제목과 검색 횟수 정확히 정렬 */
   #popularQueries .rank-item{
     align-items:start;
   }
   #popularQueries .rank-item>div{
     display:grid;
     grid-template-columns:minmax(0,1fr) max-content;
     align-items:baseline;
     column-gap:16px;
     min-width:0;
   }
   #popularQueries .rank-item strong{
     grid-column:1;
     min-width:0;
     margin:0;
     line-height:1.5;
     overflow-wrap:anywhere;
   }
   #popularQueries .rank-item small{
     grid-column:2;
     align-self:baseline;
     min-width:58px;
     margin:0!important;
     padding:0!important;
     line-height:1.5;
     text-align:right;
     white-space:nowrap;
   }
   
   /* 3. '상관없음': 비선택과 선택 상태를 명확히 구분 */
   .tag.none{
     color:var(--color-text-tertiary);
     background:var(--color-bg-subtle);
     border:1px dashed var(--color-border-strong);
     box-shadow:none;
   }
   .tag.none:hover{
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border-color:var(--color-border-strong);
   }
   .tag.none.selected,
   .tag.none.active,
   .tag.none[aria-pressed="true"]{
     color:var(--color-primary-active);
     background:var(--color-primary-light);
     border:1px solid var(--color-primary);
     font-weight:600;
     box-shadow:none;
   }
   
   /* 4. 검색 모드: 회색 segmented control 대신 DBR형 underline tabs */
   .search-main .mode-control-row{
     margin:0;
     padding-top:0;
   }
   .search-main .mode-tabs{
     position:relative;
     display:grid;
     grid-template-columns:1fr 1fr;
     min-height:52px;
     padding:0;
     background:transparent;
     border-radius:0;
     border-bottom:1px solid var(--color-border-default);
     box-shadow:none;
   }
   .search-main .mode-tabs button{
     position:relative;
     min-height:52px;
     padding:0 16px;
     color:var(--color-text-tertiary);
     background:transparent;
     border:0;
     border-radius:0;
     box-shadow:none;
     font-size:15px;
     font-weight:600;
     transition:color .18s ease, background-color .18s ease;
   }
   .search-main .mode-tabs button:hover{
     color:var(--color-text-primary);
     background:var(--color-bg-subtle);
   }
   .search-main .mode-tabs button.active{
     color:var(--color-text-primary);
     background:transparent;
     box-shadow:none;
     font-weight:700;
   }
   .search-main .mode-tabs button.active::after{
     content:"";
     position:absolute;
     left:16px;
     right:16px;
     bottom:-1px;
     height:3px;
     background:var(--color-primary);
     border-radius:3px 3px 0 0;
   }
   
   /* 탭과 입력 콘텐츠의 연결감 보강 */
   .search-main .input-panel{
     margin-top:0;
     padding-top:28px;
   }
   
   @media(max-width:767px){
     .search-main .filter-section,
     .search-main .filter-section.last{
       margin-bottom:16px;
     }
     .search-main .filter-section.last{margin-bottom:0;}
     .search-main .mode-tabs button{
       padding:0 8px;
       font-size:14px;
     }
     .search-main .mode-tabs button.active::after{
       left:8px;
       right:8px;
     }
     #popularQueries .rank-item>div{column-gap:12px;}
   }
   
   /* =========================================================
      STEP 2.3 — Search page refinement (v6)
      - popular query: true 3-column grid
      - mode switch: independent choice cards
      ========================================================= */
   
   /* 1. 자주 찾는 고민: button 자체를 3열로 구성
      [순위 24px] [고민명 flexible] [검색횟수 64px]
      JS가 title/count를 감싼 div를 출력하므로 display:contents로 grid item을 승격한다. */
   #popularQueries .rank-item{
     display:grid;
     grid-template-columns:24px minmax(0,1fr) 64px;
     column-gap:12px;
     align-items:start;
     width:100%;
   }
   #popularQueries .rank-item>b{
     grid-column:1;
     align-self:start;
     width:24px;
     margin:0;
     padding:0;
     line-height:1.5;
   }
   #popularQueries .rank-item>span{
     display:contents;
   }
   #popularQueries .rank-item strong{
     grid-column:2;
     align-self:start;
     min-width:0;
     margin:0;
     line-height:1.5;
     white-space:normal;
     overflow-wrap:anywhere;
   }
   #popularQueries .rank-item small{
     grid-column:3;
     align-self:start;
     width:64px;
     min-width:64px;
     margin:0!important;
     padding:0!important;
     line-height:1.5;
     text-align:right;
     white-space:nowrap;
     font-variant-numeric:tabular-nums;
   }
   
   /* 2. 검색 모드 선택: underline/segmented bar 대신 독립형 choice card */
   .search-main .mode-control-row{
     margin:0;
     padding:16px 0 0;
     border:0;
   }
   .search-main .mode-tabs{
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:8px;
     min-height:0;
     padding:0;
     background:transparent;
     border:0;
     border-radius:0;
     box-shadow:none;
   }
   .search-main .mode-tabs button{
     position:relative;
     min-height:48px;
     padding:0 18px;
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
     box-shadow:none;
     font-size:14px;
     font-weight:600;
     transition:border-color .18s ease, background-color .18s ease, color .18s ease;
   }
   .search-main .mode-tabs button::after{
     display:none!important;
     content:none!important;
   }
   .search-main .mode-tabs button:hover{
     color:var(--color-text-primary);
     background:var(--color-bg-subtle);
     border-color:var(--color-border-strong);
   }
   .search-main .mode-tabs button.active{
     color:var(--color-primary-active);
     background:var(--color-primary-light);
     border-color:var(--color-primary);
     box-shadow:none;
     font-weight:700;
   }
   
   /* 탭과 입력 영역 사이의 여백을 명확히 분리 */
   .search-main .input-panel{
     margin-top:0;
     padding-top:28px;
   }
   
   @media(max-width:767px){
     #popularQueries .rank-item{
       grid-template-columns:22px minmax(0,1fr) 58px;
       column-gap:10px;
     }
     #popularQueries .rank-item small{
       width:58px;
       min-width:58px;
     }
     .search-main .mode-tabs{
       gap:6px;
     }
     .search-main .mode-tabs button{
       min-height:46px;
       padding:0 10px;
       font-size:13px;
     }
   }
   
   
   /* =========================================================
      STEP 2.4 — v7 JS-aligned fixes
      - actual popular query wrapper is <span>, not <div>
      ========================================================= */
   #popularQueries .rank-item>span{
     display:contents;
   }
   
   
   /* =========================================================
      STEP 2.5 — v8 Search mode help + copy refinement
      - active mode has NO background color
      - info popover: hover/focus desktop, tap mobile
      ========================================================= */
   
   .search-main .mode-control-row{
     padding-top:16px;
   }
   
   .search-main .mode-tabs{
     display:grid;
     grid-template-columns:minmax(0,1fr) minmax(0,1fr);
     gap:8px;
     padding:0;
     background:transparent;
     border:0;
   }
   
   .search-main .mode-option{
     position:relative;
     min-width:0;
   }
   
   /* 선택 버튼: 활성 상태도 배경색 없이 border/text만으로 구분 */
   .search-main .mode-tabs .mode-choice{
     width:100%;
     min-height:48px;
     padding:0 46px 0 18px;
     color:var(--color-text-secondary);
     background:transparent;
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
     box-shadow:none;
     font-size:14px;
     font-weight:600;
     text-align:center;
     transition:border-color .18s ease,color .18s ease,box-shadow .18s ease;
   }
   .search-main .mode-tabs .mode-choice:hover{
     color:var(--color-text-primary);
     background:transparent;
     border-color:var(--color-border-strong);
   }
   .search-main .mode-tabs .mode-choice.active{
     color:var(--color-primary-active);
     background:transparent!important;
     border-color:var(--color-primary);
     box-shadow:0 0 0 1px rgba(238,123,26,.08);
     font-weight:700;
   }
   .search-main .mode-tabs .mode-choice::after{
     display:none!important;
     content:none!important;
   }
   
   /* info icon — mode button과 독립된 클릭 타깃 */
   .search-main .mode-tabs .mode-help{
     position:absolute;
     z-index:3;
     top:50%;
     right:14px;
     width:20px;
     height:20px;
     min-height:20px;
     padding:0;
     transform:translateY(-50%);
     display:grid;
     place-items:center;
     color:var(--color-text-tertiary);
     background:var(--color-bg-page)!important;
     border:1px solid var(--color-border-strong)!important;
     border-radius:50%!important;
     box-shadow:none!important;
     font-family:Georgia,serif;
     font-size:12px!important;
     font-weight:700!important;
     line-height:1;
     text-transform:none;
     cursor:help;
     margin:0;
   }
   .search-main .mode-tabs .mode-help:hover,
   .search-main .mode-tabs .mode-help:focus-visible{
     color:var(--color-text-primary);
     background:var(--color-bg-subtle)!important;
     border-color:var(--color-text-tertiary)!important;
     outline:none;
   }
   
   .search-main .mode-popover{
     position:absolute;
     z-index:30;
     top:calc(100% + 8px);
     right:8px;
     width:min(280px,calc(100vw - 40px));
     padding:14px 16px;
     visibility:hidden;
     opacity:0;
     pointer-events:none;
     color:var(--color-text-primary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
     box-shadow:var(--shadow-md);
     text-align:left;
     transform:translateY(-4px);
     transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
   }
   .search-main .mode-popover::before{
     content:"";
     position:absolute;
     top:-5px;
     right:13px;
     width:9px;
     height:9px;
     background:var(--color-bg-page);
     border-left:1px solid var(--color-border-default);
     border-top:1px solid var(--color-border-default);
     transform:rotate(45deg);
   }
   .search-main .mode-popover p{
     margin:0!important;
     color:var(--color-text-secondary)!important;
     font-size:13px!important;
     line-height:1.6!important;
     word-break:keep-all;
   }
   
   @media(hover:hover) and (pointer:fine){
     .search-main .mode-help:hover + .mode-popover,
     .search-main .mode-help:focus-visible + .mode-popover{
       visibility:visible;
       opacity:1;
       transform:translateY(0);
     }
   }
   
   @media(max-width:767px), (hover:none){
     .search-main .mode-option.is-help-open .mode-popover{
       visibility:visible;
       opacity:1;
       transform:translateY(0);
     }
     .search-main .mode-tabs{
       grid-template-columns:1fr;
       gap:8px;
     }
     .search-main .mode-tabs .mode-choice{
       min-height:46px;
       padding:0 44px 0 14px;
       text-align:left;
     }
     .search-main .mode-tabs .mode-help{
       right:13px;
     }
     .search-main .mode-popover{
       right:0;
       width:min(290px,calc(100vw - 56px));
     }
   }
   
   
   /* =========================================================
      STEP 3 — Results / Map refinement (v9)
      ========================================================= */
   
   /* Results header */
   .results-column{overflow:visible;}
   .results-head{
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:16px;
     padding:22px 20px 0;
   }
   .results-head h2{
     margin:0;
     font-size:20px;
     line-height:1.4;
     font-weight:700;
     letter-spacing:-.02em;
   }
   .results-head h2 span{
     margin-left:3px;
     color:var(--color-text-secondary);
     font-size:14px;
     font-weight:500;
   }
   .analysis-link{
     display:inline-flex;
     align-items:center;
     gap:6px;
     min-height:36px;
     padding:0 10px;
     color:var(--color-text-secondary);
     background:transparent;
     border:0;
     border-radius:var(--radius-sm);
     font-size:13px;
     font-weight:600;
     white-space:nowrap;
   }
   .analysis-link:hover{color:var(--color-primary-active);background:var(--color-primary-light);}
   .analysis-info{
     display:grid;
     place-items:center;
     width:18px;
     height:18px;
     border:1px solid var(--color-border-strong);
     border-radius:50%;
     color:var(--color-text-tertiary);
     background:#fff;
     font:700 11px/1 Georgia,serif;
   }
   .analysis-link:hover .analysis-info{color:var(--color-primary-active);border-color:var(--color-primary);}
   .results-subhead{
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:16px;
     margin:10px 20px 0;
     padding-bottom:14px;
     border-bottom:1px solid var(--color-border-default);
   }
   .results-subhead p{margin:0;color:var(--color-text-secondary);font-size:13px;line-height:1.5;}
   .result-sort{display:flex;align-items:center;gap:7px;flex:0 0 auto;}
   .result-sort button{
     min-height:auto;
     padding:3px 1px;
     color:var(--color-text-tertiary);
     background:transparent!important;
     border:0!important;
     border-radius:0!important;
     box-shadow:none!important;
     font-size:12px;
     font-weight:500;
   }
   .result-sort button:hover{color:var(--color-text-primary);}
   .result-sort button.active{color:var(--color-text-primary);font-weight:700;background:transparent!important;}
   .result-sort i{color:var(--color-border-strong);font-style:normal;font-size:11px;}
   
   /* Result list */
   .case-list{padding:0 10px 8px;}
   .case-card{
     display:grid;
     grid-template-columns:26px minmax(0,1fr) auto;
     gap:12px;
     align-items:start;
     min-height:108px;
     padding:16px 10px;
     border:0;
     border-bottom:1px solid var(--color-border-default);
     background:#fff;
     border-radius:0;
   }
   .case-card:first-child{border-top:0;}
   .case-card:hover,
   .case-card.viewing{background:var(--color-primary-light);border-radius:var(--radius-sm);}
   
   .case-rank{
     padding-top:2px;
     color:var(--color-text-tertiary);
     font-size:14px;
     line-height:1.5;
     text-align:center;
     font-variant-numeric:tabular-nums;
   }
   .case-rank.top-rank{color:var(--color-primary-active);font-weight:600;}
   .case-card-main{min-width:0;}
   .case-card h3{
     margin:0 0 10px;
     color:var(--color-text-primary);
     font-size:15px;
     font-weight:700;
     line-height:1.55;
     word-break:keep-all;
   }
   .case-meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0;font-size:12px;line-height:1.45;}
   .case-meta-row .case-category{color:var(--color-primary-active);font-weight:600;}
   .case-meta-row .company{color:var(--color-text-tertiary);font-size:12px;}
   .case-meta-row>i{color:var(--color-border-strong);font-style:normal;}
   .case-meta-row>em{margin-left:auto;color:var(--color-primary-active);font-style:normal;font-weight:700;white-space:nowrap;}
   .case-actions{display:flex;align-items:center;gap:7px;padding-top:0;}
   .case-actions .icon-bookmark{
     position:static;
     width:32px;
     height:32px;
     padding:6px;
     color:var(--color-primary-active);
     background:transparent;
     border:0;
     border-radius:var(--radius-sm);
   }
   .case-actions .icon-bookmark:hover{background:var(--color-primary-light);}
   .case-actions .case-add{
     position:static;
     min-width:56px;
     min-height:32px;
     padding:0 8px;
     color:var(--color-primary-active);
     background:#fff;
     border:1px solid var(--color-primary);
     border-radius:var(--radius-sm);
     font-size:12px;
     font-weight:700;
     white-space:nowrap;
   }
   .case-actions .case-add:hover{background:var(--color-primary-light);}
   .case-actions .case-add.selected{color:#fff;background:var(--color-text-primary);border-color:var(--color-text-primary);}
   .result-more{
     width:calc(100% - 40px);
     min-height:42px;
     margin:4px 20px 18px;
     display:flex;
     align-items:center;
     justify-content:center;
     gap:5px;
     color:var(--color-text-secondary);
     background:var(--color-bg-subtle);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-sm);
     font-size:13px;
     font-weight:600;
   }
   .result-more:hover{color:var(--color-text-primary);border-color:var(--color-border-strong);background:var(--color-bg-muted);}
   .result-more i{font-style:normal;color:var(--color-text-tertiary);}
   
   /* AI analysis = anchored popover, not a large modal */
   #analysisDialog{
     position:fixed;
     inset:auto;
     width:min(390px,calc(100vw - 24px));
     max-height:min(620px,calc(100vh - 24px));
     margin:0;
     padding:0;
     overflow:auto;
     background:#fff;
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
     box-shadow:var(--shadow-md);
   }
   #analysisDialog::backdrop{background:transparent;}
   .analysis-popover-body{padding:20px;}
   .analysis-popover-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--color-border-default);}
   .analysis-popover-head h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;}
   .analysis-popover-close{width:30px;height:30px;min-height:30px;padding:0;color:var(--color-text-tertiary);background:transparent;border:0;border-radius:50%;font-size:22px;font-weight:300;line-height:1;}
   .analysis-popover-close:hover{color:var(--color-text-primary);background:var(--color-bg-muted);}
   .analysis-summary{margin:14px 0 18px;color:var(--color-text-secondary);font-size:14px;line-height:1.65;word-break:keep-all;}
   .analysis-popover-body section{margin-top:18px;}
   .analysis-popover-body section h3{margin:0 0 8px;color:var(--color-text-tertiary);font-size:13px;font-weight:600;}
   .analysis-chips{display:flex;flex-wrap:wrap;gap:6px;}
   .analysis-chips span{display:inline-flex;align-items:center;min-height:30px;padding:5px 9px;border-radius:var(--radius-sm);font-size:13px;line-height:1.4;}
   .analysis-chips.type span{color:#315f91;background:#edf5fc;}
   .analysis-chips.metric span{color:#287d66;background:#e9f5f1;}
   .analysis-chips.reason span{color:#7a552f;background:#fff3e3;}
   .analysis-judgment{margin:0 0 8px;padding:10px 12px;color:var(--color-text-secondary);background:var(--color-bg-subtle);border-radius:var(--radius-sm);font-size:13px;line-height:1.65;word-break:keep-all;}
   
   /* Compare: explicit language instead of ambiguous '추가' */
   .compare-bar #compareListToggle{white-space:nowrap;}
   .compare-bar #compareOpen:disabled{opacity:.5;cursor:not-allowed;}
   
   /* Larger map contents while preserving current layout ratio */
   .map-tooltip em{color:var(--color-primary-active);font-weight:700;}
   [data-map-detail].list-linked circle:first-child{stroke:var(--color-primary)!important;stroke-width:3!important;}
   [data-map-detail].list-linked text{font-weight:850!important;}
   
   @media(max-width:1023px){
     .results-subhead{align-items:flex-start;flex-direction:column;gap:8px;}
     .result-sort{align-self:flex-end;}
   }
   @media(max-width:767px){
     .results-head{padding:18px 16px 0;}
     .results-subhead{margin:8px 16px 0;}
     .case-list{padding:0 8px 8px;}
     .case-card{grid-template-columns:22px minmax(0,1fr);gap:10px;padding:14px 8px;}
     .case-actions{grid-column:2;justify-content:flex-end;margin-top:4px;}
     .case-meta-row>em{margin-left:0;}
     .result-more{width:calc(100% - 32px);margin:4px 16px 16px;}
     #analysisDialog{width:calc(100vw - 24px);}
   }
   
   
   /* =========================================================
      STEP 3.1 — Results refinement / bug-fix UI (v10)
      ========================================================= */
   
   /* Foundation primary is the default orange. Darker oranges are hover/active only. */
   .results-column .case-rank.top-rank,
   .results-column .case-category,
   .results-column .case-meta-row>em,
   .map-tooltip em,
   .case-actions .icon-bookmark,
   .case-actions .case-add{
     color:var(--color-primary);
   }
   .case-actions .icon-bookmark:hover,
   .case-actions .case-add:hover,
   .analysis-link:hover{
     color:var(--color-primary-hover);
   }
   
   /* AI analysis trigger: no background or focus border, text-color interaction only. */
   .analysis-link,
   .analysis-link:hover,
   .analysis-link:active,
   .analysis-link:focus,
   .analysis-link:focus-visible{
     background:transparent!important;
     border:0!important;
     outline:0!important;
     box-shadow:none!important;
   }
   .analysis-link:hover .analysis-info,
   .analysis-link:focus-visible .analysis-info{
     color:var(--color-primary-hover);
     border-color:var(--color-border-strong);
   }
   
   /* Result actions: bookmark and compare should read as one compact action group. */
   .case-actions{
     gap:2px;
     align-items:center;
   }
   .case-actions .icon-bookmark{
     width:30px;
     height:30px;
     min-height:30px;
     padding:6px;
     border-radius:var(--radius-sm);
   }
   .case-actions .icon-bookmark:hover{background:transparent;}
   .case-actions .case-add{
     min-width:48px;
     min-height:30px;
     height:30px;
     padding:0 6px;
     background:transparent;
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-sm);
     font-size:12px;
     line-height:28px;
   }
   .case-actions .case-add:hover{
     background:transparent;
     border-color:var(--color-primary);
   }
   .case-actions .case-add.selected{
     color:#fff;
     background:var(--color-text-primary);
     border-color:var(--color-text-primary);
   }
   
   /* More / collapse control: draw the chevron with CSS so vertical alignment is stable. */
   .result-more i{
     position:relative;
     display:inline-block;
     width:8px;
     height:8px;
     margin-left:2px;
     color:inherit;
     font-size:0;
     line-height:0;
     vertical-align:middle;
   }
   .result-more i::before{
     content:"";
     position:absolute;
     left:1px;
     top:0;
     width:5px;
     height:5px;
     border-right:1.5px solid currentColor;
     border-bottom:1.5px solid currentColor;
     transform:rotate(45deg);
     transform-origin:center;
   }
   .result-more.expanded i::before{
     top:3px;
     transform:rotate(225deg);
   }
   
   /* Analysis popover close glyph optical centering. */
   .analysis-popover-close{
     display:grid;
     place-items:center;
     font-size:0!important;
     line-height:1!important;
   }
   .analysis-popover-close::before{
     content:"×";
     display:block;
     font-family:Arial,sans-serif;
     font-size:20px;
     font-weight:400;
     line-height:1;
     transform:translateY(-1px);
   }
   
   /* Linked map highlight: a broad translucent halo, not a hard orange outline. */
   .map-link-halo{
     fill:none;
     stroke:var(--node-color, var(--color-primary));
     stroke-width:12;
     stroke-opacity:0;
     pointer-events:none;
     transition:stroke-opacity .16s ease, stroke-width .16s ease;
   }
   [data-map-detail].list-linked .map-link-halo{
     stroke-opacity:.18;
     stroke-width:16;
   }
   /* remove the old hard outline rule */
   [data-map-detail].list-linked circle:not(.map-link-halo){
     stroke-width:initial;
   }
   /* v10 specificity correction for legacy linked-node rule */
   [data-map-detail].list-linked .map-link-halo{
     stroke:var(--node-color, var(--color-primary))!important;
     stroke-width:16!important;
     stroke-opacity:.18!important;
   }
   
   /* =========================================================
      STEP 3.2 — Results visual consistency / interaction hardening (v11)
      ========================================================= */
   
   /* One horizontal rhythm for header, rows and footer control. */
   .results-subhead{margin-left:20px;margin-right:20px;}
   .case-list{padding:0 20px 8px;}
   .result-more{width:calc(100% - 40px);margin-left:20px;margin-right:20px;}
   
   /* Row borders must never change on hover/focus/selection. */
   .case-card,
   .case-card:hover,
   .case-card:focus,
   .case-card:focus-visible,
   .case-card.viewing,
   .case-card.comparing,
   .case-card.map-linked{
     border-top:0!important;
     border-left:0!important;
     border-right:0!important;
     border-bottom:1px solid var(--color-border-default)!important;
     border-radius:0!important;
     outline:0!important;
     box-shadow:none!important;
     transform:none!important;
   }
   .case-card:hover,
   .case-card.map-linked{background:var(--color-bg-subtle);}
   .case-card.viewing{background:var(--color-bg-selected);}
   .case-card.comparing{background:var(--color-bg-muted);}
   .case-card.viewing.comparing{background:var(--color-bg-muted);}
   
   /* Foundation orange: default primary, hover/active only darken. */
   .results-column .case-rank.top-rank,
   .results-column .case-category,
   .results-column .case-meta-row>em,
   .map-tooltip em,
   .case-actions .icon-bookmark,
   .case-actions .case-add{
     color:var(--color-primary)!important;
   }
   .case-actions .icon-bookmark:hover,
   .case-actions .case-add:hover{color:var(--color-primary-hover)!important;}
   .case-actions .icon-bookmark:active,
   .case-actions .case-add:active{color:var(--color-primary-active)!important;}
   
   /* AI analysis trigger: text and info-circle behave as one unit, no box treatment. */
   .analysis-link,
   .analysis-link:hover,
   .analysis-link:active,
   .analysis-link:focus,
   .analysis-link:focus-visible{
     padding-left:4px;
     padding-right:0;
     background:transparent!important;
     border:0!important;
     outline:0!important;
     box-shadow:none!important;
   }
   .analysis-link:hover{color:var(--color-primary-hover)!important;}
   .analysis-link:active{color:var(--color-primary-active)!important;}
   .analysis-info{transition:color .15s ease,border-color .15s ease;}
   .analysis-link:hover .analysis-info{
     color:var(--color-primary-hover)!important;
     border-color:var(--color-primary-hover)!important;
   }
   .analysis-link:active .analysis-info{
     color:var(--color-primary-active)!important;
     border-color:var(--color-primary-active)!important;
   }
   
   /* Bookmark + compare = compact inline actions, no unrelated gray box. */
   .case-actions{gap:4px;align-items:center;}
   .case-actions .icon-bookmark,
   .case-actions .case-add{
     min-height:28px;
     height:28px;
     background:transparent!important;
     border:0!important;
     box-shadow:none!important;
   }
   .case-actions .icon-bookmark{width:28px;padding:5px;}
   .case-actions .case-add{
     min-width:auto;
     padding:0 4px;
     border-radius:0!important;
     line-height:28px;
     font-size:12px;
     font-weight:700;
   }
   .case-actions .case-add:hover,
   .case-actions .case-add:focus,
   .case-actions .case-add:focus-visible{
     background:transparent!important;
     outline:0!important;
   }
   .case-actions .case-add.selected{
     color:var(--color-text-primary)!important;
     background:transparent!important;
     border:0!important;
   }
   
   /* More/collapse is stable and centered in both states. */
   .result-more{position:relative;gap:7px;}
   .result-more-label{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
   .result-more i{flex:0 0 8px;align-self:center;margin:0;}
   .result-more i::before{top:0;}
   .result-more.expanded i::before{top:3px;}
   
   /* Analysis close: exact geometric X, same transparent background in every state. */
   .analysis-popover-close,
   .analysis-popover-close:hover,
   .analysis-popover-close:active,
   .analysis-popover-close:focus,
   .analysis-popover-close:focus-visible{
     position:relative;
     display:block;
     width:30px;
     height:30px;
     min-height:30px;
     padding:0;
     color:var(--color-text-secondary);
     background:transparent!important;
     border:0!important;
     border-radius:0!important;
     outline:0!important;
     box-shadow:none!important;
     font-size:0!important;
   }
   .analysis-popover-close::before,
   .analysis-popover-close::after{
     content:"";
     position:absolute;
     left:50%;
     top:50%;
     width:14px;
     height:1.5px;
     background:currentColor;
     transform-origin:center;
   }
   .analysis-popover-close::before{transform:translate(-50%,-50%) rotate(45deg);}
   .analysis-popover-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
   .analysis-popover-close:hover{color:var(--color-text-primary);}
   
   /* Linked map result: broad translucent halo in BOTH radial and distribution maps. */
   .map-link-halo{
     fill:none!important;
     stroke:var(--node-color,var(--color-primary))!important;
     stroke-width:18!important;
     stroke-opacity:0!important;
     pointer-events:none;
     transition:stroke-opacity .14s ease,stroke-width .14s ease;
   }
   [data-map-detail].list-linked .map-link-halo{
     stroke-opacity:.18!important;
     stroke-width:20!important;
   }
   /* Do not mutate the node's own stroke when linked. */
   [data-map-detail].list-linked circle:not(.map-link-halo){filter:none;}
   
   @media(max-width:767px){
     .case-list{padding-left:16px;padding-right:16px;}
     .result-more{width:calc(100% - 32px);margin-left:16px;margin-right:16px;}
   }
   
   /* =========================================================
      STEP 3.4 — Sticky map + simple linked halo (v14)
      ========================================================= */
   
   /* Keep the visual map in view while the left result list grows. */
   .results-section,
   .results-shell{
     overflow:visible;
   }
   .results-shell .map-card{
     position:sticky;
     top:88px;
     align-self:start;
   }
   
   /*
    * Linked result highlight
    * - blue translucent fill only
    * - no orange outline
    * - no scale / radius / stroke-width animation
    * - only opacity fades in and out
    */
   .map-link-halo{
     fill:var(--node-color,#2563eb)!important;
     fill-opacity:0!important;
     stroke:none!important;
     stroke-width:0!important;
     opacity:0;
     pointer-events:none;
     transition:opacity .16s ease!important;
   }
   [data-map-detail].list-linked .map-link-halo{
     fill:var(--node-color,#2563eb)!important;
     fill-opacity:.18!important;
     stroke:none!important;
     stroke-width:0!important;
     opacity:1;
   }
   
   /* Kill legacy linked-node outline rules completely. */
   [data-map-detail].list-linked circle:first-child,
   [data-map-detail].list-linked circle:not(.map-link-halo){
     filter:none!important;
   }
   [data-map-detail].list-linked circle:first-child:not(.map-link-halo){
     stroke:inherit;
   }
   
   @media(max-width:1023px){
     .results-shell .map-card{
       position:static;
       top:auto;
     }
   }
   
   
   /* =========================================================
      V16 — Compare UX / DBR Foundation refinement
      ========================================================= */
   
   /* Search result page no longer reserves legacy bottom whitespace. */
   .search-view{padding-bottom:0;}
   
   /* Floating compare tray — dark floating layer, Foundation spacing/radius. */
   .compare-bar{
     width:min(760px,calc(100% - 40px));
     padding:12px 14px 12px 18px;
     gap:10px 16px;
     color:var(--color-text-inverse);
     background:var(--color-bg-dark);
     border:0;
     border-radius:var(--radius-lg);
     box-shadow:var(--shadow-floating);
   }
   .compare-bar>div{gap:10px;}
   .compare-bar>div:first-of-type b{font-size:15px;font-weight:700;}
   .compare-bar span{font-size:13px;color:#C9CDD2;}
   .compare-bar .access-badge{
     margin-left:4px;
     padding:3px 7px;
     color:#E1E3E6;
     background:#383838;
     border-radius:var(--radius-full);
     font-size:11px;
     font-weight:600;
   }
   .compare-bar .back-button{
     min-height:36px;
     padding:0 12px;
     color:#fff;
     background:transparent;
     border:1px solid #5F6368;
     border-radius:var(--radius-sm);
     font-size:13px;
     font-weight:600;
   }
   .compare-bar .back-button:hover{border-color:#8A8F98;background:#2B2B2B;}
   .compare-bar .compare-reset{
     min-height:36px;
     padding:0 10px;
     color:#E1E3E6;
     background:transparent;
     border:0;
     border-radius:var(--radius-sm);
     font-size:13px;
     font-weight:600;
   }
   .compare-bar .compare-reset:hover{color:#fff;background:#2B2B2B;}
   .compare-bar .primary{
     min-height:40px;
     padding:0 16px;
     color:#fff;
     background:var(--color-primary);
     border:1px solid var(--color-primary);
     border-radius:var(--radius-sm);
     font-size:14px;
     font-weight:700;
   }
   .compare-bar .primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);}
   .compare-bar .primary:active{background:var(--color-primary-active);border-color:var(--color-primary-active);}
   .compare-bar .primary:disabled{color:#9CA0A6;background:#3B3B3B;border-color:#3B3B3B;opacity:1;cursor:not-allowed;}
   .compare-bar #compareSelection{
     flex-basis:100%;
     width:100%;
     max-height:176px;
     overflow:auto;
     padding-top:2px;
     scrollbar-width:thin;
     scrollbar-color:#5F6368 transparent;
   }
   .compare-bar #compareSelection>div{
     min-height:42px;
     padding:9px 2px;
     border-top:1px solid #444;
     color:#D7D9DC;
     font-size:13px;
     line-height:1.45;
   }
   .compare-bar #compareSelection>div:first-child{border-top-color:#555;}
   .compare-bar #compareSelection button{
     flex:0 0 28px;
     width:28px;
     height:28px;
     padding:0;
     display:grid;
     place-items:center;
     color:#C9CDD2;
     background:transparent;
     border:0;
     border-radius:50%;
     font-size:18px;
     line-height:1;
   }
   .compare-bar #compareSelection button:hover{color:#fff;background:#333;}
   
   /* Compare dialog: outer shell clips radius; only the inner body scrolls. */
   #compareDialog{
     width:min(1180px,calc(100% - 48px));
     max-width:1180px;
     max-height:88vh;
     padding:0;
     overflow:hidden;
     color:var(--color-text-primary);
     background:var(--color-bg-page);
     border:0;
     border-radius:var(--radius-lg);
     box-shadow:var(--shadow-floating);
   }
   #compareDialog::backdrop{background:rgba(31,31,31,.58);}
   #compareDialog .compare-dialog-shell{
     display:flex;
     flex-direction:column;
     width:100%;
     max-height:88vh;
     overflow:hidden;
     background:var(--color-bg-page);
     border-radius:inherit;
   }
   #compareDialog .compare-dialog-head{
     position:relative;
     flex:0 0 auto;
     padding:28px 64px 20px 32px;
     background:#fff;
     border-bottom:1px solid var(--color-border-default);
   }
   #compareDialog .compare-dialog-head .section-label{
     margin:0 0 6px;
     color:var(--color-primary);
     font-size:13px;
     font-weight:700;
     letter-spacing:.06em;
   }
   #compareDialog .compare-dialog-head h1{
     margin:0;
     color:var(--color-text-primary);
     font-family:var(--font-family-base);
     font-size:26px;
     font-weight:700;
     line-height:1.35;
     letter-spacing:-.02em;
   }
   #compareDialog .compare-dialog-head>div>p:last-child{
     margin:8px 0 0;
     color:var(--color-text-secondary);
     font-size:14px;
     line-height:1.6;
   }
   #compareDialog .compare-dialog-close{
     position:absolute;
     top:24px;
     right:28px;
     width:36px;
     height:36px;
     padding:0;
     display:grid;
     place-items:center;
     color:var(--color-text-secondary);
     background:var(--color-bg-subtle);
     border:1px solid transparent;
     border-radius:50%;
   }
   #compareDialog .compare-dialog-close::before,
   #compareDialog .compare-dialog-close::after{
     content:"";
     position:absolute;
     width:14px;
     height:1.5px;
     background:currentColor;
     border-radius:2px;
   }
   #compareDialog .compare-dialog-close::before{transform:rotate(45deg);}
   #compareDialog .compare-dialog-close::after{transform:rotate(-45deg);}
   #compareDialog .compare-dialog-close:hover{
     color:var(--color-text-primary);
     background:var(--color-bg-muted);
   }
   #compareDialog .compare-dialog-close:focus-visible{
     outline:2px solid var(--color-border-focus);
     outline-offset:2px;
   }
   #compareDialog .compare-dialog-scroll{
     min-height:0;
     overflow:auto;
     overscroll-behavior:contain;
     scrollbar-gutter:stable;
     background:#fff;
     scrollbar-width:thin;
     scrollbar-color:var(--color-border-strong) transparent;
   }
   #compareDialog .compare-dialog-scroll::-webkit-scrollbar{width:10px;height:10px;}
   #compareDialog .compare-dialog-scroll::-webkit-scrollbar-track{background:transparent;}
   #compareDialog .compare-dialog-scroll::-webkit-scrollbar-thumb{
     background:var(--color-border-strong);
     border:3px solid #fff;
     border-radius:var(--radius-full);
   }
   
   #compareDialog .compare-table-wrap{
     margin:0;
     overflow:visible;
   }
   #compareDialog .compare-table{
     width:100%;
     min-width:900px;
     table-layout:fixed;
     border-collapse:separate;
     border-spacing:0;
   }
   #compareDialog .compare-table th,
   #compareDialog .compare-table td{
     padding:18px 20px;
     vertical-align:top;
     color:var(--color-text-primary);
     background:#fff;
     border:0;
     border-right:1px solid var(--color-border-default);
     border-bottom:1px solid var(--color-border-default);
     font-size:14px;
     line-height:1.65;
     overflow-wrap:anywhere;
   }
   #compareDialog .compare-table thead th{
     position:sticky;
     top:0;
     z-index:3;
     padding-top:16px;
     padding-bottom:16px;
     background:var(--color-bg-subtle);
     font-size:14px;
     font-weight:700;
     line-height:1.5;
   }
   #compareDialog .compare-table th:first-child{
     position:sticky;
     left:0;
     z-index:2;
     width:132px;
     min-width:132px;
     color:var(--color-text-secondary);
     background:var(--color-bg-muted);
     font-weight:700;
   }
   #compareDialog .compare-table thead th:first-child{z-index:5;background:var(--color-bg-muted);}
   #compareDialog .compare-table tr>*:last-child{border-right:0;}
   #compareDialog .compare-table tbody tr:last-child>*{border-bottom:0;}
   #compareDialog .compare-table td{font-weight:400;}
   #compareDialog .compare-table tbody tr:hover td{background:#FCFCFC;}
   #compareDialog .compare-table tbody tr:hover th{background:var(--color-bg-muted);}
   #compareDialog .compare-table .empty,
   #compareDialog .compare-table td:has(> .empty){color:var(--color-text-tertiary);}
   #compareDialog .compare-table .strategy-box{
     margin:0;
     padding:14px;
     background:var(--color-bg-subtle);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
     font-size:13px;
   }
   
   @media(max-width:767px){
     #compareDialog{
       width:calc(100% - 20px);
       max-height:92vh;
       border-radius:var(--radius-md);
     }
     #compareDialog .compare-dialog-shell{max-height:92vh;}
     #compareDialog .compare-dialog-head{padding:22px 56px 16px 20px;}
     #compareDialog .compare-dialog-close{top:18px;right:16px;}
     #compareDialog .compare-dialog-head h1{font-size:22px;}
     #compareDialog .compare-table{min-width:0;width:max-content;}
     #compareDialog .compare-table th:first-child{width:108px;min-width:108px;}
     #compareDialog .compare-table thead th:not(:first-child),
     #compareDialog .compare-table td{width:calc(100vw - 148px);min-width:calc(100vw - 148px);max-width:calc(100vw - 148px);}
     #compareDialog .compare-table th,
     #compareDialog .compare-table td{padding:16px 14px;font-size:13px;}
   }
   
   /* =========================================================
      V17 — Floating compare tray refinement
      ========================================================= */
   .compare-bar{
     width:min(760px,calc(100% - 40px));
     padding:12px 14px 12px 16px;
     gap:10px 14px;
     background:var(--color-bg-dark);
     border-radius:var(--radius-lg);
   }
   .compare-bar>div:first-of-type{
     display:flex;
     align-items:center;
     gap:10px;
     min-width:0;
   }
   .compare-bar>div:nth-of-type(2){
     display:flex;
     align-items:center;
     gap:8px;
     margin-left:auto;
   }
   .compare-bar>div:first-of-type b{
     display:flex;
     align-items:center;
     gap:6px;
     min-width:0;
     font-size:15px;
     line-height:1.2;
   }
   .compare-bar>div:first-of-type>span{
     flex:0 0 auto;
     line-height:1;
   }
   .compare-bar .back-button,
   .compare-bar .compare-reset,
   .compare-bar .primary{
     min-height:36px;
     height:36px;
     padding:0 13px;
     display:inline-flex;
     align-items:center;
     justify-content:center;
     border-radius:var(--radius-sm);
     font-size:13px;
     font-weight:600;
     line-height:1;
     white-space:nowrap;
     box-shadow:none;
   }
   .compare-bar .back-button,
   .compare-bar .compare-reset{
     color:#fff;
     background:transparent;
     border:1px solid #5F6368;
   }
   .compare-bar .back-button:hover,
   .compare-bar .compare-reset:hover{
     color:#fff;
     background:#2B2B2B;
     border-color:#8A8F98;
   }
   .compare-bar .primary{
     padding:0 15px;
     color:#fff;
     background:var(--color-primary);
     border:1px solid var(--color-primary);
     font-size:13px;
     font-weight:700;
   }
   .compare-bar .primary:hover{
     background:var(--color-primary-hover);
     border-color:var(--color-primary-hover);
   }
   .compare-bar .primary:active{
     background:var(--color-primary-active);
     border-color:var(--color-primary-active);
   }
   .compare-bar .primary:disabled{
     color:#9CA0A6;
     background:#3B3B3B;
     border-color:#3B3B3B;
   }
   .compare-bar #compareSelection{
     flex-basis:100%;
     width:100%;
     max-height:176px;
     overflow:auto;
     padding-top:2px;
   }
   .compare-bar #compareSelection>div{
     min-height:42px;
     padding:9px 2px;
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:14px;
     border-top:1px solid #444;
     color:#D7D9DC;
     font-size:13px;
     line-height:1.45;
   }
   .compare-bar #compareSelection>div>span{
     flex:1;
     min-width:0;
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:nowrap;
   }
   .compare-bar #compareSelection button{
     flex:0 0 28px;
     width:28px;
     height:28px;
     margin:0;
     display:grid;
     place-items:center;
   }
   
   @media(max-width:767px){
     .compare-bar{
       width:calc(100% - 20px);
       padding:12px;
       gap:10px;
     }
     .compare-bar>div:first-of-type,
     .compare-bar>div:nth-of-type(2){
       width:100%;
     }
     .compare-bar>div:nth-of-type(2){
       margin-left:0;
     }
     .compare-bar .back-button,
     .compare-bar .compare-reset,
     .compare-bar .primary{
       flex:1 1 0;
       padding:0 10px;
     }
   }
   
   
   /* =========================================================
      STEP 3.8 — Map tooltip card refinement (v19 fix)
      ========================================================= */
   .map-tooltip{
     width:min(292px,calc(100% - 16px));
     max-width:292px;
     max-height:none;
     padding:16px;
     overflow:visible;
     color:var(--color-text-primary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
     box-shadow:var(--shadow-md);
   }
   .map-tooltip .map-tooltip-badge{
     display:inline-flex;
     align-items:center;
     min-height:24px;
     margin:0 0 10px;
     padding:3px 8px;
     color:var(--color-primary);
     background:var(--color-primary-light);
     border-radius:var(--radius-full);
     font-size:12px;
     font-weight:700;
     line-height:1.4;
   }
   .map-tooltip .map-tooltip-title{
     display:-webkit-box;
     overflow:hidden;
     margin:0;
     color:var(--color-text-primary);
     font-size:15px;
     font-weight:700;
     line-height:1.5;
     letter-spacing:-.015em;
     word-break:keep-all;
     -webkit-box-orient:vertical;
     -webkit-line-clamp:2;
   }
   .map-tooltip .map-tooltip-info{
     display:grid;
     grid-template-columns:88px minmax(0,1fr);
     gap:16px;
     align-items:end;
     margin-top:14px;
   }
   .map-tooltip .map-tooltip-score,
   .map-tooltip .map-tooltip-meta{
     min-width:0;
   }
   .map-tooltip .map-tooltip-score b{
     display:block;
     margin:0;
     color:var(--color-text-primary);
     font-size:29px;
     font-weight:700;
     line-height:1;
     letter-spacing:-.03em;
   }
   .map-tooltip .map-tooltip-score span{
     display:block;
     margin-top:5px;
     color:var(--color-text-tertiary);
     font-size:12px;
     line-height:1.4;
   }
   .map-tooltip .map-tooltip-meta b{
     display:block;
     overflow:hidden;
     margin:0;
     color:var(--color-primary);
     font-size:13px;
     font-weight:600;
     line-height:1.45;
     white-space:nowrap;
     text-overflow:ellipsis;
   }
   .map-tooltip .map-tooltip-meta span{
     display:block;
     overflow:hidden;
     margin-top:4px;
     color:var(--color-text-secondary);
     font-size:13px;
     line-height:1.45;
     white-space:nowrap;
     text-overflow:ellipsis;
   }
   .map-tooltip .map-tooltip-link{
     display:flex!important;
     align-items:center;
     justify-content:flex-end;
     gap:4px;
     width:auto!important;
     min-height:0!important;
     margin:14px 0 0 auto!important;
     padding:0!important;
     color:var(--color-text-secondary)!important;
     background:transparent!important;
     border:0!important;
     border-radius:0!important;
     box-shadow:none!important;
     font-size:13px!important;
     font-weight:600!important;
     line-height:1.4;
   }
   .map-tooltip .map-tooltip-link:hover{
     color:var(--color-primary-hover)!important;
     background:transparent!important;
   }
   .map-tooltip .map-tooltip-link:active{
     color:var(--color-primary-active)!important;
   }
   .map-tooltip .map-tooltip-link:focus-visible{
     outline:2px solid var(--color-border-focus);
     outline-offset:3px;
   }
   .map-tooltip .map-tooltip-link span{
     display:inline!important;
     color:inherit!important;
     font-size:17px!important;
     line-height:1;
   }
   @media(max-width:767px){
     .map-tooltip{
       width:min(280px,calc(100% - 16px));
       padding:14px;
     }
     .map-tooltip .map-tooltip-info{
       grid-template-columns:80px minmax(0,1fr);
       gap:12px;
     }
     .map-tooltip .map-tooltip-score b{font-size:27px;}
   }
   
   
   /* =========================================================
      STEP 3.9 — Map tooltip information hierarchy (v20)
      TOP n → category | company → title → similarity / detail
      ========================================================= */
   .map-tooltip .map-tooltip-badge{
     margin-bottom:8px;
   }
   .map-tooltip .map-tooltip-meta{
     display:flex;
     align-items:center;
     gap:7px;
     min-width:0;
     margin:0 0 6px;
     font-size:13px;
     line-height:1.45;
   }
   .map-tooltip .map-tooltip-meta b{
     display:block;
     flex:0 1 auto;
     min-width:0;
     overflow:hidden;
     margin:0;
     color:var(--color-primary);
     font-size:13px;
     font-weight:600;
     line-height:1.45;
     white-space:nowrap;
     text-overflow:ellipsis;
   }
   .map-tooltip .map-tooltip-meta span{
     display:block;
     flex:0 0 auto;
     margin:0;
     color:var(--color-border-strong);
     font-size:12px;
     line-height:1;
   }
   .map-tooltip .map-tooltip-meta em{
     display:block;
     flex:1 1 auto;
     min-width:0;
     overflow:hidden;
     margin:0;
     color:var(--color-text-secondary);
     font-size:13px;
     font-style:normal;
     font-weight:400;
     line-height:1.45;
     white-space:nowrap;
     text-overflow:ellipsis;
   }
   .map-tooltip .map-tooltip-title{
     margin:0;
     font-size:15px;
     line-height:1.5;
     -webkit-line-clamp:3;
   }
   .map-tooltip .map-tooltip-footer{
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:16px;
     margin-top:14px;
   }
   .map-tooltip .map-tooltip-score{
     display:flex;
     align-items:baseline;
     gap:5px;
     min-width:0;
     white-space:nowrap;
   }
   .map-tooltip .map-tooltip-score span{
     display:inline;
     margin:0;
     color:var(--color-text-secondary);
     font-size:13px;
     line-height:1.4;
   }
   .map-tooltip .map-tooltip-score b{
     display:inline;
     margin:0;
     color:var(--color-text-primary);
     font-size:20px;
     font-weight:700;
     line-height:1;
     letter-spacing:-.02em;
   }
   .map-tooltip .map-tooltip-link{
     flex:0 0 auto;
     margin:0!important;
     color:var(--color-text-secondary)!important;
     white-space:nowrap;
   }
   @media(max-width:767px){
     .map-tooltip .map-tooltip-footer{gap:10px;}
     .map-tooltip .map-tooltip-score b{font-size:19px;}
   }
   
   /* =========================================================
      V21 — Detail drawer redesign
      ========================================================= */
   
   /* v20 follow-up: company name in map tooltip is secondary gray */
   .map-tooltip .map-tooltip-meta em{
     color:var(--color-text-secondary)!important;
   }
   
   .drawer#detailDialog{
     width:min(520px,100%);
   }
   
   .case-panel{
     padding:0 30px 28px;
   }
   
   .case-panel-nav{
     position:sticky;
     z-index:6;
     top:0;
     display:flex;
     align-items:center;
     gap:6px;
     min-height:58px;
     margin:0 -30px 22px;
     padding:0 22px 0 30px;
     background:rgba(255,255,255,.96);
     border-bottom:1px solid var(--color-border-default);
     backdrop-filter:blur(8px);
   }
   .case-panel-nav-single{justify-content:space-between;}
   .case-panel-position{
     margin-right:4px;
     color:var(--color-text-secondary);
     font-size:13px;
     font-weight:600;
     font-variant-numeric:tabular-nums;
   }
   .case-panel-nav-btn,
   .case-panel-nav .panel-close{
     position:relative;
     top:auto;
     right:auto;
     display:grid;
     place-items:center;
     flex:0 0 32px;
     width:32px;
     height:32px;
     min-height:32px;
     padding:0;
     color:var(--color-text-secondary);
     background:transparent!important;
     border:1px solid var(--color-border-default);
     border-radius:50%;
     box-shadow:none!important;
     font-family:inherit;
     line-height:1;
   }
   .case-panel-nav-btn{
     font-size:20px;
     font-weight:400;
   }
   .case-panel-nav-btn:hover:not(:disabled),
   .case-panel-nav .panel-close:hover{
     color:var(--color-text-primary);
     background:transparent!important;
     border-color:var(--color-border-strong);
   }
   .case-panel-nav-btn:disabled{
     color:var(--color-text-disabled);
     border-color:var(--color-border-default);
     cursor:not-allowed;
     opacity:.65;
   }
   .case-panel-nav .panel-close{
     margin-left:auto;
     border:0;
   }
   .case-panel-nav .panel-close::before,
   .case-panel-nav .panel-close::after{
     content:"";
     position:absolute;
     left:50%;
     top:50%;
     width:17px;
     height:1.5px;
     background:currentColor;
     border-radius:999px;
     transform-origin:center;
   }
   .case-panel-nav .panel-close::before{transform:translate(-50%,-50%) rotate(45deg);}
   .case-panel-nav .panel-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
   
   .case-panel-intro{
     padding-bottom:24px;
     border-bottom:1px solid var(--color-border-default);
   }
   .detail-top-badge{
     display:inline-flex;
     align-items:center;
     min-height:26px;
     padding:4px 9px;
     margin-bottom:12px;
     color:var(--color-primary-active);
     background:var(--color-primary-light);
     border-radius:var(--radius-full);
     font-size:12px;
     font-weight:700;
     line-height:1;
   }
   .case-panel-intro h3{
     margin:0 0 8px;
     color:var(--color-text-primary);
     font-size:22px;
     font-weight:700;
     line-height:1.45;
     letter-spacing:-.025em;
     word-break:keep-all;
   }
   .case-panel-company{
     margin:0 0 12px;
     color:var(--color-text-tertiary);
     font-size:14px;
     line-height:1.5;
   }
   .case-panel-meta{
     display:flex;
     flex-wrap:wrap;
     align-items:center;
     gap:6px;
     margin:0 0 18px;
     color:var(--color-text-secondary);
     font-size:13px;
     font-weight:500;
     line-height:1.5;
   }
   .case-panel-meta i{
     color:var(--color-border-strong);
     font-style:normal;
     font-weight:400;
   }
   .case-panel-actions{
     display:grid;
     grid-template-columns:auto auto minmax(0,1fr);
     gap:8px;
   }
   .detail-action-btn{
     min-height:38px;
     padding:0 12px;
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:6px;
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-sm);
     box-shadow:none;
     font-family:inherit;
     font-size:13px;
     font-weight:600;
     line-height:1;
     white-space:nowrap;
   }
   .detail-action-btn:hover:not(:disabled){
     color:var(--color-text-primary);
     background:var(--color-bg-subtle);
     border-color:var(--color-border-strong);
   }
   .detail-action-btn:disabled{
     color:var(--color-text-disabled);
     background:var(--color-bg-subtle);
     cursor:not-allowed;
   }
   .case-panel-actions .panel-bookmark,
   .case-panel-actions .panel-compare{
     width:auto;
     height:auto;
     min-height:38px;
     margin:0;
     padding:0 12px;
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-sm);
     box-shadow:none;
     font-size:13px;
     font-weight:600;
   }
   .case-panel-actions .panel-bookmark svg{
     width:16px;
     height:16px;
     padding:0;
     fill:none;
     stroke:currentColor;
     stroke-width:1.7;
   }
   .case-panel-actions .panel-bookmark.active{
     color:var(--color-primary);
     background:var(--color-bg-page);
     border-color:var(--color-primary);
   }
   .case-panel-actions .panel-compare.selected{
     color:var(--color-text-primary);
     background:var(--color-bg-muted);
     border-color:var(--color-border-strong);
   }
   
   .case-panel-sections{
     flex:0 0 auto;
   }
   .detail-section{
     padding:24px 0;
     margin:0;
     border:0;
     border-bottom:1px solid var(--color-border-default);
     background:transparent;
     border-radius:0;
   }
   .detail-section h4,
   .detail-section-heading h4{
     margin:0 0 9px;
     color:var(--color-text-primary);
     font-size:15px;
     font-weight:700;
     line-height:1.45;
   }
   .detail-section p{
     margin:0;
     color:var(--color-text-secondary);
     font-size:15px;
     line-height:1.72;
     word-break:keep-all;
   }
   
   .detail-ai-section{
     display:grid;
     grid-template-columns:128px minmax(0,1fr);
     gap:24px;
     margin-top:22px;
     padding:20px;
     background:var(--color-bg-subtle);
     border:0;
     border-radius:var(--radius-md);
   }
   .detail-ai-score{
     border-right:1px solid var(--color-border-default);
   }
   .detail-ai-score span{
     display:block;
     margin-bottom:7px;
     color:var(--color-text-tertiary);
     font-size:13px;
     font-weight:600;
     line-height:1.4;
   }
   .detail-ai-score strong{
     display:block;
     color:var(--color-text-primary);
     font-size:34px;
     font-weight:700;
     line-height:1;
     letter-spacing:-.04em;
     font-variant-numeric:tabular-nums;
   }
   .detail-ai-reason h4{margin-bottom:7px;}
   .detail-ai-reason p{font-size:14px;line-height:1.7;}
   
   .detail-section-heading{
     display:flex;
     align-items:center;
     gap:8px;
     margin-bottom:9px;
   }
   .detail-section-heading h4{margin:0;}
   .subscriber-badge{
     display:inline-flex;
     align-items:center;
     min-height:23px;
     padding:3px 8px;
     color:var(--color-text-secondary);
     background:var(--color-bg-muted);
     border-radius:var(--radius-full);
     font-size:11px;
     font-weight:600;
     line-height:1;
   }
   .detail-strategy-section{
     border-bottom:0;
   }
   .detail-strategy-btn{
     min-height:42px;
     margin-top:14px;
     padding:0 16px;
     color:var(--color-primary);
     background:var(--color-bg-page);
     border:1px solid var(--color-primary);
     border-radius:var(--radius-sm);
     font-family:inherit;
     font-size:14px;
     font-weight:600;
   }
   .detail-strategy-btn:hover{
     color:var(--color-primary-hover);
     border-color:var(--color-primary-hover);
     background:var(--color-primary-light);
   }
   .detail-strategy-btn.primary{
     color:#fff;
     background:var(--color-primary);
     border-color:var(--color-primary);
   }
   .detail-strategy-btn.primary:hover{
     color:#fff;
     background:var(--color-primary-hover);
     border-color:var(--color-primary-hover);
   }
   
   .detail-footer-actions{
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:10px;
     margin-top:auto;
     padding-top:24px;
     border-top:1px solid var(--color-border-default);
   }
   .detail-footer-actions.single{grid-template-columns:1fr;}
   .detail-footer-btn{
     min-height:46px;
     padding:0 14px;
     display:flex;
     align-items:center;
     justify-content:center;
     gap:6px;
     border-radius:var(--radius-sm);
     font-family:inherit;
     font-size:14px;
     font-weight:600;
     line-height:1;
   }
   .detail-footer-btn.primary{
     color:#fff;
     background:var(--color-primary);
     border:1px solid var(--color-primary);
   }
   .detail-footer-btn.primary:hover:not(:disabled){
     background:var(--color-primary-hover);
     border-color:var(--color-primary-hover);
   }
   .detail-footer-btn.secondary{
     color:var(--color-text-primary);
     background:#fff;
     border:1px solid var(--color-border-strong);
   }
   .detail-footer-btn.secondary:hover{
     color:var(--color-text-primary);
     background:var(--color-bg-subtle);
     border-color:var(--color-text-tertiary);
   }
   .detail-footer-btn:disabled{
     color:var(--color-text-disabled);
     background:var(--color-bg-muted);
     border-color:var(--color-border-default);
     cursor:not-allowed;
   }
   
   @media(max-width:767px){
     .drawer#detailDialog{top:64px;height:calc(100vh - 64px);}
     .case-panel{padding:0 20px 24px;}
     .case-panel-nav{margin:0 -20px 20px;padding:0 14px 0 20px;}
     .case-panel-intro h3{font-size:20px;}
     .case-panel-actions{grid-template-columns:1fr 1fr;}
     .case-panel-actions .detail-action-btn:last-child{grid-column:1 / -1;}
     .detail-ai-section{grid-template-columns:1fr;gap:14px;padding:18px;}
     .detail-ai-score{padding:0 0 14px;border-right:0;border-bottom:1px solid var(--color-border-default);}
     .detail-ai-score strong{font-size:30px;}
     .detail-footer-actions{grid-template-columns:1fr;}
   }
   
   /* =========================================================
      v22 — Detail CTA hierarchy refinement
      ========================================================= */
   /* 맞춤 전략 CTA는 상세 본문의 보조 행동으로 한 단계 컴팩트하게 */
   .detail-strategy-btn,
   .detail-strategy-btn.primary{
     min-height:38px;
     margin-top:12px;
     padding:0 14px;
     font-size:13px;
   }
   
   /* 하단 원문 CTA: filled primary가 아닌 orange outline */
   .detail-footer-btn.primary{
     color:var(--color-primary);
     background:var(--color-bg-page);
     border:1px solid var(--color-primary);
   }
   .detail-footer-btn.primary:hover:not(:disabled){
     color:var(--color-primary-hover);
     background:var(--color-primary-light);
     border-color:var(--color-primary-hover);
   }
   .detail-footer-btn.primary:active:not(:disabled){
     color:var(--color-primary-active);
     background:var(--color-bg-page);
     border-color:var(--color-primary-active);
   }
   
   
   /* =========================================================
      v24 — Detail subscriber actions / empty company cleanup
      ========================================================= */
   .case-panel-action-group{
     display:flex;
     align-items:center;
     gap:10px;
   }
   .subscriber-action-label{
     flex:0 0 auto;
     padding-right:10px;
     color:var(--color-text-tertiary);
     border-right:1px solid var(--color-border-default);
     font-size:12px;
     font-weight:600;
     line-height:1;
     white-space:nowrap;
   }
   .case-panel-action-group .case-panel-actions{
     flex:1 1 auto;
     min-width:0;
   }
   
   @media(max-width:767px){
     .case-panel-action-group{
       align-items:flex-start;
       flex-direction:column;
       gap:8px;
     }
     .subscriber-action-label{
       padding-right:0;
       border-right:0;
     }
     .case-panel-action-group .case-panel-actions{
       width:100%;
     }
   }
   
   
   /* =========================================================
      v25 · Personal strategy modal
      DBR UI Foundation alignment + form/result view cleanup
      ========================================================= */
   #strategyDialog.strategy-modal{
     width:min(680px,calc(100% - 32px));
     max-height:min(88vh,860px);
     overflow:hidden;
     border:0;
     border-radius:var(--radius-lg);
     background:var(--color-bg-page);
     box-shadow:var(--shadow-floating);
   }
   #strategyDialog.strategy-modal::backdrop{background:rgba(31,31,31,.58);}
   #strategyDialog .close{
     position:absolute;
     z-index:10;
     top:16px;
     right:16px;
     width:32px;
     height:32px;
     min-height:32px;
     display:grid;
     place-items:center;
     padding:0;
     color:var(--color-text-secondary);
     background:transparent;
     border:0;
     border-radius:50%;
     font:400 22px/1 Arial,sans-serif;
   }
   #strategyDialog .close:hover,
   #strategyDialog .close:focus-visible{
     color:var(--color-text-primary);
     background:transparent;
   }
   #strategyDialog .close:focus-visible{outline:2px solid rgba(238,123,26,.24);outline-offset:1px;}
   
   #strategyDialog #strategyContent{
     max-height:min(88vh,860px);
     overflow-y:auto;
     overscroll-behavior:contain;
     scrollbar-gutter:stable;
   }
   #strategyDialog .strategy-dialog-body{padding:32px 36px 36px;}
   #strategyDialog .strategy-dialog-head{
     padding:0 44px 22px 0;
     margin:0 0 22px;
     border-bottom:1px solid var(--color-border-default);
   }
   #strategyDialog .strategy-dialog-head .section-label{
     margin:0 0 8px;
     color:var(--color-primary);
     font-size:12px;
     font-weight:700;
     letter-spacing:.02em;
   }
   #strategyDialog .strategy-dialog-head .section-label span{
     color:var(--color-text-tertiary);
     font-weight:500;
   }
   #strategyDialog .strategy-dialog-head h1{
     margin:0 0 10px;
     color:var(--color-text-primary);
     font-family:Pretendard,"Noto Sans KR",sans-serif;
     font-size:26px;
     font-weight:700;
     line-height:1.35;
     letter-spacing:-.025em;
   }
   #strategyDialog .strategy-dialog-head>p:last-child{
     margin:0;
     color:var(--color-text-secondary);
     font-size:14px;
     line-height:1.6;
   }
   
   #strategyDialog .strategy-form{
     display:grid;
     gap:18px;
   }
   #strategyDialog .strategy-form label{
     display:grid;
     gap:8px;
     margin:0;
     color:var(--color-text-primary);
     font-size:14px;
     font-weight:600;
   }
   #strategyDialog .strategy-form label>span{display:block;}
   #strategyDialog .strategy-form input,
   #strategyDialog .strategy-form textarea{
     box-sizing:border-box;
     width:100%;
     margin:0;
     padding:12px 14px;
     color:var(--color-text-primary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
     font-family:inherit;
     font-size:15px;
     font-weight:400;
     line-height:1.6;
     box-shadow:none;
   }
   #strategyDialog .strategy-form input{height:46px;}
   #strategyDialog .strategy-form textarea{
     min-height:92px;
     max-height:180px;
     resize:vertical;
   }
   #strategyDialog .strategy-form input:hover,
   #strategyDialog .strategy-form textarea:hover{border-color:var(--color-border-strong);}
   #strategyDialog .strategy-form input:focus,
   #strategyDialog .strategy-form textarea:focus{
     outline:2px solid rgba(238,123,26,.18);
     outline-offset:0;
     border-color:var(--color-primary);
   }
   #strategyDialog .strategy-form-actions{
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:12px;
     padding-top:4px;
   }
   #strategyDialog .strategy-form-actions .back-button,
   #strategyDialog .strategy-form-actions .primary{
     float:none;
     margin:0;
     min-height:42px;
     padding:9px 18px;
     border-radius:var(--radius-sm);
     font-size:14px;
     font-weight:600;
   }
   #strategyDialog .strategy-form-actions .back-button{
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-strong);
   }
   #strategyDialog .strategy-form-actions .back-button:hover{
     color:var(--color-text-primary);
     border-color:var(--color-text-tertiary);
     background:var(--color-bg-page);
   }
   
   #strategyDialog .strategy-results{
     clear:none;
     padding:0;
   }
   #strategyDialog .strategy-article{
     margin:0;
     padding:0;
     border:0;
     border-radius:0;
   }
   #strategyDialog .strategy-article+h2,
   #strategyDialog .strategy-article>h2{
     margin:0 0 12px;
     color:var(--color-text-primary);
     font-size:15px;
     font-weight:700;
     line-height:1.5;
   }
   #strategyDialog .strategy-box{
     margin:0;
     padding:16px;
     background:var(--color-bg-subtle);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
   }
   #strategyDialog .strategy-grid{
     display:grid;
     grid-template-columns:repeat(2,minmax(0,1fr));
     gap:10px;
   }
   #strategyDialog .strategy-section{
     min-width:0;
     padding:14px 15px;
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-sm);
   }
   #strategyDialog .strategy-section h3{
     margin:0 0 9px;
     color:var(--color-text-primary);
     font-size:13px;
     font-weight:700;
     line-height:1.45;
   }
   #strategyDialog .strategy-section ul,
   #strategyDialog .strategy-section ol{
     margin:0;
     padding-left:18px;
     color:var(--color-text-secondary);
     font-size:13px;
     line-height:1.7;
   }
   #strategyDialog .strategy-section li+li{margin-top:3px;}
   #strategyDialog .strategy-result-view .strategy-dialog-head{margin-bottom:18px;}
   #strategyDialog .strategy-result-actions{
     display:flex;
     justify-content:flex-end;
     gap:8px;
     margin-top:18px;
     padding-top:18px;
     border-top:1px solid var(--color-border-default);
   }
   #strategyDialog .strategy-result-actions .back-button,
   #strategyDialog .strategy-result-actions .outline{
     min-height:40px;
     margin:0;
     padding:8px 16px;
     border-radius:var(--radius-sm);
     font-size:14px;
     font-weight:600;
   }
   #strategyDialog .strategy-result-actions .back-button{
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-strong);
   }
   #strategyDialog .strategy-result-actions .outline{
     color:var(--color-text-primary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-strong);
   }
   #strategyDialog .result-status{
     padding:16px;
     background:var(--color-bg-subtle);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
   }
   
   @media(max-width:700px){
     #strategyDialog.strategy-modal{
       width:calc(100% - 20px);
       max-height:92vh;
       border-radius:var(--radius-md);
     }
     #strategyDialog #strategyContent{max-height:92vh;}
     #strategyDialog .strategy-dialog-body{padding:26px 20px 24px;}
     #strategyDialog .strategy-dialog-head{padding-right:36px;margin-bottom:18px;padding-bottom:18px;}
     #strategyDialog .strategy-dialog-head h1{font-size:23px;}
     #strategyDialog .strategy-grid{grid-template-columns:1fr;}
     #strategyDialog .strategy-form-actions{align-items:stretch;flex-direction:column-reverse;}
     #strategyDialog .strategy-form-actions .back-button,
     #strategyDialog .strategy-form-actions .primary{width:100%;}
     #strategyDialog .strategy-result-actions{display:grid;grid-template-columns:1fr 1fr;}
     #strategyDialog .strategy-result-actions button{width:100%;}
   }
   
   
   /* v26 · Strategy generation uses inline loading, not a second fullscreen dim layer */
   #strategyDialog #generateStrategy.is-loading{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:8px;
     cursor:wait;
     opacity:.88;
   }
   #strategyDialog .button-spinner{
     width:14px;
     height:14px;
     flex:0 0 14px;
     border:2px solid rgba(255,255,255,.45);
     border-top-color:#fff;
     border-radius:50%;
     animation:strategyButtonSpin .75s linear infinite;
   }
   @keyframes strategyButtonSpin{to{transform:rotate(360deg);}}
   
   
   /* =========================================================
      v28 · Zero-result state
      Single empty-message area; no nested empty card
      ========================================================= */
   .results-column.is-empty{
     overflow:hidden;
     border:1px solid var(--color-border-default)!important;
     border-right:1px solid var(--color-border-default)!important;
     border-bottom:1px solid var(--color-border-default)!important;
   }
   .results-column.is-empty .results-head{
     padding-bottom:0;
   }
   .results-column.is-empty .results-subhead{
     display:block;
     margin:16px 20px 0;
     padding:0 0 24px;
     border-bottom:0;
   }
   .results-column.is-empty .results-subhead p{
     display:grid;
     gap:6px;
     margin:0;
   }
   .results-column.is-empty .results-subhead p strong{
     color:var(--color-text-primary);
     font-size:14px;
     font-weight:600;
     line-height:1.55;
   }
   .results-column.is-empty .results-subhead p span{
     color:var(--color-text-tertiary);
     font-size:13px;
     font-weight:400;
     line-height:1.6;
   }
   .results-column.is-empty .case-list{
     display:none;
   }
   .results-column.is-empty .result-more{
     display:none!important;
   }
   .results-column.is-empty .result-sort[hidden],
   .results-column.is-empty .analysis-link[hidden]{
     display:none!important;
   }
   @media(max-width:767px){
     .results-column.is-empty .results-subhead{
       margin:14px 16px 0;
       padding-bottom:20px;
     }
   }
   
   #compareDialog .compare-empty{
     color:var(--color-text-tertiary);
   }
   
   
   /* =========================================================
      v30 · Compare modal article headers & subscriber actions
      ========================================================= */
   #compareDialog .compare-table thead th:not(:first-child){
     vertical-align:top;
     padding:18px 16px;
   }
   #compareDialog .compare-article-head{
     display:grid;
     grid-template-columns:22px minmax(0,1fr);
     gap:8px;
     align-items:start;
     min-width:0;
     text-align:left;
   }
   #compareDialog .compare-article-head>b{
     color:var(--color-primary);
     font-size:15px;
     font-weight:700;
     line-height:1.45;
   }
   #compareDialog .compare-article-head>div{
     min-width:0;
     display:grid;
     gap:5px;
   }
   #compareDialog .compare-article-head strong{
     color:var(--color-text-primary);
     font-size:14px;
     font-weight:700;
     line-height:1.5;
     word-break:keep-all;
   }
   #compareDialog .compare-article-head span{
     color:var(--color-text-tertiary);
     font-size:12px;
     font-weight:400;
     line-height:1.4;
   }
   #compareDialog .compare-row-label{
     display:flex;
     flex-direction:column;
     align-items:flex-start;
     gap:7px;
     color:var(--color-text-primary);
     font-weight:700;
   }
   #compareDialog .compare-row-label .subscriber-badge{
     display:inline-flex;
     width:max-content;
     min-height:22px;
     align-items:center;
     padding:3px 7px;
     color:var(--color-primary);
     background:var(--color-primary-light);
     border:0;
     border-radius:var(--radius-full);
     font-size:10px;
     font-weight:700;
     line-height:1;
     white-space:nowrap;
   }
   #compareDialog .compare-action-stack{
     display:flex;
     flex-wrap:wrap;
     gap:8px;
   }
   #compareDialog .compare-action-btn{
     min-height:36px;
     margin:0;
     padding:7px 12px;
     border-radius:var(--radius-sm);
     font-family:inherit;
     font-size:12px;
     font-weight:600;
     line-height:1.3;
     white-space:nowrap;
     cursor:pointer;
   }
   #compareDialog .compare-action-btn.primary{
     color:#fff;
     background:var(--color-primary);
     border:1px solid var(--color-primary);
   }
   #compareDialog .compare-action-btn.primary:hover{
     background:var(--color-primary-hover);
     border-color:var(--color-primary-hover);
   }
   #compareDialog .compare-action-btn.primary-outline{
     color:var(--color-primary);
     background:var(--color-bg-page);
     border:1px solid var(--color-primary);
   }
   #compareDialog .compare-action-btn.primary-outline:hover{
     color:var(--color-primary-hover);
     background:var(--color-primary-light);
     border-color:var(--color-primary-hover);
   }
   #compareDialog .compare-action-btn.neutral-outline{
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-strong);
   }
   #compareDialog .compare-action-btn.neutral-outline:hover{
     color:var(--color-text-primary);
     background:var(--color-bg-subtle);
   }
   #compareDialog .compare-empty{
     color:var(--color-text-tertiary);
   }
   @media(max-width:767px){
     #compareDialog .compare-article-head{
       grid-template-columns:18px minmax(0,1fr);
       gap:6px;
     }
     #compareDialog .compare-table thead th:not(:first-child){
       padding:14px 12px;
     }
     #compareDialog .compare-action-stack{
       display:grid;
     }
     #compareDialog .compare-action-btn{
       width:100%;
     }
   }
   
   
   /* =========================================================
      v31 · Compare subscriber badge compact + Strategy 1x4
      ========================================================= */
   
   /* Compare table: subscriber badge neutral + compact row height */
   #compareDialog .compare-row-label{
     gap:4px;
     line-height:1.25;
   }
   #compareDialog .compare-row-label .subscriber-badge{
     min-height:18px;
     padding:2px 6px;
     color:var(--color-text-tertiary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-full);
     font-size:9px;
     font-weight:600;
     line-height:1;
   }
   #compareDialog .compare-table tbody th,
   #compareDialog .compare-table tbody td{
     padding-top:10px;
     padding-bottom:10px;
     vertical-align:middle;
   }
   #compareDialog .compare-table tbody th{
     padding-left:14px;
     padding-right:12px;
   }
   #compareDialog .compare-action-stack{
     gap:6px;
   }
   #compareDialog .compare-action-btn{
     min-height:34px;
     padding:6px 10px;
     font-size:12px;
   }
   
   /* Strategy result: 1 x 4 vertical reading flow */
   #strategyDialog .strategy-box{
     padding:0;
     background:transparent;
     border:0;
     border-radius:0;
   }
   #strategyDialog .strategy-grid{
     display:grid;
     grid-template-columns:1fr;
     gap:0;
     border-top:1px solid var(--color-border-default);
   }
   #strategyDialog .strategy-section{
     display:grid;
     grid-template-columns:150px minmax(0,1fr);
     gap:18px;
     align-items:start;
     padding:18px 0;
     background:transparent;
     border:0;
     border-bottom:1px solid var(--color-border-default);
     border-radius:0;
   }
   #strategyDialog .strategy-section h3{
     margin:0;
     color:var(--color-text-primary);
     font-size:13px;
     font-weight:700;
     line-height:1.55;
   }
   #strategyDialog .strategy-section ul,
   #strategyDialog .strategy-section ol{
     margin:0;
     padding-left:18px;
     color:var(--color-text-secondary);
     font-size:13px;
     line-height:1.75;
   }
   #strategyDialog .strategy-section li+li{
     margin-top:4px;
   }
   #strategyDialog .strategy-results{
     padding:0;
   }
   #strategyDialog .strategy-article>h2{
     margin:0 0 14px;
     font-size:15px;
     line-height:1.55;
   }
   #strategyDialog .strategy-result-actions{
     margin-top:16px;
     padding-top:16px;
   }
   
   @media(max-width:700px){
     #strategyDialog .strategy-section{
       grid-template-columns:1fr;
       gap:8px;
       padding:16px 0;
     }
     #strategyDialog .strategy-section h3{
       font-size:13px;
     }
   }
   
   
   /* =========================================================
      v32 · Strategy result cleanup
      ========================================================= */
   #strategyDialog .strategy-section:last-child{
     border-bottom:0;
   }
   #strategyDialog .strategy-form-actions{
     justify-content:flex-end;
   }
   #strategyDialog .strategy-form-actions .primary{
     margin-left:auto;
   }
   @media(max-width:700px){
     #strategyDialog .strategy-form-actions{
       display:flex;
       flex-direction:row;
       justify-content:flex-end;
     }
     #strategyDialog .strategy-form-actions .primary{
       width:auto;
     }
   }
   
   
   /* =========================================================
      v33 · Map label legibility + linked-list hover state
      ========================================================= */
   #caseMap [data-map-detail] .map-node-label{
     paint-order:stroke fill;
     stroke:#fff;
     stroke-width:4px;
     stroke-linejoin:round;
     stroke-opacity:.96;
   }
   #caseMap [data-map-detail].list-linked .map-link-halo{
     fill:#2563eb!important;
     fill-opacity:.16!important;
     stroke:none!important;
     opacity:1!important;
   }
   #caseMap [data-map-detail].list-linked .map-node-label{
     fill:var(--color-primary)!important;
     stroke:#fff!important;
     stroke-width:4px!important;
     font-weight:850!important;
   }
   
   
   /* =========================================================
      Compare modal · Compact subscriber action row
      ========================================================= */
   #compareDialog .compare-subscriber-actions{
     display:flex;
     flex-wrap:nowrap;
     align-items:center;
     gap:6px;
   }
   #compareDialog .compare-subscriber-actions .compare-action-btn{
     flex:0 0 auto;
     min-height:32px;
     padding:5px 9px;
     font-size:11px;
     line-height:1.2;
   }
   #compareDialog .compare-table tbody tr:last-child th,
   #compareDialog .compare-table tbody tr:last-child td{
     padding-top:9px;
     padding-bottom:9px;
   }
   @media(max-width:767px){
     #compareDialog .compare-subscriber-actions{
       display:flex;
       flex-wrap:wrap;
     }
     #compareDialog .compare-subscriber-actions .compare-action-btn{
       width:auto;
     }
   }
   
   /* =========================================================
      v36 · Recent cases library hierarchy + lifecycle
      ========================================================= */
   .library-view{
     width:min(1000px,100%);
     margin:0 auto;
     padding:48px 32px 80px;
   }
   .library-page-head{
     display:flex;
     align-items:flex-end;
     justify-content:space-between;
     gap:24px;
     padding:0;
     border:0;
   }
   .library-page-head .section-label{
     margin:0 0 8px;
     color:var(--color-primary);
     font-size:12px;
     font-weight:700;
     letter-spacing:.08em;
   }
   .library-page-head h1{
     margin:0;
     color:var(--color-text-primary);
     font-family:var(--font-family-base);
     font-size:30px;
     font-weight:700;
     line-height:1.3;
     letter-spacing:-.03em;
   }
   .library-page-head .back-button{
     min-height:40px;
     padding:8px 14px;
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-strong);
     border-radius:var(--radius-sm);
     font-size:13px;
     font-weight:600;
   }
   .library-description{
     margin:12px 0 24px;
     color:var(--color-text-secondary);
     font-size:14px;
     line-height:1.6;
   }
   .history-tabs{
     display:flex;
     gap:28px;
     margin:0 0 28px;
     padding:0;
     border-bottom:1px solid var(--color-border-default);
   }
   .history-tabs a{
     position:relative;
     padding:0 2px 12px;
     color:var(--color-text-secondary);
     font-size:14px;
     font-weight:600;
     text-decoration:none;
   }
   .history-tabs a:hover{color:var(--color-text-primary);}
   .history-tabs a[aria-current]{color:var(--color-text-primary);font-weight:700;}
   .history-tabs a[aria-current]::after{
     content:"";
     position:absolute;
     left:0;right:0;bottom:-1px;
     height:2px;
     background:var(--color-primary);
   }
   .library-group{
     margin:0 0 20px;
     overflow:hidden;
     background:var(--color-bg-page);
     border:1px solid var(--color-border-default);
     border-radius:var(--radius-md);
   }
   .library-group-head{
     display:flex;
     align-items:flex-start;
     justify-content:space-between;
     gap:24px;
     padding:16px 18px;
     background:var(--color-bg-subtle);
     border-bottom:1px solid var(--color-border-default);
   }
   .library-query{min-width:0;}
   .library-query-label{
     display:block;
     margin-bottom:5px;
     color:var(--color-text-tertiary);
     font-size:11px;
     font-weight:700;
   }
   .library-group .library-query h3{
     margin:0;
     padding:0;
     color:var(--color-text-primary);
     font-size:14px;
     font-weight:700;
     line-height:1.5;
   }
   .library-query-meta{
     flex:none;
     display:flex;
     align-items:center;
     gap:8px;
     padding-top:2px;
     color:var(--color-text-tertiary);
     font-size:11px;
     white-space:nowrap;
   }
   .library-query-meta time::after{content:"|";margin-left:8px;color:var(--color-border-strong);}
   .library-case-list{background:var(--color-bg-page);}
   .library-item{
     display:grid;
     grid-template-columns:minmax(0,1fr) auto;
     gap:10px;
     align-items:center;
     padding:13px 18px;
     border:0;
     border-bottom:1px solid var(--color-border-default);
   }
   .library-item:last-child{border-bottom:0;}
   .library-item-rank{
     align-self:start;
     padding-top:2px;
     color:var(--color-primary);
     font-size:13px;
     font-weight:700;
   }
   .library-item-main{
     min-width:0;
     padding:0;
     text-align:left;
     color:inherit;
     background:transparent;
     border:0;
   }
   .library-item-main strong{
     display:block;
     color:var(--color-text-primary);
     font-size:13px;
     font-weight:650;
     line-height:1.5;
   }
   .library-item-main small{
     display:block;
     margin-top:4px;
     color:var(--color-text-tertiary);
     font-size:12px;
     line-height:1.4;
   }
   .library-item-main:hover strong{color:var(--color-primary-hover);}
   .library-detail-btn{
     min-height:34px;
     padding:6px 10px;
     color:var(--color-text-secondary);
     background:var(--color-bg-page);
     border:1px solid var(--color-border-strong);
     border-radius:var(--radius-sm);
     font-size:12px;
     font-weight:600;
     white-space:nowrap;
   }
   .library-detail-btn:hover{
     color:var(--color-text-primary);
     background:var(--color-bg-subtle);
   }
   @media(max-width:700px){
     .library-view{padding:32px 18px 64px;}
     .library-page-head{align-items:flex-start;flex-direction:column;gap:16px;}
     .library-description{margin-bottom:20px;}
     .history-tabs{gap:20px;margin-bottom:20px;}
     .library-group-head{display:block;padding:14px 15px;}
     .library-query-meta{margin-top:8px;}
     .library-item{grid-template-columns:minmax(0,1fr);padding:13px 15px;}
     .library-detail-btn{grid-column:1;width:max-content;margin-top:2px;}
   }
   
   
   /* =========================================================
      v37 · Recent cases typography, timestamp, empty state
      ========================================================= */
   .library-page-head .section-label{
     font-size:13px;
   }
   .library-page-head h1{
     font-size:32px;
   }
   .library-page-head .back-button{
     min-height:42px;
     padding:9px 16px;
     font-size:14px;
   }
   .library-description{
     font-size:15px;
   }
   .history-tabs a{
     padding-bottom:13px;
     font-size:15px;
   }
   .library-query-label{
     margin-bottom:6px;
     font-size:13px;
   }
   .library-group .library-query h3{
     font-size:15px;
     line-height:1.55;
   }
   .library-query-meta{
     padding-top:1px;
     font-size:13px;
     line-height:1.5;
   }
   .library-query-meta time::after{
     content:none;
   }
   .library-item-rank{
     font-size:14px;
   }
   .library-item-main strong{
     font-size:14px;
     line-height:1.55;
   }
   .library-item-main small{
     margin-top:5px;
     font-size:13px;
     line-height:1.45;
   }
   .library-detail-btn{
     min-height:36px;
     padding:7px 12px;
     font-size:13px;
   }
   
   /* Purpose-built empty state for Recent Cases */
   .library-empty-state{
     display:flex;
     min-height:390px;
     padding:64px 24px;
     box-sizing:border-box;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     color:var(--color-text-secondary);
     text-align:center;
   }
   .library-empty-state .empty-clock{
     position:relative;
     display:block;
     width:72px;
     height:72px;
     margin:0 0 28px;
     box-sizing:border-box;
     border:5px solid var(--color-border-strong);
     border-right-color:transparent;
     border-radius:50%;
     opacity:.75;
   }
   .library-empty-state .empty-clock::before{
     content:"";
     position:absolute;
     left:31px;
     top:15px;
     width:5px;
     height:23px;
     background:var(--color-border-strong);
     border-radius:3px;
     transform-origin:50% 100%;
   }
   .library-empty-state .empty-clock::after{
     content:"";
     position:absolute;
     left:32px;
     top:34px;
     width:20px;
     height:5px;
     background:var(--color-border-strong);
     border-radius:3px;
     transform:rotate(28deg);
     transform-origin:0 50%;
   }
   .library-empty-state b{
     margin:0 0 12px;
     color:var(--color-text-primary);
     font-size:22px;
     font-weight:700;
     line-height:1.4;
   }
   .library-empty-state>b+span{
     display:block;
     margin:0 0 28px;
     color:var(--color-text-secondary);
     font-size:15px;
     line-height:1.6;
   }
   .library-empty-state .primary{
     min-height:44px;
     padding:10px 20px;
     border-radius:var(--radius-sm);
     font-size:15px;
     font-weight:700;
   }
   
   @media(max-width:700px){
     .library-page-head h1{font-size:28px;}
     .library-empty-state{
       min-height:330px;
       padding:48px 20px;
     }
     .library-empty-state b{font-size:20px;}
   }
   
   /* =========================================================
      v39 · Mobile optimization
      PC/base styles remain unchanged. Mobile-only UX layer.
      ========================================================= */
   @media(max-width:767px){
     /* Touch targets: preserve compact visual language, enlarge interaction area. */
     .map-controls button,
     .case-panel-nav-btn,
     .panel-close,
     .mode-help{
       min-width:44px;
       min-height:44px;
     }
   
     /* Results + map */
     .results-shell{gap:16px;}
     .results-shell .map-card{position:static;top:auto;}
     .map-card{padding:16px;}
     .map-title-row{gap:10px;}
     .map-tabs button{min-height:42px;}
     .map-stage{
       height:min(72vh,520px);
       min-height:430px;
     }
     .map-controls button{width:44px;height:44px;}
     .map-controls span{min-width:44px;padding:7px 0;}
     .zoom-hint{font-size:12px;line-height:1.45;}
   
     /* Detail becomes a mobile full-width reading surface.
        Existing sticky navigation remains in place. */
     .drawer#detailDialog{
       top:64px;
       width:100%;
       max-width:none;
       height:calc(100dvh - 64px);
     }
     .case-panel{padding:0 18px 28px;}
     .case-panel-nav{
       margin:0 -18px 18px;
       padding:0 10px 0 18px;
     }
     .case-panel-intro h3{font-size:20px;line-height:1.4;}
     .case-panel-action-group{
       display:flex;
       flex-direction:row;
       align-items:center;
       gap:8px;
       min-width:0;
       overflow:hidden;
     }
     .subscriber-action-label{
       flex:0 0 auto;
       padding-right:8px;
       border-right:1px solid var(--color-border-default);
       font-size:11px;
     }
     .case-panel-action-group .case-panel-actions{
       width:auto;
       flex:1 1 auto;
       display:flex;
       align-items:center;
       gap:4px;
       min-width:0;
     }
     .case-panel-actions .panel-bookmark{
       position:relative;
       flex:0 0 40px;
       width:40px;
       min-width:40px;
       height:40px;
       min-height:40px;
       padding:0;
       border-color:transparent;
       background:transparent;
     }
     .case-panel-actions .panel-bookmark span{display:none;}
     .case-panel-actions .panel-bookmark svg{width:19px;height:19px;}
     .case-panel-actions .panel-compare{
       flex:0 0 auto;
       min-height:40px;
       padding:0 8px;
       border-color:transparent;
       background:transparent;
       font-size:12px;
     }
     .case-panel-actions .panel-compare:hover,
     .case-panel-actions .panel-compare.selected{
       background:transparent;
     }
     .case-panel-actions .detail-action-btn:last-child{
       flex:1 1 auto;
       min-width:0;
       min-height:40px;
       padding:0 8px;
       grid-column:auto;
       overflow:hidden;
       text-overflow:ellipsis;
       font-size:12px;
     }
     .detail-ai-section{grid-template-columns:1fr;gap:14px;padding:18px 0;}
     .detail-ai-score{padding:0 0 14px;border-right:0;border-bottom:1px solid var(--color-border-default);}
     .detail-ai-score strong{font-size:30px;}
     .detail-footer-actions{grid-template-columns:1fr 1fr;gap:8px;}
     .detail-footer-btn{min-height:44px;padding-inline:10px;font-size:13px;}
   
     /* Compare: keep horizontal scrolling and deliberately expose the next case column. */
     #compareDialog .compare-dialog-shell{max-height:96dvh;}
     #compareDialog .compare-dialog-head{padding:20px 52px 14px 16px;}
     #compareDialog .compare-dialog-scroll{
       overflow:auto;
       overscroll-behavior:contain;
       -webkit-overflow-scrolling:touch;
     }
     #compareDialog .compare-table-wrap{
       width:100%;
       overflow:visible;
     }
     #compareDialog .compare-table{
       width:max-content;
       min-width:0;
       table-layout:fixed;
     }
     #compareDialog .compare-table th:first-child{
       width:92px;
       min-width:92px;
     }
     #compareDialog .compare-table thead th:not(:first-child),
     #compareDialog .compare-table td{
       width:72vw;
       min-width:72vw;
       max-width:72vw;
     }
     #compareDialog .compare-table th:first-child{
       position:sticky;
       left:0;
       z-index:3;
       background:var(--color-bg-muted);
     }
     #compareDialog .compare-table thead th:first-child{z-index:5;}
     #compareDialog .compare-subscriber-actions{flex-wrap:wrap;gap:5px;}
     #compareDialog .compare-subscriber-actions .compare-action-btn{
       min-height:40px;
       padding:7px 9px;
     }
   
     /* Personal strategy: mobile full-screen dialog. */
     #strategyDialog.strategy-modal{
       width:100vw;
       max-width:none;
       height:100dvh;
       max-height:100dvh;
       margin:0;
       padding:0;
       border-radius:0;
     }
     #strategyDialog #strategyContent{
       width:100%;
       height:100dvh;
       max-height:100dvh;
       overflow-y:auto;
       scrollbar-gutter:auto;
     }
     #strategyDialog .close{
       position:fixed;
       top:10px;
       right:10px;
       width:44px;
       height:44px;
       min-height:44px;
     }
     #strategyDialog .strategy-dialog-body{
       min-height:100%;
       padding:24px 18px 32px;
     }
     #strategyDialog .strategy-dialog-head{
       padding:8px 42px 18px 0;
       margin-bottom:18px;
     }
     #strategyDialog .strategy-dialog-head h1{font-size:22px;}
     #strategyDialog .strategy-form{gap:16px;}
     #strategyDialog .strategy-form input{height:46px;}
     #strategyDialog .strategy-form textarea{min-height:96px;}
     #strategyDialog .strategy-form-actions{
       display:flex;
       flex-direction:row;
       justify-content:flex-end;
       padding-top:8px;
     }
     #strategyDialog .strategy-form-actions .primary{
       width:auto;
       min-height:44px;
     }
     #strategyDialog .strategy-results{
       margin-top:18px;
     }
     #strategyDialog .result-status{
       margin-top:12px;
       padding:16px;
     }
     #strategyDialog .result-status .back-button{
       min-height:42px;
       margin-top:12px;
     }
     #strategyDialog .strategy-result-actions{
       grid-template-columns:1fr 1fr;
       gap:8px;
     }
     #strategyDialog .strategy-result-actions button{min-height:44px;}
   
     /* Recent cases: row itself is the mobile entry point. */
     .library-item{
       grid-template-columns:minmax(0,1fr);
       gap:8px;
       padding:14px 15px;
     }
     .library-item-main{
       position:relative;
       width:100%;
       min-height:44px;
       padding:4px 28px 4px 0;
     }
     .library-item-main::after{
       content:"›";
       position:absolute;
       top:50%;
       right:2px;
       transform:translateY(-50%);
       color:var(--color-text-tertiary);
       font-size:22px;
       font-weight:400;
     }
     .library-detail-btn{display:none;}
   }
   
   @media(max-width:390px){
     .case-panel{padding-inline:16px;}
     .case-panel-nav{margin-inline:-16px;padding-left:16px;}
     .subscriber-action-label{font-size:10px;padding-right:6px;}
     .case-panel-action-group{gap:5px;}
     .case-panel-actions .panel-bookmark{flex-basis:38px;width:38px;min-width:38px;}
     .case-panel-actions .panel-compare,
     .case-panel-actions .detail-action-btn:last-child{font-size:11px;padding-inline:6px;}
     #compareDialog .compare-table th:first-child{width:84px;min-width:84px;}
     #compareDialog .compare-table thead th:not(:first-child),
     #compareDialog .compare-table td{width:74vw;min-width:74vw;max-width:74vw;}
   }
   
   @media(max-width:359px){
     .subscriber-action-label{display:none;}
     .case-panel-actions .panel-compare{padding-inline:5px;}
     .case-panel-actions .detail-action-btn:last-child{padding-inline:5px;}
     .map-stage{min-height:400px;}
   }
   
   /* =========================================================
      v39.4 · Mobile QA round 1
      All rules in this block are mobile-only.
      ========================================================= */
   @media(max-width:767px){
     /* 1. Search-mode info icons: keep a true circle; do not inherit global 44px button width. */
     .search-main .mode-tabs .mode-help{
       box-sizing:border-box;
       width:20px!important;
       min-width:20px!important;
       height:20px!important;
       min-height:20px!important;
       aspect-ratio:1 / 1;
       padding:0!important;
       line-height:18px!important;
       border-radius:50%!important;
     }
   
     /* 2. Result count + AI info stay on one row. On mobile the AI control is icon-only. */
     .results-head{
       flex-direction:row!important;
       align-items:center!important;
       justify-content:space-between;
       gap:8px;
       padding:18px 16px 0;
     }
     .results-head h2{min-width:0;white-space:nowrap;}
     .results-head .analysis-link{
       flex:0 0 44px;
       width:44px;
       min-width:44px;
       height:44px;
       min-height:44px;
       padding:0;
       display:grid;
       place-items:center;
       font-size:0;
     }
     .results-head .analysis-info{
       width:18px;
       height:18px;
       font-size:11px;
     }
   
     /* 3. Result row = rank | title/meta | bookmark. Compare is mobile-hidden. */
     .case-card{
       grid-template-columns:22px minmax(0,1fr) 40px!important;
       gap:8px!important;
       align-items:start;
       min-height:0;
       padding:14px 8px!important;
     }
     .case-card-main{grid-column:2;grid-row:1;}
     .case-actions{
       grid-column:3!important;
       grid-row:1;
       align-self:start;
       justify-self:end;
       margin:0!important;
       padding:0!important;
     }
     .case-actions .case-add{display:none!important;}
     .case-actions .icon-bookmark{
       width:40px!important;
       min-width:40px!important;
       height:40px!important;
       min-height:40px!important;
       padding:9px!important;
       background:transparent!important;
       border:0!important;
     }
   
     /* 4. Desktop interaction hint is not useful on touch/mobile. */
     .zoom-hint{display:none!important;}
   
     /* 5. Detail subscriber actions: always text-light, borderless compact controls. */
     .case-panel-action-group{
       flex-direction:row!important;
       align-items:center!important;
       overflow:visible;
     }
     .case-panel-action-group .case-panel-actions{
       display:flex!important;
       grid-template-columns:none!important;
       align-items:center;
       gap:2px;
     }
     .case-panel-actions .panel-bookmark{
       flex:0 0 40px!important;
       width:40px!important;
       min-width:40px!important;
       height:40px!important;
       min-height:40px!important;
       padding:0!important;
       background:transparent!important;
       border:0!important;
       border-radius:0!important;
     }
     .case-panel-actions .panel-bookmark.active{
       background:transparent!important;
       border:0!important;
     }
     .case-panel-actions .panel-bookmark span{display:none!important;}
     .case-panel-actions .panel-compare,
     .case-panel-actions .panel-compare.selected{
       flex:0 0 auto;
       min-width:auto!important;
       min-height:40px!important;
       height:40px!important;
       padding:0 6px!important;
       color:var(--color-text-secondary)!important;
       background:transparent!important;
       border:0!important;
       border-radius:0!important;
       box-shadow:none!important;
       font-size:12px!important;
     }
     .case-panel-actions .detail-action-btn:last-child{
       flex:0 1 auto;
       width:auto!important;
       min-width:0!important;
       min-height:40px!important;
       height:40px!important;
       padding:0 8px!important;
       background:var(--color-bg-page)!important;
       border:1px solid var(--color-border-default)!important;
       border-radius:var(--radius-sm)!important;
       font-size:12px!important;
     }
   
     /* 6. AI similarity block needs internal side padding. */
     .detail-ai-section{
       margin-left:0;
       margin-right:0;
       padding:18px!important;
     }
   
     /* 8. Mobile node click goes straight to detail; never flash the hover tooltip. */
     #mapTooltip{display:none!important;}
   
     /* 9. Mobile result order: map first, text list second. */
     .results-shell{
       display:flex!important;
       flex-direction:column;
       gap:16px;
     }
     .results-shell .map-card{order:1;}
     .results-shell .results-column{order:2;}
   
     /* 10. Compare tray must sit above the detail drawer. */
     .compare-bar{z-index:260!important;}
   
     /* 11. Compare becomes a full-screen mobile modal.
        Sticky first column is fully opaque and shifted 1px left to prevent scroll bleed. */
     #compareDialog{
       width:100vw!important;
       max-width:none!important;
       height:100dvh!important;
       max-height:100dvh!important;
       margin:0!important;
       padding:0!important;
       border-radius:0!important;
     }
     #compareDialog .compare-dialog-shell{
       width:100%;
       height:100dvh;
       max-height:100dvh;
       border-radius:0;
     }
     #compareDialog .compare-dialog-head{
       padding:20px 52px 14px 16px;
     }
     #compareDialog .compare-dialog-scroll{
       flex:1 1 auto;
       width:100%;
       min-height:0;
       overflow:auto;
       scrollbar-gutter:auto;
     }
     #compareDialog .compare-table th:first-child{
       left:-1px!important;
       z-index:4;
       background:#F1F3F5!important;
       box-shadow:1px 0 0 var(--color-border-default);
       background-clip:padding-box;
     }
     #compareDialog .compare-table thead th:first-child{z-index:6;}
   
     /* 12. Recent cases: compact icon-only back action beside title. */
     .library-page-head{
       width:100%;
       display:flex!important;
       flex-direction:row!important;
       align-items:flex-end!important;
       justify-content:space-between;
       gap:12px;
     }
     .library-page-head>div{min-width:0;}
     .library-page-head .library-back{
       flex:0 0 44px;
       width:44px;
       min-width:44px;
       height:44px;
       min-height:44px;
       margin:0;
       padding:0!important;
       display:grid;
       place-items:center;
       color:var(--color-text-secondary);
       background:transparent;
       border:0;
       border-radius:50%;
       font-size:20px;
     }
     .library-page-head .library-back-label{display:none;}
   }
   
   @media(max-width:390px){
     .case-panel-actions .panel-compare,
     .case-panel-actions .detail-action-btn:last-child{font-size:11px!important;}
   }
   
   
   /* v39.7 · compare tray close is mobile-only */
   .compare-bar .compare-bar-close{display:none;}
   
   /* v39.5 · mobile detail / compare tray QA */
   @media(max-width:767px){
     .compare-bar{position:fixed;}
     .compare-bar .compare-reset{display:none!important;}
     .compare-bar .compare-bar-close{
       position:absolute;z-index:2;top:12px;right:12px;
       width:32px;min-width:32px;height:32px;min-height:32px;padding:0;
       display:block;color:#fff;background:transparent!important;border:0!important;border-radius:0;
     }
     .compare-bar .compare-bar-close::before,
     .compare-bar .compare-bar-close::after{
       content:"";position:absolute;top:15px;left:8px;width:16px;height:1.5px;
       background:currentColor;border-radius:2px;
     }
     .compare-bar .compare-bar-close::before{transform:rotate(45deg);}
     .compare-bar .compare-bar-close::after{transform:rotate(-45deg);}
     .drawer#detailDialog .case-panel{padding-bottom:120px!important;}
   }
   
   @media(max-width:767px){.compare-bar>div:first-of-type{padding-right:36px;}}
   
/* =========================================================
   06. Case Solution — Service Introduction
   Uses the existing Case Solution design tokens.
   ========================================================= */
.about-view{width:min(calc(100% - 64px),var(--layout-max-width));margin:0 auto;padding:56px 0 80px;}
.about-view .ab-page{width:min(100%,1000px);margin:0 auto;padding:0;}
.about-view .ab-section{padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid var(--color-border-default);}
.about-view .ab-section--last{padding-bottom:0;margin-bottom:0;border-bottom:0;}
.about-view .ab-label{margin:0 0 10px;color:var(--color-primary);font-size:14px;font-weight:700;letter-spacing:.04em;}
.about-view .ab-title{margin:0 0 12px;color:var(--color-text-primary);font-family:var(--font-family-base);font-size:28px;font-weight:700;line-height:1.35;letter-spacing:-.035em;}
.about-view .ab-title--lead{font-size:34px;}
.about-view .ab-desc{max-width:800px;margin:0;color:var(--color-text-secondary);font-size:16px;line-height:1.75;}
.about-view .ab-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;row-gap:48px;margin-top:32px;}
.about-view .ab-guide-card{position:relative;min-width:0;background:transparent;}
.about-view .ab-guide-card:nth-child(1)::after,.about-view .ab-guide-card:nth-child(2)::after,.about-view .ab-guide-card:nth-child(4)::after,.about-view .ab-guide-card:nth-child(5)::after{content:"→";position:absolute;z-index:2;top:calc((100% - 74px) * .5);right:-22px;display:grid;place-items:center;width:16px;height:24px;color:var(--color-primary);font-size:18px;font-weight:500;line-height:1;background:var(--color-bg-page);}
.about-view .ab-guide-shot{overflow:hidden;aspect-ratio:25/16;background:var(--color-bg-subtle);border:1px solid var(--color-border-default);border-radius:var(--radius-md);}
.about-view .ab-guide-shot img{display:block;width:100%;height:100%;object-fit:cover;}
.about-view .ab-guide-copy{display:block;padding:16px 2px 0;}
.about-view .ab-guide-no{display:block;margin-bottom:5px;color:var(--color-primary);font-size:13px;font-weight:800;line-height:1.35;letter-spacing:.04em;}
.about-view .ab-guide-copy h3{margin:0;color:var(--color-text-primary);font-size:18px;font-weight:700;line-height:1.45;letter-spacing:-.02em;}
.about-view .ab-guide-copy p{margin:5px 0 0;color:var(--color-text-secondary);font-size:14px;line-height:1.6;}
.about-view .ab-feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;}
.about-view .ab-feat-card{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-page);}
.about-view .ab-feat-icon{display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;color:var(--color-primary);background:var(--color-primary-light);border-radius:var(--radius-md);}
.about-view .ab-feat-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.about-view .ab-feat-title{margin-bottom:5px;color:var(--color-text-primary);font-size:16px;font-weight:700;}
.about-view .ab-access-badge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:var(--radius-full);font-size:11px;font-weight:600;line-height:1.4;vertical-align:2px;white-space:nowrap;}
.about-view .ab-access-badge--subscriber{color:var(--color-primary-active);background:var(--color-primary-light);}
.about-view .ab-access-badge--member{color:var(--color-text-secondary);background:var(--color-bg-muted);}
.about-view .ab-feat-desc{color:var(--color-text-secondary);font-size:14px;line-height:1.65;}
.about-view .ab-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;}
.about-view .ab-showcase-card{overflow:hidden;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-page);}
.about-view .ab-showcase-input{padding:14px 16px;background:var(--color-bg-subtle);border-bottom:1px solid var(--color-border-default);}
.about-view .ab-showcase-input-badge{margin-bottom:6px;color:var(--color-primary);font-size:12px;font-weight:700;letter-spacing:.02em;}
.about-view .ab-showcase-input-text{color:var(--color-text-secondary);font-size:15px;line-height:1.55;}
.about-view .ab-showcase-apply{display:grid;grid-template-columns:72px 1fr;gap:6px 10px;color:var(--color-text-secondary);font-size:14px;line-height:1.55;}
.about-view .ab-showcase-apply-label{color:var(--color-text-tertiary);font-weight:600;}
.about-view .ab-showcase-result{padding:14px 16px;}
.about-view .ab-showcase-result-badge{margin-bottom:8px;color:var(--color-text-tertiary);font-size:12px;letter-spacing:.02em;}
.about-view .ab-case-chip{display:inline-block;margin:2px 3px 2px 0;padding:4px 10px;color:var(--color-primary-active);background:var(--color-primary-light);border-radius:var(--radius-full);font-size:13px;}
.about-view .ab-tip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;}
.about-view .ab-tip-card{padding:18px;border-radius:var(--radius-lg);}
.about-view .ab-tip-card--good{background:var(--color-success-bg);border:1px solid #b8dfc3;}
.about-view .ab-tip-card--bad{background:var(--color-error-bg);border:1px solid #efc7c4;}
.about-view .ab-tip-badge{display:inline-block;margin-bottom:12px;padding:3px 9px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;}
.about-view .ab-tip-badge--good{color:var(--color-success);background:#d8efde;}
.about-view .ab-tip-badge--bad{color:var(--color-error);background:#f5d8d5;}
.about-view .ab-tip-item{margin-bottom:6px;color:var(--color-text-secondary);font-size:14px;line-height:1.65;}
.about-view .ab-tip-item:last-child{margin-bottom:0;}
.about-view .ab-faq-card{margin-top:22px;padding:4px 20px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-page);}
.about-view .ab-faq-item{padding:18px 0;border-bottom:1px solid var(--color-border-default);}
.about-view .ab-faq-item:last-child{border-bottom:0;}
.about-view .ab-faq-q{margin-bottom:6px;color:var(--color-text-primary);font-size:16px;font-weight:700;}
.about-view .ab-faq-a{color:var(--color-text-secondary);font-size:15px;line-height:1.65;}
.about-view .ab-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 28px;background:var(--color-bg-page);border:1px solid var(--color-primary);border-radius:var(--radius-lg);}
.about-view .ab-cta-title{color:var(--color-text-primary);font-size:16px;font-weight:700;}
.about-view .ab-cta-btn{padding:11px 20px;color:var(--color-text-inverse);background:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-lg);font-size:15px;font-weight:600;transition:background .18s ease,border-color .18s ease;}
.about-view .ab-cta-btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);}
@media(max-width:1023px){.about-view{width:min(calc(100% - 48px),var(--layout-max-width));}.about-view .ab-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.about-view .ab-guide-card::after{display:none!important;}.about-view .ab-feat-grid,.about-view .ab-showcase-grid,.about-view .ab-tip-grid{grid-template-columns:1fr;}}
@media(max-width:767px){.about-view{width:calc(100% - 40px);padding:40px 0 64px;}.about-view .ab-section{padding-bottom:36px;margin-bottom:36px;}.about-view .ab-title{font-size:25px;}.about-view .ab-title--lead{font-size:30px;}.about-view .ab-desc br{display:none;}.about-view .ab-guide-grid{grid-template-columns:1fr;row-gap:40px;column-gap:0;}.about-view .ab-cta{align-items:flex-start;padding:20px;}.about-view .ab-cta-btn{width:100%;}.about-view .ab-showcase-apply{grid-template-columns:60px 1fr;}}
@media(max-width:359px){.about-view{width:calc(100% - 32px);}}


/* =========================================================
   v40 · Mobile mode tabs + compact case map
   ========================================================= */
.mode-label-mobile{display:none;}

@media(max-width:767px){
  /* Keep both search modes on one row and shorten the apply label on mobile. */
  .search-main .mode-tabs{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:6px;
  }
  .search-main .mode-tabs .mode-choice{
    min-height:44px;
    padding:0 32px 0 10px;
    font-size:13px;
    text-align:center;
    white-space:nowrap;
  }
  .search-main .mode-tabs .mode-help{right:8px;}
  .mode-label-desktop{display:none;}
  .mode-label-mobile{display:inline;}

  /* Reveal the result list sooner below the map on mobile. */
  .map-stage{
    height:min(52vh,380px);
    min-height:330px;
  }
}

@media(max-width:359px){
  .search-main .mode-tabs .mode-choice{
    padding-left:7px;
    padding-right:27px;
    font-size:12px;
  }
  .search-main .mode-tabs .mode-help{right:5px;}
  .map-stage{
    height:320px;
    min-height:320px;
  }
}


/* =========================================================
   v41 · Mobile map controls + touch gestures
   ========================================================= */
.map-controls-mobile,
.map-touch-hint{display:none;}

@media(max-width:767px){
  /* Mobile: keep the map itself clean; controls live below the map. */
  .map-stage > .map-legend,
  .map-stage > .map-controls,
  .map-stage > .zoom-hint{display:none !important;}

  .map-controls-mobile{
    display:flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    max-width:100%;
    margin:12px auto 0;
    border:1px solid var(--color-border-default);
    border-radius:var(--radius-sm);
    background:#fff;
    overflow:hidden;
  }
  .map-controls-mobile button,
  .map-controls-mobile span{
    min-width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-right:1px solid var(--color-border-default);
    background:#fff;
    color:var(--color-text-primary);
    font-size:15px;
  }
  .map-controls-mobile button{cursor:pointer;font-weight:700;}
  .map-controls-mobile button:last-child{
    min-width:64px;
    padding:0 12px;
    border-right:0;
    font-size:13px;
  }
  .map-controls-mobile span{
    min-width:58px;
    color:var(--color-text-secondary);
    font-size:12px;
    font-weight:600;
  }
  .map-controls-mobile button:active{
    color:var(--color-primary-active);
    background:var(--color-primary-light);
  }
  .map-touch-hint{
    display:block;
    margin:7px 0 0;
    color:var(--color-text-tertiary);
    font-size:11px;
    line-height:1.45;
    text-align:center;
  }
}


/* =========================================================
   v42 · Detail actions unified across PC / mobile
   Subscriber label removed in markup. Mobile uses the same
   full button treatment and labels as desktop.
   ========================================================= */
@media(max-width:767px){
  .case-panel-action-group{
    display:block!important;
    overflow:visible!important;
  }
  .case-panel-action-group .case-panel-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto auto minmax(0,1fr)!important;
    gap:8px!important;
  }
  .case-panel-actions .panel-bookmark,
  .case-panel-actions .panel-compare,
  .case-panel-actions .panel-compare.selected,
  .case-panel-actions .detail-action-btn:last-child{
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:38px!important;
    margin:0!important;
    padding:0 12px!important;
    color:var(--color-text-secondary)!important;
    background:var(--color-bg-page)!important;
    border:1px solid var(--color-border-default)!important;
    border-radius:var(--radius-sm)!important;
    box-shadow:none!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .case-panel-actions .panel-bookmark{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
  }
  .case-panel-actions .panel-bookmark span{display:inline!important;}
  .case-panel-actions .panel-bookmark svg{width:16px!important;height:16px!important;}
  .case-panel-actions .panel-bookmark.active{
    color:var(--color-primary)!important;
    background:var(--color-bg-page)!important;
    border-color:var(--color-primary)!important;
  }
  .case-panel-actions .panel-compare.selected{
    color:var(--color-text-primary)!important;
    background:var(--color-bg-muted)!important;
    border-color:var(--color-border-strong)!important;
  }
  .case-panel-actions .detail-action-btn:last-child{
    grid-column:auto!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .case-panel-actions .panel-bookmark:hover:not(:disabled),
  .case-panel-actions .panel-compare:hover:not(:disabled),
  .case-panel-actions .detail-action-btn:hover:not(:disabled){
    color:var(--color-text-primary)!important;
    background:var(--color-bg-subtle)!important;
    border-color:var(--color-border-strong)!important;
  }
}

/* Keep notices above drawers and modal dialogs, including mobile full-screen panels. */
.toast{
  z-index:10000;
  inset:auto auto max(24px, env(safe-area-inset-bottom)) 50%;
  width:max-content;
  max-width:calc(100vw - 32px);
  margin:0;
  border:0;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.5;
  text-align:center;
}
.summary-unavailable{display:none!important;}
@media(max-width:767px){
  .summary-unavailable{display:inline-flex!important;align-items:center;justify-content:center;gap:5px;}
  .case-panel-actions .summary-unavailable:disabled,
  .compare-action-stack .summary-unavailable:disabled{
    color:var(--color-text-disabled)!important;
    background:var(--color-bg-subtle)!important;
    border-color:var(--color-border-default)!important;
    cursor:not-allowed;
  }
}