/* ============================================================
   홈 화면 스타일
   ------------------------------------------------------------
   snspang 의 <style> 블록을 «순서 그대로» 이어 붙인 것이다.
   ⚠ 규칙 단위로 쪼개서 옮기면 안 된다. @media 안에 있던 규칙이
     밖으로 튀어나와 모바일 규칙이 데스크톱에도 걸린다 — 실제로 그렇게 깨졌다.
     (상품 CSS 의 @media 9개가 통째로 사라졌었다)
   ⚠ 홈과 상품은 «따로» 둔다. .trust 처럼 같은 이름이 서로 다른 뜻인 것이 있다
     (홈=실시간 주문현황 / 상품=신뢰 배지). 한 파일에 합치면 서로 덮어쓴다.
   ============================================================ */

/* 웹폰트는 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */


  /* 기본값·리셋(:root·*·body·a·img·.wrap·머리띠)은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 머리줄(로고줄·메뉴줄·검색) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 메가 드롭다운(패널·카드·프로모) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */

  /* ===== 홈: 히어로 + 프로모 ===== */
  .home{padding:22px 0 0;}
  .herowrap{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;}
  /* ── 첫 화면 배너 · 그림판 ────────────────────────────────
     ★ 배너 전체가 그림 한 장일 때 쓰는 칸이다.
     ⚠ aspect-ratio 를 박아 둔다. 그림이 늦게 떠도 자리를 미리 잡아 두어야
       아래 상품 목록이 위로 뛰었다 내려오지 않는다. */
  /* ⚠ aspect-ratio 는 blade 가 «그림 실제 크기»로 박아 준다(style). 여기서 고정하지 않는다 —
       고정하면 비율이 다른 그림이 잘리고, 배너 그림에는 글자가 들어 있다. */
  .heroimg{display:block;border-radius:18px;overflow:hidden;border:1px solid #e9edf3;
    background:#fff;box-shadow:0 3px 14px rgba(16,24,40,.05);}
  .heroimg img{width:100%;height:auto;display:block;}
  @media(max-width:900px){
    /* 좁은 화면에서 가로로 긴 그림은 173px 까지 납작해진다.
       정사각 판(hero-main-sm.png)이 있으면 그쪽이 쓰이므로 비율을 풀어 준다. */
    .heroimg{aspect-ratio:auto;}
  }

  /* ── 첫 화면 배너 ─────────────────────────────────────────
     ★ 흰 바탕이다. 사이트 전체가 흰색이고, 오른쪽에 들어갈 그림도 흰 바탕이라
       배너만 색을 깔면 그림이 «네모난 딱지»로 붙는다.
     ★ 그래서 색이 아니라 «글자 크기와 여백»으로 센 화면을 만든다.
     ⚠ 왼쪽 칸에 minmax(0,1fr) 을 쓴다. 그냥 1fr 이면 긴 낱말이 칸을 밀어
       오른쪽 그림칸이 찌그러진다. */
  .hero{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:center;
    min-height:340px;padding:34px 36px;background:#fff;border:1px solid #e9edf3;border-radius:18px;
    box-shadow:0 3px 14px rgba(16,24,40,.05);}
  .hbadge{display:inline-block;background:var(--soft);color:var(--accent-d);border:1px solid #dbe6ff;
    font-size:12px;font-weight:800;letter-spacing:-.01em;padding:6px 12px;border-radius:999px;
    margin-bottom:16px;}
  /* ⚠ 900 무게에 자간을 조이지 않으면 한글이 헐거워 보인다 */
  .hero h2{font-size:36px;font-weight:900;line-height:1.26;letter-spacing:-.045em;color:#12141a;}
  .hero h2 b{color:var(--accent-d);}
  .hero .hcopy>p{margin-top:13px;font-size:14.5px;line-height:1.8;color:#5b6472;max-width:34em;
    word-break:keep-all;}
  .hcta{display:flex;gap:9px;margin-top:22px;flex-wrap:wrap;}
  .hcta a{display:inline-flex;align-items:center;height:50px;padding:0 24px;border-radius:12px;
    font-size:15px;font-weight:800;letter-spacing:-.02em;transition:.14s;}
  .hb-p{background:var(--accent);color:#fff;box-shadow:0 8px 18px -8px rgba(37,99,235,.7);}
  .hb-p:hover{background:var(--accent-d);}
  .hb-s{border:1px solid #dfe4ec;color:#12141a;background:#fff;}
  .hb-s:hover{border-color:#b9c9ea;background:#fbfcff;}
  /* 지킬 수 있는 것만 적는다 — 「업계 1위」 같은 셀 수 없는 말은 넣지 않는다 */
  .hmarks{list-style:none;display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:20px;}
  .hmarks li{position:relative;padding-left:17px;font-size:12.5px;font-weight:700;color:#6b7280;
    white-space:nowrap;}
  .hmarks li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:5px;
    border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
    transform:rotate(-45deg);}

  /* 왼쪽 그림칸 — 그림이 없으면 대표 단가 세 줄이 대신 선다 */
  .hart{display:flex;align-items:center;justify-content:center;min-width:0;}
  .hart img{width:100%;height:auto;object-fit:contain;}
  .hprice{list-style:none;width:100%;display:flex;flex-direction:column;gap:8px;}
  .hprice li{border:1px solid #e9edf3;border-radius:13px;padding:11px 13px;background:#fcfdff;}
  .hprice .pf{display:block;font-size:11px;font-weight:800;color:var(--accent-d);
    letter-spacing:-.01em;}
  .hprice b{display:block;margin:2px 0 1px;font-size:23px;font-weight:900;letter-spacing:-.045em;
    color:#12141a;font-variant-numeric:tabular-nums;line-height:1.15;}
  .hprice b i{font-style:normal;font-size:12px;font-weight:700;color:#8b93a1;margin-left:2px;}
  .hprice .nm{display:block;font-size:11.5px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;}

  .trust{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.04);padding:18px 20px;display:flex;flex-direction:column;}
  .trust .th{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;}
  .trust .live{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:#e53935;background:#fdecec;padding:3px 8px;border-radius:6px;}
  .trust .live i{width:6px;height:6px;border-radius:50%;background:#e53935;animation:tpulse 1.4s infinite;}
  @keyframes tpulse{0%,100%{opacity:1}50%{opacity:.25}}
  .feed{list-style:none;flex:1;display:flex;flex-direction:column;overflow:hidden;}
  .feed li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#555;padding:9px 0;border-bottom:1px solid #f2f2f2;white-space:nowrap;overflow:hidden;}
  .feed li:last-child{border-bottom:0;}
  .feed li .dot{width:7px;height:7px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.03);}
  .feed li .tt{color:#aaa;font-size:11px;flex:none;width:46px;}
  .feed li .nm{flex:none;}.feed li b{color:#222;font-weight:700;overflow:hidden;text-overflow:ellipsis;}
  .feed li .ok{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--accent-d);background:#eaf6ea;padding:2px 7px;border-radius:5px;flex:none;}
  /* ⚠ margin-top:auto — 통계는 «맨 아래»에 붙는다.
     타일이 flex:1 로 늘어나므로 보통은 저절로 밑에 오지만,
     실시간 주문·후기가 붙어 순서가 바뀌어도 통계는 바닥을 지킨다. */
.tstats{display:flex;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
  .tstats div{flex:1;text-align:center;} .tstats b{display:block;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.02em;} .tstats span{font-size:11px;color:#999;}

  /* 섹션 헤더 */
  .sec{padding:42px 0 0;}
  .sec.blk{padding:24px 28px 30px;margin-top:22px;background:#f6f7f9;border:1px solid #edeff2;border-radius:20px;}
  .sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .sec-hd h2{font-size:24px;font-weight:900;letter-spacing:-.04em;}
  .sec-hd a{font-size:13px;font-weight:700;color:#888;} .sec-hd a:hover{color:var(--accent-d);}

  /* 상품 그리드/카드 */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .prod{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.04);transition:.16s;}
  .prod:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09);}
  .prod .th{position:relative;aspect-ratio:1/1;background:var(--bg,#f6c945);overflow:hidden;display:grid;place-items:end center;}
  .prod .th .pl{position:absolute;top:16px;left:0;right:0;text-align:center;font-size:11px;font-weight:800;letter-spacing:.06em;color:rgba(20,20,20,.6);}
  .prod .th .tt{position:absolute;top:38px;left:0;right:0;text-align:center;font-size:26px;font-weight:900;color:#1a1a1a;line-height:1.14;letter-spacing:-.045em;}
  .prod .th .hot{position:absolute;top:13px;right:13px;background:#111;color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:6px;} .prod .th .hot.best{background:#ff5b45;}
  /* 유지 시간 배지 — 라이브 시청자처럼 «시간만 다른» 상품에 붙는다.
     ⚠ .hot(배지)과 «반대쪽»에 둔다. 둘 다 오른쪽 위에 있으면 겹친다. */
  .prod .th .dur{position:absolute;top:13px;left:13px;background:rgba(17,17,17,.82);color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:-.2px;}

  .prod .th img{width:58%;margin-bottom:2px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.13));}
  .glb{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;background:#eef1f5;color:#5b6472;font-size:11px;font-weight:800;vertical-align:middle;}
  .prod .th.thumb-img{background:#fff;place-items:stretch;} .prod .th img.ff{width:100%;height:100%;margin:0;object-fit:contain;filter:none;}
  .prod .th .prop{position:absolute;bottom:28px;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:16px;box-shadow:0 4px 8px rgba(0,0,0,.13);}
  .prod .th .prop.l{left:16px;} .prod .th .prop.r{right:16px;}
  .prod .info{display:block;white-space:normal;padding:15px 16px 17px;}
  .prod .nm{font-size:15px;font-weight:400;color:var(--ink);letter-spacing:-.02em;}
  .prod .pr{margin-top:9px;font-size:17px;font-weight:800;color:#111;} .prod .pr .dc{color:#ff5b45;margin-right:4px;font-size:14px;} .prod .pr small{font-size:13px;font-weight:700;}
  .prod .cnt{margin-top:9px;display:flex;flex-wrap:wrap;gap:4px 11px;font-size:12px;font-weight:900;color:#171717;} .prod .cnt .lbl{color:#aaa;font-weight:600;margin-right:2px;} .prod .cnt .st{color:#f5a623;}

  /* 섹션 헤더 보조설명 */
  .sec-hd .hd-l{display:flex;flex-direction:column;gap:5px;}
  .sec-hd .hd-l h2{margin:0;line-height:1.15;}
  .sec-sub{font-size:13.5px;font-weight:500;color:var(--gray);letter-spacing:-.01em;}

  /* 게시판 */
  .boards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .board{border:1px solid #e9ecef;border-radius:18px;padding:22px 22px 10px;background:#fff;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s,border-color .18s;}
  .board:hover{box-shadow:0 12px 28px rgba(17,24,39,.08);transform:translateY(-3px);border-color:#dfe3e8;}
  .board-hd{display:flex;align-items:center;gap:11px;padding-bottom:15px;margin-bottom:4px;border-bottom:1px solid #f1f3f5;}
  .board-hd .bico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:none;}
  .board-hd h3{font-size:16px;font-weight:800;letter-spacing:-.02em;flex:1;}
  .board-hd .plus{color:#c4c9cf;font-size:16px;font-weight:800;transition:color .15s,transform .15s;}
  .board:hover .board-hd .plus{color:var(--accent-d);transform:translateX(3px);}
  .board ul{list-style:none;display:flex;flex-direction:column;}
  .board li{display:flex;flex-direction:column;gap:3px;font-size:13.5px;padding:9px 8px;margin:0 -8px;border-radius:9px;cursor:pointer;transition:background .13s;}
  .board li:hover{background:#f8f9fa;}
  .board li .li-r{display:flex;justify-content:space-between;gap:10px;align-items:center;}
  .board li .li-t{color:#3f454c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
  .board li:hover .li-t{color:#111;}
  /* 답변 한 줄 미리보기 — cs-data.js 원문에서 잘라 온다(정적 생성) */
  .board li .li-a{color:#8b929a;font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .board .tg{flex:none;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:-.01em;}
  .tg.t-info{color:#1d4ed8;background:#e7f5e8;} .tg.t-faq{color:#1d4ed8;background:#e9effe;} .tg.t-must{color:#c2410c;background:#fdeee0;}
  .bico.c-qa{background:#e7f5e8;} .bico.c-faq{background:#e9effe;} .bico.c-must{background:#fdeee0;}
  .board-more{margin-top:auto;padding:13px 8px 5px;margin-top:6px;border-top:1px solid #f1f3f5;font-size:12.5px;font-weight:700;color:#9aa1a9;display:flex;align-items:center;gap:5px;transition:color .15s;}
  .board:hover .board-more{color:var(--accent-d);}

  /* 후기 */
  .rev-summary{display:flex;align-items:center;gap:26px;background:#fff;border:1px solid #e9ecef;border-radius:18px;padding:20px 26px;margin-bottom:16px;flex-wrap:wrap;}
  .rs-score{display:flex;flex-direction:column;align-items:center;gap:3px;padding-right:26px;border-right:1px solid #f1f3f5;flex:none;}
  .rs-score b{font-size:36px;font-weight:900;letter-spacing:-.03em;line-height:1;color:#1b1f24;}
  .rs-stars{color:#f5a623;font-size:15px;letter-spacing:2px;}
  .rs-count{font-size:11.5px;color:var(--gray);font-weight:600;margin-top:2px;}
  .rs-bars{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px;max-width:440px;}
  .rs-row{display:flex;align-items:center;gap:11px;font-size:11.5px;color:var(--gray);font-weight:700;}
  .rs-row .lb{width:24px;flex:none;}
  .rs-track{flex:1;height:7px;background:#eaeef5;border-radius:20px;overflow:hidden;}
  .rs-fill{height:100%;background:linear-gradient(90deg,#2563eb,#1d4ed8);border-radius:20px;}
  .rs-row .pc{width:36px;text-align:right;flex:none;color:#8a9099;}
  .reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .review{position:relative;border:1px solid #e9ecef;border-radius:18px;padding:22px 20px 18px;background:#fff;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s,border-color .18s;}
  .review:hover{box-shadow:0 12px 28px rgba(17,24,39,.08);transform:translateY(-3px);border-color:#dfe3e8;}
  .review .qm{font-family:Georgia,"Times New Roman",serif;font-size:44px;line-height:.5;color:var(--accent);opacity:.2;font-weight:900;height:22px;}
  .review .rt{font-size:14px;font-weight:700;color:#2b2f36;line-height:1.55;letter-spacing:-.01em;min-height:66px;}
  .review .rs{color:#f5a623;font-size:13px;letter-spacing:1.5px;margin:12px 0 15px;}
  .review .rb{padding-top:14px;border-top:1px solid #f1f3f5;display:flex;align-items:center;gap:10px;}
  .review .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;flex:none;color:#fff;}
  .review:nth-child(1) .av{background:#2563eb;} .review:nth-child(2) .av{background:#3b82f6;}
  .review:nth-child(3) .av{background:#f59e0b;} .review:nth-child(4) .av{background:#8b5cf6;}
  .review .who{min-width:0;}
  .review .who b{font-size:13px;display:flex;align-items:center;gap:6px;}
  .review .who .vb{font-size:9.5px;font-weight:800;color:#1d4ed8;background:#e7f5e8;padding:1.5px 6px;border-radius:20px;letter-spacing:-.02em;}
  .review .who span{display:block;font-size:11px;color:#9aa1a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;margin-top:2px;}

  /* 카톡 문의 */
  .kko{background:#fae100;border-radius:18px;padding:24px 28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:42px 0 10px;}
  .kko h3{font-size:19px;font-weight:900;color:#3a1d1d;letter-spacing:-.02em;} .kko p{font-size:13.5px;color:#6b4a1a;margin-top:4px;}
  .kko .btn{margin-left:auto;background:#3a1d1d;color:#fae100;font-weight:800;font-size:14.5px;padding:13px 22px;border-radius:12px;border:0;cursor:pointer;font-family:inherit;}

  /* 푸터 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */

  @media(max-width:900px){.gnb{display:none;}.herowrap{grid-template-columns:1fr;}.hero{grid-template-columns:1fr;padding:26px 22px;min-height:0;}.hero h2{font-size:29px;}.hart img{max-width:220px;margin:0 auto;}.hprice{flex-direction:row;}.hprice li{flex:1;min-width:0;}.hcta a{flex:1;justify-content:center;height:48px;padding:0 14px;}.grid{grid-template-columns:repeat(2,1fr);}.boards{grid-template-columns:1fr;}.reviews{grid-template-columns:repeat(2,1fr);}.rev-summary{gap:18px;}.rs-score{padding-right:18px;}}
  @media(max-width:560px){.reviews{grid-template-columns:1fr;}.rs-score{border-right:0;padding-right:0;border-bottom:1px solid #f1f3f5;padding-bottom:14px;flex-direction:row;gap:10px;align-items:baseline;width:100%;justify-content:center;}.rs-bars{max-width:none;}}

  /* 화면에서만 숨기는 H1 (스크린리더·크롤러는 읽음) — 배너 히어로 레이아웃 유지용 */
  .a11y-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}




.seotext{max-width:980px;margin:34px auto 10px;padding:22px 24px;border:1px solid #e8eee6;border-radius:14px;background:#fbfdfa;line-height:1.75;color:#3d4a3a}
.seotext h2{font-size:18px;font-weight:800;color:#1e283e;margin:0 0 12px;border:0;padding:0}
.seotext h3{font-size:15px;font-weight:800;color:#22355e;margin:20px 0 8px;border:0;padding:0}
.seotext p{font-size:14px;margin:0 0 10px}
.seotext dl{margin:0}
.seotext dt{font-size:14px;font-weight:800;color:#1e283e;margin:12px 0 3px}
.seotext dd{font-size:13.5px;margin:0;color:#51624d}
.seotext ul{margin:0;padding-left:18px}
.seotext li{font-size:13.5px;margin:0 0 6px}
.seotext a{color:#244283;font-weight:700;text-decoration:underline}
@media(max-width:640px){.seotext{margin:24px 12px 10px;padding:18px 16px}}


  .poplayer{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;overflow:auto;padding:20px;}
  .poplayer[hidden]{display:none;}
  /* 세로형 이미지(비율 0.8) — 화면 높이 기준으로 최대한 크게, 세로로 잘리지 않게 (62vh*0.8 ≈ 높이 기준 폭) */
  .popbox{width:min(var(--pw,460px),92vw,calc(78vh * var(--par,0.8)));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.4);animation:popin .25s ease;}
  @keyframes popin{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
  .popimg{position:relative;display:block;} .popbox img{width:100%;height:auto;display:block;}
  .pophot{position:absolute;display:block;} /* .pophot:hover{background:rgba(37,99,235,.25);} 위치 확인용 */
  .popbar{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;background:#2b332a;color:#c1cbe1;font-size:13px;}
  .popbar .pophide{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;user-select:none;}
  .popbar .pophide input{cursor:pointer;}
  .popbar .popclose{background:transparent;border:0;color:#fff;font-size:13px;font-weight:700;cursor:pointer;padding:4px 6px;}
  .popbar .popclose:hover{color:#7ea6ff;}


/* ── 홈: 이용 방법 4단계 (todaysns 홈 짜임) ─────────────────────────── */
.hsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.hstep{display:block;padding:18px 18px 16px;border:1px solid #e9ecf2;border-radius:16px;background:#fff;
  text-decoration:none;transition:.15s;box-shadow:0 1px 2px rgba(16,24,40,.03);}
.hstep:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 26px rgba(16,24,40,.09);}
.hstep .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:var(--soft,#eef4ff);font-size:18px;margin-bottom:11px;}
.hstep b{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;font-weight:900;color:var(--accent-d);letter-spacing:.08em;}
.hstep b i{font-style:normal;font-size:11px;font-weight:800;color:#8a9099;
  background:#f2f5f9;border-radius:999px;padding:3px 8px;letter-spacing:0;}
.hstep .n{display:block;margin-top:7px;font-size:16px;font-weight:900;color:#12180f;letter-spacing:-.03em;}
.hstep .d{display:block;margin-top:5px;font-size:13px;color:#8a9099;font-weight:600;line-height:1.5;}

/* ── 홈: 플랫폼별 마케팅 (펼친 섹션) ────────────────────────────────
   ★ todaysns 홈의 같은 구역과 같은 짜임이다 — 이름·한 줄 소개·특징·대표 단가·주문 단추.
   ⚠ 열한 장을 세로로 쌓으면 홈이 끝나지 않는다. 두 칸 격자로 묶어 길이를 절반으로 줄인다.
   ⚠ 카드 높이를 고정하지 않는다. 플랫폼마다 특징 줄 수가 달라서 고정하면
     짧은 카드 아래에 빈 칸이 생기고 긴 카드는 글이 잘린다. */
.pmklist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.pmk{display:flex;flex-direction:column;border:1px solid #e9ecf2;border-radius:16px;background:#fff;
  padding:18px;box-shadow:0 1px 2px rgba(16,24,40,.03);transition:.15s;}
.pmk:hover{border-color:#d6dced;box-shadow:0 10px 26px rgba(16,24,40,.07);}
.pmk-hd{display:flex;align-items:center;gap:12px;}
.pmk .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;}
.pmk .ico svg{width:21px;height:21px;}
.pmk-t{min-width:0;}
.pmk-t h3{margin:0;font-size:16.5px;font-weight:900;color:#12141a;letter-spacing:-.025em;}
.pmk-t p{margin:4px 0 0;font-size:13px;font-weight:600;color:#8a9099;line-height:1.5;word-break:keep-all;}
.pmk-pt{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;}
.pmk-pt li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.7;color:#4b5563;word-break:keep-all;}
.pmk-pt li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:#c4cad4;}
.pmk-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0 0;}
.pmk-prods a{display:flex;flex-direction:column;gap:6px;padding:12px 13px;border:1px solid #eef1f6;
  border-radius:11px;background:#fafbfd;text-decoration:none;transition:.13s;}
.pmk-prods a:hover{border-color:var(--accent);background:#fff;}
.pmk-prods .pp-n{font-size:12.5px;font-weight:700;color:#39414f;line-height:1.4;word-break:keep-all;}
.pmk-prods .pp-p{font-size:13.5px;font-weight:900;color:#12141a;}
/* ⚠ margin-top:auto 가 단추 줄을 «카드 바닥»에 붙인다. 없으면 특징이 짧은 카드에서
     단추가 중간에 떠서 옆 카드와 줄이 안 맞는다. */
.pmk-cta{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;flex-wrap:wrap;}
.pmk-go{display:inline-block;padding:10px 17px;border-radius:11px;background:var(--accent);color:#fff;
  font-size:13.5px;font-weight:800;text-decoration:none;transition:.13s;}
.pmk-go:hover{background:var(--accent-d);}
.pmk-more{font-size:13px;font-weight:800;color:var(--accent-d);text-decoration:none;}
.pmk-more:hover{text-decoration:underline;}

/* ── 홈: 자주 묻는 질문 ─────────────────────────────────────────────
   ⚠ 답은 /faq 와 «같은 글»이다(config/cs.php 한 곳). 여기서 글자를 손보지 말 것. */
.hfaq{display:grid;gap:9px;}
.hfq{border:1px solid #e9ecf2;border-radius:14px;background:#fff;overflow:hidden;transition:.15s;}
.hfq[open]{border-color:#d6dced;box-shadow:0 8px 22px rgba(16,24,40,.06);}
.hfq>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;}
.hfq>summary::-webkit-details-marker{display:none}
.hfq>summary:hover{background:#fafbfd;}
.hfq .q{flex:1;min-width:0;font-size:14.5px;font-weight:800;color:#12141a;letter-spacing:-.02em;word-break:keep-all;}
.hfq .i{flex:none;color:#c4cad4;font-weight:900;font-size:17px;transition:transform .16s;}
.hfq[open] .i{transform:rotate(90deg);color:var(--accent-d);}
.hfq .a{padding:0 18px 17px;font-size:13.5px;line-height:1.8;color:#4b5563;word-break:keep-all;}

/* ── 홈: 플랫폼별 서비스 안내 ─────────────────────────────────────────
   ⚠ 열한 장을 다 펼치면 홈이 끝나지 않는다. 접어 두고 첫 장만 연다. */
.pfguide{display:grid;gap:10px;}
.pfitem{border:1px solid #e9ecf2;border-radius:16px;background:#fff;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.03);transition:.15s;}
.pfitem[open]{border-color:#d6dced;box-shadow:0 10px 26px rgba(16,24,40,.07);}
.pfitem>summary{list-style:none;display:flex;align-items:center;gap:13px;padding:15px 18px;cursor:pointer;}
.pfitem>summary::-webkit-details-marker{display:none}
.pfitem>summary:hover{background:#fafbfd;}
.pfitem .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;}
.pfitem .ico svg{width:20px;height:20px;}
.pf-t{flex:1;min-width:0;}
.pf-t b{display:block;font-size:15.5px;font-weight:800;color:#12141a;letter-spacing:-.02em;}
.pf-t span{display:block;margin-top:3px;font-size:13px;color:#8a9099;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-i{flex:none;color:#c4cad4;font-weight:900;font-size:17px;transition:transform .16s;}
.pfitem[open] .pf-i{transform:rotate(90deg);color:var(--accent-d);}

.pf-body{padding:2px 18px 18px;border-top:1px solid #f0f2f6;margin-top:2px;}
.pf-pt{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;}
.pf-pt li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.7;color:#4b5563;word-break:keep-all;}
.pf-pt li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:#c4cad4;}
.pf-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0 0;}
.pf-prods a{display:flex;flex-direction:column;gap:6px;padding:12px 13px;border:1px solid #eef1f6;
  border-radius:11px;background:#fafbfd;text-decoration:none;transition:.13s;}
.pf-prods a:hover{border-color:var(--accent);background:#fff;}
.pf-prods .pp-n{font-size:13px;font-weight:700;color:#39414f;line-height:1.4;}
.pf-prods .pp-p{font-size:14px;font-weight:900;color:#12141a;}
.pf-go{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:800;color:var(--accent-d);text-decoration:none;}
.pf-go:hover{text-decoration:underline;}
/* 접힌 칸 안의 문답 — 검색으로 들어온 사람이 실제로 읽는 본문이다 */
.pf-qa{display:grid;gap:15px;margin-top:15px;}
.pf-q h4{margin:0;font-size:14px;font-weight:800;color:#12141a;letter-spacing:-.02em;word-break:keep-all;}
.pf-q p{margin:6px 0 0;font-size:13.5px;line-height:1.8;color:#4b5563;word-break:keep-all;}

@media(max-width:900px){
  .hsteps{grid-template-columns:repeat(2,1fr);}
  .pf-prods{grid-template-columns:1fr;}
  .pmklist{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .hsteps{grid-template-columns:1fr;}
  .pf-t span{white-space:normal;}
  .pmk-prods{grid-template-columns:1fr;}
}


/* ── 홈: 소식 (todaysns 홈 「소식」 자리) ────────────────────────────
   ⚠ 갈래 배지(.cat)는 공지 화면(cs.css)에도 같은 이름으로 있다.
     두 파일이 한 화면에 같이 실리지 않으므로(홈=home.css / 공지=cs.css)
     겹쳐 덮어쓰는 일은 없다. 모양은 같게 맞춰 둔다. */
.hnews{border-top:2px solid #1b241a;}
.hnews a{display:flex;align-items:center;gap:14px;padding:15px 6px;border-bottom:1px solid #eaeef5;
  text-decoration:none;transition:.12s;}
.hnews a:hover{background:#fafbfd;}
.hnews a:hover .ti{color:var(--accent-d);}
.hnews .ti{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:#333;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hnews .dt{flex:none;font-size:12.5px;font-weight:600;color:#aab1bc;}
.hnews .cat{flex:none;display:inline-block;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;}
.hnews .cat.c-no{background:#eef4ff;color:#1d4ed8;}
.hnews .cat.c-ev{background:#fff2e8;color:#c2410c;}
.hnews .cat.c-up{background:#eefaf1;color:#15803d;}

@media(max-width:560px){
  .hnews a{flex-wrap:wrap;gap:7px 12px;}
  .hnews .ti{flex-basis:100%;order:2;white-space:normal;line-height:1.5;}
  .hnews .dt{order:1;}
}

/* ── 첫 화면 최근 후기 (2026-09-09) ────────────────────────────
   ⚠ 두 줄짜리다. 첫 화면은 «무엇을 파는가»를 말하는 자리라 여기가 커지면 안 된다.
   ⚠ 후기가 0건이면 blade 가 이 덩이를 아예 안 그린다. */
.trv{margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,.07)}
.trv-h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.trv-h b{font-size:12.5px;font-weight:800;letter-spacing:-.01em}
.trv-avg{font-size:11.5px;font-weight:800;color:#f59e0b}
.trv-h a{margin-left:auto;font-size:11.5px;font-weight:700;color:#8a94a6}
.trv-h a:hover{color:#2563eb}
.trv-i{display:flex;align-items:baseline;gap:7px;padding:3px 0;font-size:12px;line-height:1.5}
.trv-s{flex:none;color:#f59e0b;letter-spacing:-1px;font-size:10.5px}
.trv-b{flex:1;min-width:0;color:#4a5361;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trv-w{flex:none;color:#9aa2b1;font-size:11px;font-weight:700}

/* 실시간 주문 — 최근 후기와 같은 틀을 쓴다. 점만 깜빡인다 (2026-09-09)
   ⚠ 주문이 0건이면 blade 가 이 덩이를 아예 안 그린다. */
.tlive .trv-h b{display:inline-flex;align-items:center;gap:6px}
.tlive .dot{width:6px;height:6px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.15);animation:tliveb 1.8s ease-in-out infinite}
.tlive .trv-b b{font-weight:800;color:#2b3646}
@keyframes tliveb{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.tlive .dot{animation:none}}

/* 실시간 주문이 «상품 목록과 통계 사이»에 들어간다 (2026-09-09)
   ⚠ .feed 가 flex:1 로 남는 자리를 먹으므로, 이 덩이는 통계 바로 위에 붙는다.
     그게 노린 자리다 — 값을 훑은 «바로 다음»에 「지금도 들어온다」가 보인다. */
.trust .tlive{margin-top:12px;padding-top:12px}
.trust .tlive .trv-i{padding:2px 0}

/* ── 첫 화면 오른쪽 패널 — 플랫폼 타일 (2026-09-12) ──────────────
   🔴 예전 .feed 는 «상품 12줄 + 값»이었다. 지표가 줄마다 달라(팔로워/리뷰/조회/찜)
     비교가 안 됐고, 플랫폼 이름이 3~5글자 가변이라 열이 어긋났다.
   ★ 타일은 «읽는» 것이 아니라 «훑는» 것이다. 아이콘 색이 구분자다.
   ⚠ .ptile 은 <a> 다 — 타일 전체가 눌린다. 예전 줄은 링크가 아니었다.
   ⚠ 3열 고정이라 이름이 길어도 열이 안 밀린다. 그게 이 격자를 쓰는 이유다. */
.tpanel .th .thn{margin-left:auto;font-size:11px;font-weight:700;color:#9aa3af;letter-spacing:-.2px}
/* 🔴 flex:1 이 «반드시» 있어야 한다 (2026-09-12).
     .trust 는 세로 flex 이고, 데스크톱에서는 격자가 배너 높이만큼 늘려 준다.
     예전 .feed 에 flex:1 이 있어 남는 자리를 먹었는데, 타일로 바꾸면서 그게 빠졌다.
     그래서 타일 아래가 통째로 비어 보였다.
   ★ grid-auto-rows:1fr — 남는 자리를 네 줄이 «고르게» 나눠 가진다.
     한 줄만 늘어나면 격자가 어긋나 보인다.
   ⚠ minmax 의 72px 는 «최소»다. 화면이 짧아도 타일이 이보다 납작해지지 않는다. */
.ptiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:2px;
  flex:1;grid-auto-rows:minmax(72px,1fr)}
.ptile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:11px 4px 10px;border:1px solid #eef0f3;border-radius:11px;background:#fff;
  text-decoration:none;transition:border-color .14s,transform .14s,box-shadow .14s}
.ptile:hover{border-color:#d7dde7;transform:translateY(-1px);box-shadow:0 4px 12px rgba(17,24,39,.06)}
/* ⚠ 아이콘은 plat-icon 이 .ico 로 준다(색은 인라인). 여기서는 «크기만» 정한다 —
     색을 여기서 정하면 DB 에서 플랫폼 색을 바꿔도 화면이 안 바뀐다. */
.ptile .ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.ptile .ico svg{width:17px;height:17px}
/* ⚠ 「인스타그램」이 7글자라 3열에서 넘친다. label(짧은 이름)을 쓰고, 그래도 길면 줄인다. */
.ptile b{font-size:11.5px;font-weight:700;color:#222;letter-spacing:-.4px;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ptile .pn{font-size:10.5px;font-weight:700;color:var(--accent-d);background:#eaf6ea;
  padding:1px 6px;border-radius:5px;line-height:1.5}
@media(max-width:640px){
  /* 모바일에서도 3열을 유지한다 — 2열로 내리면 6행이 되어 예전 12줄과 다를 게 없어진다 */
  .ptiles{gap:6px}
  .ptile{padding:10px 3px 9px;border-radius:10px}
  .ptile .ico{width:27px;height:27px}
  .ptile b{font-size:11px}
}
/* ── 새로 연 플랫폼 뱃지 (2026-09-12) ──────────────────────────
   🔴 전에는 종수 칸 «안에» 「·NEW」를 글자로 붙였다. 「4종 ·NEW」가 되어
     칸이 꽉 차 답답했다. 모서리로 뺀다 — 상품 카드의 HOT·BEST 와 같은 자리다.
   ⚠ 타일 밖으로 살짝 나가게 둔다(top·right 음수). 안쪽에 두면 아이콘과 부딪힌다.
   ⚠ .ptile 에 position:relative 가 있어야 한다. overflow 는 주지 않는다 —
     주면 뱃지가 잘린다. */
.ptile{position:relative}
.ptile .nwb{position:absolute;top:-6px;right:-4px;z-index:2;
  font-size:9px;font-weight:900;letter-spacing:.02em;line-height:1;
  color:#fff;background:#1d4ed8;padding:4px 6px 3px;border-radius:999px;
  box-shadow:0 2px 6px rgba(29,78,216,.35)}
.ptile.is-new{border-color:#c7d7fb}
.ptile.is-new .pn{color:#1d4ed8;background:#e8efff}

/* ── 모바일 머리줄(검색·링크) 규칙은 «site.css» 한 곳에 있다 (2026-09-16) ──
   전에는 이 블록이 화면 CSS 일곱 벌에 그대로 복사돼 있었다. 한 벌만 고치면 그 화면만
   바뀌고 나머지 여섯은 옛 모양으로 남는다 — 실제로 그렇게 어긋났다. site.css 는 모든
   화면에 «화면 CSS 뒤에» 실리므로 거기 한 벌이면 족하다. */

/* ── 구역 머리줄 — 모바일에서 「전체 상품 보기 +」가 글자 중간에서 끊겼다 (2026-09-12)
   🔴 .sec-hd 가 flex row · space-between 인데 좁은 화면에서 <a> 가 눌려
     「전체 상품 보 / 기 +」로 잘렸다. 링크가 두 줄로 깨지면 눌러야 할 것으로 안 보인다.
   ★ 링크는 «줄이지 않는다»(flex:none + nowrap). 대신 제목 쪽이 줄어든다.
   ⚠ 그래도 좁으면 세로로 쌓는다 — 460px 아래. */
.sec-hd a{flex:none;white-space:nowrap}
.sec-hd .hd-l{min-width:0}
.sec-hd .hd-l h2{overflow-wrap:break-word}
@media(max-width:460px){
  .sec-hd{align-items:flex-start;gap:10px}
  .sec-hd h2{font-size:20px}
}

/* ── 배너 높이 잡기 (2026-09-12) ────────────────────────────
   🔴 왜 — 새 배너가 «정사각»(1254×1254)이다. 예전 것은 4:3 이라 그대로 흘려도
     됐는데, 정사각을 그대로 두면 폭만큼 세로가 길어진다.
     데스크톱에서는 오른쪽 타일 패널보다 훨씬 커지고,
     900px 에서는 herowrap 이 한 줄로 접혀 폭 전체를 쓰므로 «세로 900px» 이 된다.
   ★ 그림을 자르지 않는다. «칸»에 높이를 주고 object-fit 으로 담는다 —
     배너를 갈아도 다시 안 만든다.
   ★ 높이는 min(560px, 62vw) 다. 화면이 좁아지면 배너도 같이 줄어든다.
     1440px → 560 · 900px → 558 · 700px → 434. 어디서도 혼자 커지지 않는다.
   ⚠ 600px 이하(휴대폰)는 «건드리지 않는다». 거기서는 정사각이 오히려 맞다 —
     가로로 긴 그림이 173px 까지 납작해지던 문제를 정사각이 푼다.
   ⚠ cover 라 위아래가 조금 잘린다. 새 배너는 위아래 끝이 배경 그라데이션이라
     잘려도 문장이 안 상한다. 글자가 끝까지 찬 배너로 갈면 이 값을 다시 본다.
   ⚠ aspect-ratio 를 «반드시» 푼다. blade 가 그림 크기를 읽어
     style="aspect-ratio:1254/1254" 를 인라인으로 박는데, 그대로 두면
     높이를 묶는 순간 «폭도» 같이 묶여 칸 오른쪽이 텅 빈다(실제로 그랬다). */
@media(min-width:601px){
  /* 🔴 border-radius 가 inherit 이었다 (2026-09-16 고침).
       inherit 은 «부모의 값»을 받는 것인데 부모(.cine)에는 모서리가 없다 — 즉 0 이다.
       그래서 넓은 화면에서만 배너가 «각진 판»이 되어 있었다. 옆의 신뢰띠(.trust)와
       아래 단추줄은 둘 다 18px 라서, 배너만 혼자 각져 아래쪽이 흰 슬래브처럼 보였다.
     ⚠ 값을 여기 그대로 적는다. 위(.heroimg 기본)와 «같은 18px» 이다 — 한쪽만
       바꾸면 601px 을 넘나들 때 모서리가 달라진다. */
  .heroimg{aspect-ratio:auto !important;width:100%;height:min(560px,62vw);
    overflow:hidden;border-radius:18px}
  .heroimg img{width:100%;height:100%;object-fit:cover;object-position:center}
}

/* ── 601~1100px — 「글자가 잘리는 구간」을 없앴다 (2026-09-16) ─────
   🔴 무엇이 잘렸나 — 이 구간은 칸 높이가 62vw 라 «폭의 0.62배»다. 그런데 배너 그림은
     정사각(1254×1254)이라 cover 가 위아래를 388px 씩 잘라 냈다. 700px 화면에서
     「REAL GROWTH · REAL ENGAGEMENT · A BRIGHTER TOMORROW」 줄과 받침대의
     SNS MASTER 가 통째로 없어졌다. 자리를 옮겨서는 못 고친다 —
     글이 든 부분이 원본의 81%(y=90~1110)인데 62% 짜리 창으로는 어떻게 놓아도 모자란다.
   ★ 그래서 창을 «글이 든 만큼» 키운다. 높이를 vw 로 주지 않고 1254:1020 비율로 준다.
     폭이 얼마든 높이는 폭의 0.813배가 되고, 잘려 나가는 것은 위아래의 «빈 여백»뿐이다.
       601px → 489 · 700px → 569 · 768px → 625 · 900px → 732
     ⚠ 600px 이하(정사각 그대로, 폭의 1.0배)보다 «항상 낮다». 넓어질수록 낮아지는
       순서가 뒤집히지 않는다.
   ⚠ object-position 38% — 잘라낼 234px 중 위에서 90px, 아래에서 144px 을 버린다는 뜻이다.
     그림에서 글이 y=90 에서 시작해 y=1110 에서 끝나기 때문에 나온 값이다. 그림을 갈면
     이 두 값을 다시 재야 한다.
   ⚠ aspect-ratio 에 !important 가 필요하다 — blade 가 그림 실제 크기를 인라인 style 로
     박아 두는데(1254/1254) 인라인이 더 세다. */
@media(min-width:601px) and (max-width:1100px){
  .heroimg{aspect-ratio:1254/1020 !important;height:auto;}
  .heroimg img{object-position:center 38%;}
}

/* ── 배너 밑단의 «흰 띠»를 걷어낸다 (2026-09-16) ─────────────────
   🔴 무엇이 보였나 — 그림 맨 아래 30px 남짓은 받침대 «아래»의 거의 흰 여백이다.
     그 아래로 흰 단추줄까지 이어지니 배너 밑이 흰 슬래브처럼 끊겨 보였다.
   ★ 잘라내는 몫을 아래쪽에 더 준다(50% → 40%). 그림을 키우지 않고 «어디를 버릴지»만
     바꾸는 것이라 글자 크기도, 칸 크기도 그대로다.
   🔴 1100px 아래에서는 «건드리지 않는다». 거기서는 칸이 납작해(62vw) 이미 위아래를
     많이 잘라내고 있어서, 여기서 더 내리면 「REAL GROWTH…」 줄과 받침대의
     SNS MASTER 가 잘린다 — 두 번 겪은 일이다(2026-09-16 앞선 두 커밋).
   ⚠ 40% 보다 더 올리지 말 것. 원본 1254px 기준 그 글줄이 y=1020~1075 에 있고,
     1440px 화면에서 40% 는 그 아래로 24px 을 남긴다. 45% 면 거의 안 줄고,
     35% 면 받침대 아랫단이 잘린다. */
@media(min-width:1101px){
  .heroimg img{object-position:center 40%}
}

/* ── 썸네일 검은 테두리 (2026-09-12) ────────────────────────────
   🔴 .thumb-img 배경이 #0d0d0d(거의 검정)였다. 옛 썸네일이 검은 바탕이던 시절 값이다.
     지금 썸네일 51장은 전부 «흰 바탕 정사각»이라, 칸도 정사각이라 원래는 딱 맞는다.
     그런데 카드 폭이 소수점으로 떨어지는 자리에서 0.5px 틈이 생기고
     그 틈으로 검정이 비쳐 «테두리에 검은 선»처럼 보였다.
   ★ 배경을 흰색으로 바꿨다. 틈이 생겨도 안 보인다.
   ⚠ object-fit 은 contain 그대로 둔다. cover 로 바꾸면 나중에 정사각이 아닌
     썸네일이 들어왔을 때 «글자가 잘린다» — 썸네일에는 글자가 들어 있다.
   ⚠ 배지(HOT·BEST)와 시간 딱지는 그대로다 — 그림 위에 얹히는 것이라 배경과 무관하다. */
.thumb-img{background:#fff}


/* ── 모바일 머리줄이 «붙어 있다» (2026-09-12) ────────────────────
   🔴 로그인하면 한 줄에 다섯이 들어간다 — 로고 · 잔액 · 마이페이지 · 로그아웃 · ⚙관리자.
     640px 에서 gap 이 8px 뿐이라 서로 닿아 보였다. 로고가 27px 로 크기까지 했다.
   ★ 고친 것 셋
     ① 줄 높이를 «고정 64px 에서 auto» 로 — 안 들어가면 다음 줄로 내려간다
     ② 사이 간격을 10 → 14px, 로고를 22px 로
     ③ 「마이페이지」 글자 링크는 좁은 화면에서 뺀다 — 잔액 칸이 이미 같은 곳으로 간다
   ⚠ 잔액 칸(.bal)은 «절대» 숨기지 않는다. 돈이 얼마 남았는지가 이 줄의 핵심이다.
   ⚠ ⚙관리자도 숨기지 않는다 — 사장님이 화면을 보다가 바로 들어가는 길이다. */
/* ⚠ 실제 플랫폼 로고(.ico-logo) 규칙은 css/icon.css 에 있다 — 2026-09-13에 옮겼다.
     여기에만 두니 첫 화면만 멀쩡하고 /services · 상품 상세에서 96px 로 나왔다. */


/* ⚠ 안쪽 감싼 것(.faqa-i)이 «반드시» 있어야 한다.
     grid-template-rows:0fr 는 «자식 요소»를 눌러 접는 방식이라,
     글자가 div 에 그대로 들어 있으면 접히지 않는다. */
.faqa-i{min-height:0;overflow:hidden}


/* ── 홈 자주묻는질문도 같은 방식으로 (2026-09-12) ── */
details.hfq > .a{display:grid;grid-template-rows:0fr;overflow:hidden;
  padding-top:0;padding-bottom:0;opacity:0;
  transition:grid-template-rows .22s ease,opacity .18s ease,padding-bottom .22s ease}
details.hfq[open] > .a{grid-template-rows:1fr;opacity:1;padding-bottom:17px}
.hfq .i{transition:transform .22s ease,color .18s ease}
@media(prefers-reduced-motion:reduce){details.hfq > .a,.hfq .i{transition:none}}