/* ============================================================
   baiv.net V2.2.1 共享设计系统（V2.2 实测规格 + 用户实测修复）
   规格源：9/_inputs/rea-naver-analysis.md + naver-main.css（真 CSS 复核）
   修复（V2.2.1，对照 9/_inputs/user-feedback-*.png）：
   R1 搜索栏：外层吸顶条全宽自适应；.search-box flex:1 伸缩（max-width:708px），
      输入框 flex:1 min-width:0，AI 按钮 <640 缩 56px（.ai-l→.ai-s）
   R2 文字截断：宫格 tiles 弹性均分 + label 2 行 clamp；导航保持横向滑动；
      banner 两行安全布局；热搜/TOP3 ellipsis 容器 min-width:0
   R3 断点补齐：1120/1024/900/768/640/400；宫格 <900 6 列两行、<640 4 列三行
   R4 绿色回归：色块按钮改回真站 #03C75A 底白字（对照 naver-home.png）；
      --brand-deep 仅 hover/按下；文字级绿仍用深档 --brand-text（AA）
   文案决策（DESIGN.md 已记录）：导航/宫格/页脚的 "옐로우페이지" 短称 → "업체정보"
   ============================================================ */

/* ── NanumSquare（真站网页字体，s.pstatic.net；L300/R400/B700/EB900） ── */
@font-face{font-family:'NanumSquare';font-weight:300;src:url(./fonts/NanumSquareL.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareL.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareL.ttf) format("truetype");}
@font-face{font-family:'NanumSquare';font-weight:400;src:url(./fonts/NanumSquareR.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareR.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareR.ttf) format("truetype");}
@font-face{font-family:'NanumSquare';font-weight:700;src:url(./fonts/NanumSquareB.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareB.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareB.ttf) format("truetype");}
@font-face{font-family:'NanumSquare';font-weight:800;src:url(./fonts/NanumSquareEB.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareEB.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareEB.ttf) format("truetype");}
@font-face{font-family:'NanumSquare';font-weight:900;src:url(./fonts/NanumSquareEB.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareEB.woff) format("woff"),url(https://s.pstatic.net/static/www/font/NanumSquareEB.ttf) format("truetype");}

:root{
  /* ── 品牌：色块按钮用真站 #03C75A（V2.2.1 R4 回归）；文字绿深档保 AA；teal 备选见文末 ── */
  --brand:#03C75A;        /* 主品牌绿（真站×13）：搜索框描边/色块按钮底/CTA/tab 下划线 */
  --brand-text:#006633;   /* 文字绿 ≥4.5:1：LOGO/激活字/链接 */
  --brand-deep:#007A3D;   /* 仅 hover/按下态（V2.2.1 起不再做色块底） */
  --brand-2:#008f76;      /* 真站 [aria-selected=true] 选中填充（×12）：宫格选中/开关图形色 */
  --brand-100:#E6F9EE;    /* 极淡绿底：选中浅底/宫格 hover */
  --brand-500:#4FD88B;

  /* ── 文字（真站令牌） ── */
  --title:#080808; --body:#101010; --cap1:#404040; --cap2:#606060;

  /* ── 边框/背景（真站令牌） ── */
  --border-out:#E3E5E8; --border-in:#EBEBEB; --btn-border:#DADCDF;
  --block:#FFFFFF; --board:#F4F6FA; --option:#F5F7F8;

  /* ── 语义色（真站） ── */
  --price:#D03010; --star:#EBAA00; --hot:#E65DA0; --link:#0147B5;

  /* ── 形状（真站圆角分布） ── */
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:20px; --radius-round:50%;

  /* ── 阴影 ── */
  --shadow-1:0 0 0 1px var(--border-out), 0 1px 2px rgba(0,0,0,.04);
  --shadow-focus:0 2px 4px rgba(0,0,0,.12);

  /* ── 字体 ── */
  --sans:'NanumSquare','Malgun Gothic','Apple SD Gothic Neo','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;

  /* ── 字号阶梯（真站 root 10px，1.3rem=13px 主力） ── */
  --fs-1:13px; --fs-2:12px; --fs-3:14px; --fs-4:15px; --fs-5:17px; --fs-6:22px; --fs-7:24px;

  /* ── 动效 ── */
  --ease-pop:cubic-bezier(.33,1,.68,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:10px;}
body{font-family:var(--sans);background:var(--block);color:var(--body);font-size:var(--fs-1);line-height:20px;font-weight:700;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{display:block;}
.num{font-variant-numeric:tabular-nums;}
.container{width:1280px;max-width:100%;margin:0 auto;padding:0 16px 60px;}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px;}

/* V2.4：功能提示细条（对照真站 Whale 提示条——细、克制、深底，非促销横幅） */
.promo-bar{position:relative;background:#080808;color:#D8DADE;font-size:12px;line-height:24px;height:24px;text-align:center;padding:0 40px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.promo-bar b{color:#FFFFFF;font-weight:800;}
.promo-bar .x{position:absolute;right:14px;color:#A8AAB0;cursor:pointer;font-weight:700;line-height:24px;}

/* ═══ 吸顶搜索头（真站 fixed 满宽 z-index:2000）V2.4：框外无 logo，搜索框居中 ═══ */
.search-area{position:sticky;top:0;left:0;right:0;z-index:2000;background:var(--block);border-bottom:1px solid var(--border-out);}
.search-in{display:flex;align-items:center;justify-content:center;gap:16px;height:60px;padding-top:0;padding-bottom:0;}
.logo{font-size:22px;font-weight:800;color:var(--brand-text);letter-spacing:-.04em;line-height:1;white-space:nowrap;flex:none;}
.logo small{font-size:12px;font-weight:500;color:var(--cap2);letter-spacing:0;margin-left:6px;}
/* R1：搜索框弹性伸缩（max-width:708px 真站；窄屏占满剩余空间不截断） */
.search-box{display:flex;align-items:center;flex:1;min-width:0;width:auto;max-width:708px;height:60px;border:1px solid var(--brand);border-radius:33px;background:#fff;padding-left:12px;gap:6px;transition:box-shadow .15s linear;}
.search-box:focus-within{box-shadow:var(--shadow-focus);}
.sb-logo{font-size:15px;font-weight:800;color:var(--brand-text);letter-spacing:-.03em;padding-right:12px;border-right:1px solid var(--border-in);white-space:nowrap;flex:none;}
.search-box input{flex:1;min-width:0;border:0;outline:0;font-size:15px;font-weight:400;line-height:24px;font-family:var(--sans);color:var(--title);background:transparent;padding:0 8px;}
.search-box input::placeholder{color:var(--cap2);}
.key-ic{flex:none;color:var(--cap2);display:flex;align-items:center;justify-content:center;width:26px;}
/* AI 按钮双形态：.ai-l 全称（默认）/ .ai-s 短"AI"（<640，56px） */
.sbtn-ai{flex:none;display:flex;align-items:center;justify-content:center;width:90px;height:48px;margin-right:6px;border:0;border-radius:24px;background:var(--brand);color:#fff;font-family:var(--sans);font-size:15px;font-weight:800;cursor:pointer;transition:background .15s linear;}
.sbtn-ai:hover{background:var(--brand-deep);}
.sbtn-ai .ai-s{display:none;}
.lang{margin-left:auto;display:flex;gap:6px;white-space:nowrap;flex:none;}
.lang button{font-family:var(--sans);font-size:12px;font-weight:700;border:1px solid var(--btn-border);background:var(--block);color:var(--cap1);padding:4px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s linear,color .15s linear,background .15s linear;}
.lang button:hover{border-color:var(--brand);color:var(--brand-text);}
.lang button.active{background:var(--brand);border-color:var(--brand);color:#fff;}

/* ═══ 顶部横向导航（一次露全；窄屏横向滑动不折行不截断） ═══ */
.nav{border-bottom:1px solid var(--border-out);background:var(--block);}
.nav-in{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.nav-in::-webkit-scrollbar{display:none;}
.nav-in a{flex:none;font-size:15px;font-weight:700;color:var(--title);padding:12px 14px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .15s linear;}
.nav-in a:hover{color:var(--brand-text);}
.nav-in a.active{color:var(--brand-text);border-bottom-color:var(--brand);}

/* ═══ 服务宫格（R2/R3：弹性均分 + 断点 6/4 列；label 2 行 clamp 防溢出） ═══ */
.shortcut{background:var(--board);border-bottom:1px solid var(--border-out);padding:8px 8px;}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;width:min(900px,100%);margin:0 auto;}
.tile{flex:1 1 0;min-width:0;max-width:96px;min-height:68px;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;transition:background .15s linear;border-radius:var(--radius-md);}
.tile:hover{background:var(--brand-100);}
.tile .ic{width:30px;height:30px;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex:none;}
.tile .lb{font-size:12px;font-weight:700;color:var(--body);line-height:13px;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tile.more .ic{background:var(--option);color:var(--cap1);border:1px solid var(--border-out);}
.t-soft{background:#047857;} .t-teal{background:#0E7490;} .t-red{background:#C62828;} .t-amber{background:#B45309;}
.t-green{background:#15803D;} .t-slate{background:#475569;} .t-indigo{background:#4F46E5;} .t-cyan{background:#00695C;}
.t-pink{background:#BE185D;} .t-blue{background:#0147B5;}

/* ═══ 双栏骨架（真站 830 + 420） ═══ */
#container{width:1280px;max-width:100%;margin:0 auto;padding:16px 16px 60px;display:flex;align-items:flex-start;gap:30px;}
.main-col{width:830px;min-width:0;}
.side-col{width:420px;min-width:0;position:sticky;top:76px;align-self:flex-start;}

/* ═══ 板块标题 ═══ */
.section{margin:20px 0;}
.st{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.st h2{font-size:var(--fs-6);font-weight:800;letter-spacing:-.02em;color:var(--title);line-height:26px;}
.st a{font-size:var(--fs-2);font-weight:700;color:var(--brand-text);padding:6px 2px;}
.st a:hover{text-decoration:underline;}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;color:var(--brand-text);letter-spacing:.04em;}

/* ═══ 뉴스스탠드 类比区 ═══ */
.newsstand{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);padding:14px 14px 12px;margin-bottom:20px;}
.nt-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-out);margin-bottom:12px;overflow-x:auto;scrollbar-width:none;}
.nt-tabs::-webkit-scrollbar{display:none;}
.nt-tab{flex:none;font-size:14px;font-weight:700;color:var(--cap1);padding:8px 10px;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s linear;cursor:pointer;}
.nt-tab:hover{color:var(--brand-text);}
.nt-tab.active{color:var(--brand-text);border-bottom-color:var(--brand);}
.nt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;}
.nt-cell{font-size:12px;font-weight:700;color:var(--body);padding:9px 4px;text-align:center;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s linear;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nt-cell:hover{background:var(--brand-100);color:var(--brand-text);}
.headline{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:10px;}
.hl-card{display:flex;gap:8px;align-items:center;background:var(--board);border:1px solid var(--border-out);border-radius:var(--radius-md);padding:8px;height:104px;overflow:hidden;min-width:0;}
.hl-card .ph{width:104px;height:88px;flex:none;border-radius:var(--radius-sm);background:var(--option);position:relative;overflow:hidden;}
.hl-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hl-card .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.hl-card .nm{font-size:13px;font-weight:800;color:var(--title);line-height:17px;max-height:51px;overflow:hidden;}
.hl-card .meta{font-size:12px;color:var(--cap2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ═══ 商家卡 ═══ */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.biz{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s linear,border-color .15s linear,box-shadow .15s linear;min-width:0;}
.biz:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow-1);}
.biz .ph{position:relative;aspect-ratio:1/1;background:var(--board);display:flex;align-items:center;justify-content:center;color:var(--cap2);font-size:12px;font-weight:800;letter-spacing:.04em;overflow:hidden;}
.biz .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.biz .ph .badge{position:absolute;top:6px;left:6px;background:var(--block);color:var(--brand-text);font-size:12px;font-weight:800;padding:1px 6px;border-radius:3px;border:1px solid var(--brand);letter-spacing:.02em;}
.biz .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px;}
.biz .nm{font-size:14px;font-weight:800;color:var(--title);letter-spacing:-.01em;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.biz .meta{font-size:12px;color:var(--cap2);line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.biz .ds{font-size:12px;font-weight:500;color:var(--cap1);line-height:18px;max-height:36px;overflow:hidden;}
.stars{color:var(--star);font-size:12px;white-space:nowrap;}
.stars .num{color:var(--body);font-weight:800;}
.stars .rate{color:var(--body);font-weight:800;}
.stars .cnt{color:var(--cap2);font-weight:700;}
.price{font-size:14px;font-weight:800;color:var(--title);}
.price b{color:var(--price);font-weight:800;}

/* ═══ 紧凑行列表 ═══ */
.rows{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);overflow:hidden;}
.row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border-in);font-size:13px;line-height:20px;font-weight:700;transition:background .15s linear;min-width:0;}
.row:last-child{border-bottom:0;}
.row:hover{background:var(--option);}
.row .dot{width:6px;height:6px;border-radius:50%;flex:none;}
.d-brand{background:var(--brand);} .d-red{background:var(--price);} .d-green{background:#15803D;} .d-amber{background:#B45309;} .d-slate{background:#475569;}
.row .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title);}
.row .s{font-size:12px;font-weight:500;color:var(--cap2);white-space:nowrap;flex:none;}
.row .p{color:var(--price);font-weight:800;font-size:13px;white-space:nowrap;flex:none;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* ═══ 指南卡 ═══ */
.gg{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,auto);gap:10px;}
.g1{grid-column:1;grid-row:1/4;}
.gc{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s linear,border-color .15s linear;}
.gc:hover{transform:translateY(-2px);border-color:var(--brand);}
.gc .ph{position:relative;display:flex;align-items:center;justify-content:center;color:var(--cap2);font-weight:800;letter-spacing:.04em;overflow:hidden;background:var(--board);}
.gc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.g1 .ph{flex:1;min-height:140px;} .gc .ph{height:84px;}
.gc .bd{padding:10px 12px;}
.gc .nm{font-size:17px;font-weight:800;color:var(--title);line-height:22px;letter-spacing:-.02em;max-height:44px;overflow:hidden;}
.g1 .nm{font-size:22px;font-weight:800;line-height:26px;max-height:52px;overflow:hidden;}
.gc .meta{font-size:12px;font-weight:500;color:var(--cap2);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gc .ds{font-size:12px;font-weight:500;color:var(--cap1);margin-top:5px;line-height:18px;max-height:36px;overflow:hidden;}

/* ═══ 招聘行 ═══ */
.jline{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border-in);font-size:13px;line-height:20px;font-weight:700;transition:background .15s linear;min-width:0;}
.jline:last-child{border-bottom:0;}
.jline:hover{background:var(--option);}
.jline .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title);}
.jline .s{font-size:12px;font-weight:500;color:var(--cap2);white-space:nowrap;flex:none;}
.new{background:#FDEBEB;color:#C62828;font-size:12px;font-weight:800;padding:1px 5px;border-radius:3px;flex:none;}

/* ═══ 房源卡 ═══ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.rent{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);overflow:hidden;transition:transform .15s linear,border-color .15s linear;min-width:0;}
.rent:hover{transform:translateY(-2px);border-color:var(--brand);}
.rent .ph{position:relative;aspect-ratio:16/9;background:var(--board);display:flex;align-items:center;justify-content:center;color:var(--cap2);font-weight:800;overflow:hidden;}
.rent .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rent .bd{padding:10px 12px;}
.rent .nm{font-size:14px;font-weight:800;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rent .meta{font-size:12px;font-weight:500;color:var(--cap2);margin:2px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rent .price{font-size:14px;font-weight:800;color:var(--title);}
.rent .price b{color:var(--price);font-weight:800;}

/* ═══ 右栏小组件（R2：容器 min-width:0 防热搜/TOP3 截断） ═══ */
.widget{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);padding:14px 14px 10px;margin-bottom:12px;min-width:0;}
.widget .wst{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.widget .wst h3{font-size:15px;font-weight:800;color:var(--title);line-height:20px;}
.widget .wst a{font-size:12px;font-weight:700;color:var(--brand-text);}
.hot-list{counter-reset:hot;min-width:0;}
.hot-list .hl{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border-in);font-size:13px;line-height:18px;font-weight:700;min-width:0;}
.hot-list .hl:last-child{border-bottom:0;}
.hl i{font-style:normal;font-weight:800;color:var(--price);font-size:12px;min-width:14px;flex:none;}
.hl .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title);}
.hl .v{color:var(--cap2);font-size:12px;font-weight:500;flex:none;}
.top-biz{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-in);align-items:center;min-width:0;}
.top-biz:last-child{border-bottom:0;}
.top-biz .th{width:64px;height:64px;flex:none;border-radius:var(--radius-sm);background:var(--board);overflow:hidden;position:relative;}
.top-biz .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.top-biz .bd{flex:1;min-width:0;}
.top-biz .nm{font-size:13px;font-weight:800;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-biz .meta{font-size:12px;font-weight:500;color:var(--cap2);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-biz .price{font-size:12px;}
.ad-box{background:var(--board);border:1px solid var(--border-out);border-radius:var(--radius-md);height:110px;display:flex;align-items:center;justify-content:center;color:var(--cap2);font-size:12px;letter-spacing:.05em;margin-bottom:12px;}
.side-account{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);padding:16px 14px;margin-bottom:12px;text-align:center;}
.side-account .t{font-size:14px;font-weight:800;color:var(--title);line-height:20px;}
.side-account .s{font-size:12px;font-weight:500;color:var(--cap2);margin:4px 0 10px;}
.btn-login{width:100%;height:40px;border:0;border-radius:var(--radius-sm);background:var(--brand);color:#fff;font-family:var(--sans);font-size:15px;font-weight:800;cursor:pointer;transition:background .15s linear;}
.btn-login:hover{background:var(--brand-deep);}
.side-shop{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.shop-card{background:var(--board);border:1px solid var(--border-out);border-radius:var(--radius-md);overflow:hidden;text-align:center;min-width:0;}
.shop-card .ph{height:70px;background:var(--option);display:flex;align-items:center;justify-content:center;color:var(--cap2);font-weight:800;font-size:12px;position:relative;overflow:hidden;}
.shop-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.shop-card .nm{font-size:12px;font-weight:800;color:var(--title);padding:6px 6px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shop-card .pr{font-size:12px;font-weight:800;color:var(--price);padding:0 6px 7px;}
/* R2：banner 两行安全布局（flex-wrap，窄屏 tag 独立一行） */
.banner{background:var(--board);border:1px solid var(--border-out);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  background-image:linear-gradient(180deg,#FFFFFF,var(--board));}
.banner .t{font-size:13px;font-weight:800;color:var(--title);}
.banner .s{font-size:12px;font-weight:500;color:var(--cap2);}
.banner .tag{margin-left:auto;font-size:12px;font-weight:800;color:var(--brand-text);border:1px solid var(--brand);border-radius:3px;padding:2px 7px;background:var(--block);flex:none;}

/* ═══ CTA / footer ═══ */
.cta{background:var(--brand);color:#fff;border-radius:var(--radius-md);padding:13px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:20px 0;}
.cta .t{font-size:15px;font-weight:800;}
.cta .s{font-size:12px;font-weight:500;color:#FFFFFF;}
.cta button{margin-left:auto;font-family:var(--sans);font-size:13px;font-weight:800;background:#fff;color:var(--brand-text);border:0;padding:7px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s linear;}
.cta button:hover{background:var(--brand-100);}
.footer{border-top:1px solid var(--border-out);background:var(--block);margin-top:36px;padding:24px 0 28px;font-size:13px;font-weight:500;color:var(--cap1);}
.footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-bottom:12px;}
.footer h4{color:var(--title);font-size:13px;margin-bottom:7px;font-weight:800;}
.footer a{display:block;margin:3px 0;color:var(--cap1);transition:color .15s linear;}
.footer a:hover{color:var(--brand-text);}
.footer .copy{text-align:center;border-top:1px solid var(--border-in);padding-top:10px;font-size:12px;color:var(--cap2);}

/* ═══ 板块页通用 ═══ */
.searchband{background:var(--board);border-bottom:1px solid var(--border-out);padding:16px 0 14px;}
.tagline{font-size:13px;font-weight:500;color:var(--cap1);margin-bottom:10px;line-height:20px;}
.tagline b{color:var(--brand-text);font-weight:800;}
.searchbox{display:flex;align-items:center;flex:1;min-width:0;width:auto;max-width:560px;height:52px;border:1px solid var(--brand);border-radius:26px;background:#fff;padding-left:12px;gap:6px;transition:box-shadow .15s linear;}
.searchbox:focus-within{box-shadow:var(--shadow-focus);}
.searchbox input{flex:1;min-width:0;border:0;outline:0;font-size:14px;font-weight:400;font-family:var(--sans);color:var(--title);background:transparent;padding:0 8px;}
.searchbox input::placeholder{color:var(--cap2);}
.searchbox .sbtn{flex:none;display:flex;align-items:center;justify-content:center;width:88px;height:40px;margin-right:5px;border:0;border-radius:20px;background:var(--brand);color:#fff;font-family:var(--sans);font-size:14px;font-weight:800;cursor:pointer;transition:background .15s linear;}
.searchbox .sbtn:hover{background:var(--brand-deep);}
.searchbox .sbtn .ai-s{display:none;}
.chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.chip{border:0;background:var(--block);color:var(--body);font-size:12px;font-weight:700;padding:4px 13px;border-radius:var(--radius-pill);height:26px;line-height:18px;border:1px solid var(--btn-border);transition:border-color .15s linear,color .15s linear;white-space:nowrap;}
.chip:hover{border-color:var(--brand);color:var(--brand-text);}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.hotbar{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap;}
.hotbar .lb{font-size:12px;font-weight:800;color:var(--brand-text);letter-spacing:.02em;white-space:nowrap;}
.hot{font-size:13px;font-weight:700;color:var(--cap1);white-space:nowrap;transition:color .15s linear;}
.hot i{font-style:normal;font-weight:800;color:var(--price);margin-right:3px;font-size:12px;}
.hot:hover{color:var(--brand-text);}
.side-nav{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);padding:5px 0;}
.side-nav a{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:13px;font-weight:700;color:var(--cap1);border-left:3px solid transparent;transition:background .15s linear,color .15s linear;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-nav a:hover{background:var(--option);color:var(--title);}
.side-nav a.active{color:var(--brand-text);border-left-color:var(--brand);background:var(--brand-100);}
.layout2{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start;}
.detail-hero{background:var(--board);border:1px solid var(--border-out);border-radius:var(--radius-md);padding:16px 18px;}
.detail-hero h1{font-size:22px;font-weight:800;color:var(--title);letter-spacing:-.02em;line-height:26px;}
.detail-hero .sub{font-size:13px;font-weight:500;color:var(--cap1);margin-top:3px;line-height:20px;}
.info-table{width:100%;border-collapse:collapse;font-size:13px;font-weight:700;background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);overflow:hidden;}
.info-table th,.info-table td{border-bottom:1px solid var(--border-in);padding:7px 11px;text-align:left;vertical-align:top;}
.info-table th{width:100px;color:var(--cap2);font-weight:700;background:var(--option);}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:0;}
.map-ph{background:var(--board);border:1px solid var(--border-out);border-radius:var(--radius-md);height:110px;display:flex;align-items:center;justify-content:center;color:var(--cap2);font-size:12px;letter-spacing:.04em;}
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.select-st{font-family:var(--sans);font-size:13px;font-weight:700;border:1px solid var(--btn-border);border-radius:var(--radius-sm);padding:4px 9px;color:var(--title);background:var(--block);}
.cta-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.btn{font-family:var(--sans);font-size:13px;font-weight:800;padding:8px 16px;border-radius:var(--radius-sm);cursor:pointer;border:0;transition:background .15s linear;}
.btn-p{background:var(--brand);color:#fff;}
.btn-p:hover{background:var(--brand-deep);}
.btn-s{background:var(--block);color:var(--title);border:1px solid var(--btn-border);}
.btn-s:hover{background:var(--option);}

/* ═══ V2.4 门户化新组件（정보台 / 서비스精选 / 내용 추천 / 날씨） ═══ */
.ig{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);padding:12px 14px 14px;margin-bottom:20px;}
.ig-top{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border-out);margin-bottom:12px;}
.ig-top .nt-tabs{border-bottom:0;margin-bottom:0;}
.ig-more{flex:none;font-size:12px;font-weight:700;color:var(--brand-text);padding:4px 2px;white-space:nowrap;}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.ig-cell{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--border-in);border-radius:var(--radius-sm);background:var(--board);min-width:0;transition:border-color .15s linear;}
.ig-cell:hover{border-color:var(--brand);}
.ig-cell .ic{width:34px;height:34px;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex:none;}
.ig-cell .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ig-cell .lb{font-size:12px;font-weight:800;color:var(--title);white-space:nowrap;}
.ig-cell .tx{font-size:12px;font-weight:500;color:var(--cap1);line-height:16px;max-height:32px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.svc-tabs{display:flex;gap:2px;margin-bottom:10px;}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.svc{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .15s linear,border-color .15s linear;}
.svc:hover{transform:translateY(-2px);border-color:var(--brand);}
.svc .ph{position:relative;aspect-ratio:16/9;background:var(--board);display:flex;align-items:center;justify-content:center;color:var(--cap2);font-size:12px;font-weight:800;letter-spacing:.04em;overflow:hidden;}
.svc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.svc .ph .badge{position:absolute;top:6px;left:6px;background:var(--block);color:var(--brand-text);font-size:12px;font-weight:800;padding:1px 6px;border-radius:3px;border:1px solid var(--brand);letter-spacing:.02em;}
.svc .bd{padding:9px 11px 11px;display:flex;flex-direction:column;gap:3px;}
.svc .nm{font-size:14px;font-weight:800;color:var(--title);letter-spacing:-.01em;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svc .meta{font-size:12px;font-weight:500;color:var(--cap2);line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svc .pr{font-size:14px;font-weight:800;}
.svc .pr b{color:var(--price);font-weight:800;}
.rec-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-out);margin-bottom:12px;overflow-x:auto;scrollbar-width:none;}
.rec-tabs::-webkit-scrollbar{display:none;}
.rec-list{background:var(--block);border:1px solid var(--border-out);border-radius:var(--radius-md);overflow:hidden;}
.rec-line{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border-in);font-size:13px;line-height:20px;font-weight:700;transition:background .15s linear;min-width:0;}
.rec-line:last-child{border-bottom:0;}
.rec-line:hover{background:var(--option);}
.rec-line .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title);}
.rec-line .m{font-size:12px;font-weight:500;color:var(--cap2);white-space:nowrap;flex:none;}
.wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 8px;}
.wx{background:var(--board);border:1px solid var(--border-in);border-radius:var(--radius-sm);text-align:center;padding:6px 4px;}
.wx .c{font-size:22px;font-weight:800;color:var(--title);line-height:24px;}
.wx .l{font-size:12px;font-weight:700;color:var(--cap2);}
.wx-row{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--body);padding:6px 2px 2px;border-top:1px solid var(--border-in);margin-top:6px;}
.wx-du{font-size:12px;font-weight:800;color:var(--brand-text);margin-top:4px;}
.wx-ex{font-size:12px;font-weight:500;color:var(--cap2);margin-top:2px;}

/* ═══ 响应式（R3：断点 1120/1024/900/768/640/400 六档） ═══ */
@media(max-width:1120px){
  .container{width:auto;}
  #container{width:auto;flex-direction:column;gap:14px;}
  .main-col{width:100%;}
  .side-col{width:100%;position:static;}
  .tiles{width:100%;}
}
@media(max-width:1024px){
  .search-in{gap:10px;}
  .nav-in a{font-size:14px;padding:12px 10px;}
  .tile{max-width:90px;}
  .logo small{display:none;}
}
@media(max-width:900px){
  .grid4{grid-template-columns:1fr 1fr;}
  .grid3{grid-template-columns:1fr 1fr;}
  .gg{grid-template-columns:1fr 1fr;}
  .g1{grid-column:1;grid-row:1/4;}
  .two{grid-template-columns:1fr;}
  .layout2{grid-template-columns:1fr;}
  .nt-grid{grid-template-columns:repeat(4,1fr);}
  .headline{grid-template-columns:1fr;}
  .hl-card{height:auto;}
  .search-in{flex-wrap:wrap;height:auto;padding:8px 0;}
  .search-box{max-width:100%;height:52px;}
  .sbtn-ai{height:40px;}
  .tile{flex:1 1 calc(100%/6 - 8px);max-width:none;min-height:64px;} /* 6 列两行 */
  .ig-grid{grid-template-columns:repeat(3,1fr);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .nt-grid{grid-template-columns:repeat(3,1fr);}
  .hotbar{gap:8px;}
  .nav-in a{padding:11px 8px;font-size:13.5px;}
  .footer .cols{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}
@media(max-width:640px){
  .grid4{grid-template-columns:1fr 1fr;gap:8px;}
  .grid3{grid-template-columns:1fr 1fr;}
  .gg{grid-template-columns:1fr;}
  .g1{grid-column:auto;grid-row:auto;}
  .g1 .nm{font-size:19px;}
  .g1 .ph{min-height:100px;}
  .gc .ph{height:72px;}
  .tile{flex:1 1 calc(100%/4 - 8px);max-width:none;min-height:64px;} /* 4 列三行 */
  .tile .ic{width:28px;height:28px;font-size:12px;}
  .sb-logo{display:none;}
  .lang{margin-left:0;width:100%;justify-content:flex-end;}
  .promo-bar .x{display:none;}
  .sbtn-ai{width:56px;} .sbtn-ai .ai-l{display:none;} .sbtn-ai .ai-s{display:flex;}
  .searchbox .sbtn{width:56px;} .searchbox .sbtn .ai-l{display:none;} .searchbox .sbtn .ai-s{display:flex;}
  .banner{padding:11px 12px;}
  .banner .tag{margin-left:0;align-self:flex-start;}
  .ig-grid{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:1fr;}
  .ig-top{flex-wrap:wrap;}
}
@media(max-width:400px){
  .promo-bar{text-align:left;padding:0 34px 0 12px;} /* 居中与 ellipsis 不兼容，窄屏改左对齐让省略号生效 */
  .promo-bar .x{right:8px;}
  .grid4{grid-template-columns:1fr;}.grid3{grid-template-columns:1fr;}
  /* V2.2.2：职位/头条行超窄屏换行，标题全宽零裁切 */
  .jline{flex-wrap:wrap;row-gap:2px;}
  .jline .t{flex:1 1 100%;white-space:normal;line-height:19px;}
  .jline .s{flex:none;font-size:12px;margin-left:0;}
  /* V2.4：内容列表行同样换行保护 */
  .rec-line{flex-wrap:wrap;row-gap:2px;}
  .rec-line .t{flex:1 1 100%;white-space:normal;line-height:19px;}
  .rec-line .m{flex:none;font-size:12px;margin-left:0;}
}

/* ── teal 备选（主人拍板后改这三行即全站切换；默认绿 #03C75A 为真站主色） ──
   --brand:#0E7490; --brand-text:#0A5D72; --brand-deep:#0B5F75;
*/