/* ============================================================
   공통 껍데기 — 모든 화면이 함께 쓰는 것만 둔다
   ------------------------------------------------------------
   🔴 왜 생겼나 (2026-09-16)
     화면 CSS 일곱 벌(home·list·category·product·trial·legal·cs)은 snspang 의
     <style> 를 화면마다 통째로 옮겨 온 것이라, 머리줄·메가메뉴·푸터·웹폰트처럼
     «모든 화면이 같이 쓰는 것»이 일곱 벌씩 복사돼 있었다. 세어 보니 다섯 벌 이상에
     똑같이 든 규칙이 126개, 52KB 였다.
     복사본은 조용히 어긋난다 — 실제로 메가메뉴가 화면마다 67px 다른 높이로 열렸고,
     푸터 여백이 두 화면에서만 빠져 있었다.

   ★ 순서 — 이 파일은 화면 CSS «앞»에 실린다. 옮겨 오기 전에도 이 규칙들은 각 파일의
     맨 앞에 있었고 화면 전용 규칙이 그 뒤에서 덮었다. 앞에 싣는 것이 그 순서를 그대로
     지키는 길이다. (뒤에서 덮어야 하는 «고침»은 site.css 로 간다 — 그 파일은 뒤에 실린다.)

   ⚠ 한 갈래씩 옮긴다. 한 번에 다 옮기면 무엇이 깨졌는지 못 찾는다.
     옮긴 순서: ① 웹폰트 · ② 푸터 · ③ 머리줄 · ④ 메가 드롭다운 · ⑤ 기본값·리셋 · ⑥ 이동 경로·메가 카드 높이
   ============================================================ */

/* ⑤ 기본값·리셋 — 이 파일의 «맨 앞»에 둔다.
     옮기기 전에도 화면 CSS 맨 앞에 있던 자리다. 뒤에 두면 리셋이 껍데기 규칙을 덮는다.
   ⚠ 상품 CSS 의 :root 에는 --mint 가 하나 더 있었다. 상품 화면만 쓰는 색이라 그쪽에
     남겨 뒀다 — 공통이 아니다. */
:root{--accent:#2563eb;--accent-d:#1d4ed8;--ink:#222;--gray:#757575;--line:#efefef;--soft:#f5f8ff;}
*{box-sizing:border-box;margin:0;padding:0;}
/* 커서·선택 정리: 클릭요소는 손모양(pointer), 텍스트 편집커서(I-beam)·드래그선택 이질감 제거 */
a,button,label,summary,[role=button],[onclick]{cursor:pointer;}
body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;cursor:text;}
select{cursor:pointer;}
html{scroll-behavior:smooth;}
body{font-family:"Pretendard","Pretendard Variable","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;font-size:15px;}
img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;}
.democonf{background:#2b332a;color:#b9c2d4;font-size:12px;text-align:center;padding:6px;} .democonf b{color:#7ea6ff;}
.coupon{background:#111;color:#fff;text-align:center;font-size:13px;font-weight:600;padding:11px;} .coupon b{color:#7ea6ff;}

/* ① 웹폰트 — css/font.css 로 옮겼다 (2026-09-16). 글자 범위별 92조각짜리
     동적 서브셋이라 한 덩이(483KB)를 통째로 받지 않는다. 마이페이지도 같은 파일을 본다. */

/* ② 푸터 — 모든 화면에서 같은 모양이다(partials/footer.blade.php 한 장을 쓴다).
     🔴 옮기기 전에 `margin-top:20px` 이 주문·상품 두 벌에만 빠져 있었다. 그 두 화면에서만
       푸터가 본문에 20px 더 붙어 있었다. 여기서 한 값으로 맞춘다.
     ⚠ site.css 에도 같은 취지의 한 줄(footer{margin-top:20px})이 있다 — 복사본이 살아
       있을 때 급히 맞춘 것이다. 지금은 이 파일이 원본이고, 그쪽은 그대로 둬도 값이 같아
       해가 없다. 다음에 그 줄을 지울 때 이 주석을 같이 지울 것. */
footer{background:#fafafa;border-top:1px solid var(--line);color:#888;padding:36px 0 46px;font-size:13px;line-height:1.9;margin-top:20px;}
footer .fnav{display:flex;gap:18px;font-weight:700;color:#333;margin-bottom:16px;flex-wrap:wrap;} footer .fnav a:hover{color:#111;}
footer .biz strong{color:#333;} footer .biz .sep{color:#ccc;margin:0 7px;} footer .acc{margin-top:12px;color:#999;} footer .copy{margin-top:14px;color:#aaa;font-size:12px;}

/* ③ 머리줄 — 로고줄(.hdr-top) · 메뉴줄(header.mega) · 검색(.hsearch)
     🔴 일곱 벌을 견주니 세 군데가 어긋나 있었다. 셋 다 «죽은 규칙»이라 골라내고 옮겼다.
       ① .info a.on — 지금 보고 있는 화면의 머리줄 링크를 파랗게 하는 규칙인데,
          네 벌(list·trial·legal·cs)에만 있었다. 그런데 머리줄 blade 도 app.js 도
          .info a 에 .on 을 «붙이지 않는다» — 어느 화면에서도 안 걸린다.
       ② .gnb a.free.on — trial.css 한 벌에만. 같은 이유로 안 걸린다.
       ③ .brand .w1/.w2/.lf — 로고가 글자였던 시절 규칙이다. 지금 로고는 <img> 다.
     ★ 셋 다 빼고 옮겼다. 「지금 화면 표시」를 살리고 싶으면 blade 에서 .on 을 붙이는 것이
       먼저다 — 그때 규칙을 여기 한 곳에 다시 넣으면 된다.
     ⚠ 모바일(≤900px)에서 이 줄을 한 줄로 붙이는 규칙은 site.css 에 있다. 그쪽은 화면 CSS
       «뒤»에 실려야 이기는 «고침»이라 일부러 나눠 두었다. */
/* ===== 헤더: 로고줄 + 메뉴줄 ===== */
.hdr-top{background:#fff;border-bottom:1px solid var(--line);}
.hdr-top .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:80px;gap:20px;}
.brand{justify-self:center;display:inline-flex;align-items:flex-start;font-size:27px;font-weight:900;letter-spacing:-.055em;line-height:1;}
.acct{justify-self:end;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;white-space:nowrap;}
.acct a{cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.acct a.login{color:#2563eb;border:1px solid #2563eb;padding:8px 16px;border-radius:8px;font-weight:700;} .acct a.login:hover{background:#2563eb;color:#fff;}
.acct a.signup{background:#2563eb;color:#fff;padding:9px 18px;border-radius:8px;font-weight:700;} .acct a.signup:hover{background:#1d4ed8;}
.acct a.mypage{color:#555;} .acct a.mypage:hover{color:var(--accent-d);} .acct svg{width:16px;height:16px;}
.acct .only-in{display:none;} body.logged-in .acct .only-out{display:none;} body.logged-in .acct .only-in{display:inline-flex;}
/* 메뉴줄 (sticky) */
header.mega{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);}
.navrow{display:flex;align-items:center;height:56px;position:relative;}
.gnb{display:flex;align-items:center;gap:26px;font-size:15.5px;font-weight:700;color:#333;white-space:nowrap;}
.gnb a:hover{color:var(--accent-d);} .gnb a.free{color:var(--accent-d);}
.navrow .sp{flex:1;}
.info{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:600;color:#aaa;white-space:nowrap;margin-right:20px;}
.info a{cursor:pointer;} .info a:hover{color:var(--accent-d);}
.hsearch{display:flex;align-items:center;gap:7px;background:#f4f5f7;border:1px solid #eceef1;border-radius:999px;padding:8px 15px;width:210px;transition:.15s;}
/* mobile-header-fix */
@media(max-width:900px){.hsearch{display:none;}}
@media(max-width:640px){
  .hdr-top .wrap{grid-template-columns:auto 1fr;gap:10px;height:64px;}
  .hdr-top .wrap>span:first-child{display:none;}
  .brand{justify-self:start;}
  .acct{justify-self:end;gap:8px;}
  .acct a.login{padding:7px 12px;}
  .acct a.signup{padding:8px 13px;}
}
.hsearch:focus-within{border-color:var(--accent);background:#fff;} .hsearch input{border:0;background:transparent;outline:0;font-size:13px;flex:1;min-width:0;color:var(--ink);}
.hsearch button{border:0;background:transparent;padding:0;margin:0;cursor:pointer;color:#999;display:grid;place-items:center;} .hsearch svg{width:16px;height:16px;display:block;}

/* ④ 메가 드롭다운 — 판(.mega-panel) · 카드(.mcard) · 프로모(.mega-promo)
     ★ 네 덩어리가 «순서대로» 겹쳐 쓰는 구조다. 순서를 바꾸면 모양이 달라진다 —
       ㉠ 기본형 → ㉡ 카드 프리미엄 v4 → ㉢ 레이아웃 정리(2026-08-20) → ㉣ 높이 조이기.
       뒤의 둘은 !important 로 앞을 덮는다. 순서 그대로 옮겼다.
     🔴 일곱 벌을 견주니 셋이 달랐다. 옮기면서 정리했다.
       ① .mcard .pr — 카드에 단가를 적던 시절 규칙이다. 지금 메가 카드에는 .pr 이 없다
          (플랫폼 이름 + 상품 링크 넷 + 전체보기뿐). 주문·상품 두 벌에만 남아 있었고
          어디서도 안 걸린다 — 뺐다.
       ② 상품 CSS 의 ㉠ 기본형 .mcard/.mcard:hover 가 혼자 달랐다. 그런데 ㉡ 이 같은
          선택자를 다시 적어 덮으므로 보이는 결과는 일곱 벌이 같았다. 기준(홈)으로 맞췄다.
       ③ 「메가 드롭다운」 주석이 세 벌에만 있었다 — 주석이라 영향 없다.
     ⚠ .mcard{min-height:0} 은 site.css 에 있다. 복사본이 살아 있을 때 화면 CSS 뒤에서
       덮어야 했던 고침이라 거기 뒀는데, 이제 원본이 여기 있으니 다음에 합쳐도 된다. */
/* 메가 드롭다운 */
header.mega .gnb a.grp{padding:18px 0;display:inline-flex;align-items:center;gap:5px;}
header.mega .gnb a.grp .cv{width:13px;height:13px;transition:transform .15s;opacity:.55;}
header.mega .gnb a.grp.open{color:var(--accent-d);} header.mega .gnb a.grp.open .cv{transform:rotate(180deg);opacity:1;}
.mega-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 20px 44px rgba(0,0,0,.10);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .16s,transform .16s;z-index:60;}
.mega-panel.open{opacity:1;visibility:visible;transform:none;}
.mega-panel .mp{padding:26px 0 10px;}
.mphead{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.mphead b{font-size:18px;font-weight:800;color:var(--ink);} .mphead span{font-size:12px;color:#aaa;font-weight:600;}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.mcard{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid #eceef1;border-radius:14px;transition:.14s ease;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);}
.mcard:hover{border-color:#d0d5dd;box-shadow:0 8px 20px rgba(16,24,40,.09);transform:translateY(-2px);}
.mpfoot{display:flex;justify-content:flex-end;padding:14px 0 2px;margin-top:10px;border-top:1px solid var(--line);}
.mpfoot a{font-size:13px;font-weight:700;color:var(--accent-d);display:inline-flex;align-items:center;gap:5px;} .mpfoot a:hover{gap:8px;}

/* 메가메뉴 카드 프리미엄 v4 (서비스 링크 카드) */
.mega-panel{box-shadow:0 30px 60px rgba(16,24,40,.16);border-top:2px solid #2563eb;}
.mega-panel .mp{padding:22px 0 14px;}
.mphead{align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #eef1f6;}
.mphead b{font-size:17px;font-weight:900;color:#0f1420;letter-spacing:-.03em;}
.mphead span{font-size:12.5px;color:#8a90a0;font-weight:600;}
.mega-body{display:flex;gap:16px;align-items:stretch;}
.mega-body .mega-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;align-content:start;}
.mcard{display:flex;flex-direction:column;align-items:stretch;padding:16px 16px 14px;border:1px solid #e9ecf2;border-radius:14px;background:#fff;box-shadow:none;transition:.16s ease;}
.mcard:hover{border-color:#cfd8ea;box-shadow:0 8px 20px rgba(16,24,40,.07);transform:none;}
.mc-hd{display:flex;align-items:center;gap:10px;padding-bottom:11px;margin-bottom:9px;border-bottom:1px solid #f0f2f6;text-decoration:none;}
.mc-hd .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;}
.mc-hd .ico svg{width:19px;height:19px;}
.mc-hd b{font-size:15px;font-weight:800;color:#12141a;letter-spacing:-.01em;}
.mc-links{list-style:none;display:flex;flex-direction:column;gap:1px;margin:0;padding:0;flex:1;}
.mc-links a{display:block;font-size:12.5px;color:#5b6472;padding:4px 0;text-decoration:none;transition:.1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}  /* 한 줄 고정 — 패널 높이 통일 */
.mc-links a:hover{color:#2563eb;padding-left:3px;}
.mc-more{display:inline-block;margin-top:9px;font-size:12px;font-weight:800;color:#1d4ed8;text-decoration:none;}
.mc-more:hover{text-decoration:underline;}
.mega-promo{flex:none;width:216px;background:linear-gradient(155deg,#2563eb,#1a44c2);border-radius:15px;padding:22px 18px;color:#fff;display:flex;flex-direction:column;text-decoration:none;transition:.16s;}
.mega-promo:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(37,99,235,.34);}
.mega-promo .mp-tag{display:inline-block;align-self:flex-start;background:rgba(255,255,255,.18);font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;margin-bottom:13px;color:#fff;}
.mega-promo .mp-h{font-size:17px;font-weight:900;line-height:1.35;letter-spacing:-.02em;color:#fff;}
.mega-promo .mp-d{font-size:12px;color:rgba(255,255,255,.82);margin-top:8px;line-height:1.5;flex:1;}
.mega-promo .mp-go{margin-top:14px;font-size:12.5px;font-weight:800;background:#fff;color:#1d4ed8;padding:9px 12px;border-radius:9px;text-align:center;}
.mpfoot{margin-top:14px;padding-top:14px;}
.mpfoot a{color:#1d4ed8;font-weight:800;}

/* ── 메가드롭 레이아웃 정리 (2026-08-20) ─────────────────────────────
 문제: 무료체험 프로모 박스가 오른쪽에서 216px 를 세로로 먹어서
      카드 6장이 908px 를 나눠 갖고(장당 141px), 안쪽 여백 32px 를 빼면
      글자 자리가 109px 밖에 안 됐다. 그래서 이름이 …로 잘렸다.
 해결: 프로모를 **아래 가로 띠**로 내린다.
      → 카드가 1,140px 를 나눠 쓴다(장당 180px, 글자 자리 148px)
      → 프로모는 세로 250px 대신 가로 띠 한 줄이라 패널이 오히려 짧아진다 */
.mega-body{flex-direction:column !important;gap:14px !important;align-items:stretch !important;}
.mega-grid{width:100% !important;}
.mcard{padding:15px 14px 13px !important;}
.mc-links a{font-size:12.5px !important;}

/* 프로모 = 가로 띠 */
.mega-promo{width:100% !important;flex-direction:row !important;align-items:center !important;
gap:14px !important;padding:13px 18px !important;border-radius:13px !important;}
.mega-promo .mp-tag{margin-bottom:0 !important;flex:none !important;align-self:center !important;}
.mega-promo .mp-h{font-size:15px !important;line-height:1.3 !important;flex:none !important;}
.mega-promo .mp-h br{display:none !important;}
.mega-promo .mp-d{margin-top:0 !important;flex:1 1 auto !important;font-size:12.5px !important;}
.mega-promo .mp-go{margin-top:0 !important;flex:none !important;white-space:nowrap !important;padding:9px 16px !important;}

@media(max-width:900px){
.mega-promo{flex-direction:column !important;align-items:flex-start !important;}
.mega-promo .mp-go{align-self:stretch !important;text-align:center !important;}
}

/* ── 높이 조이기 ────────────────────────────────────────────────
 프로모를 아래로 내리면서 늘어난 높이를 여백에서 되찾는다.
 글자 크기는 그대로 두고 **여백만** 줄인다 — 읽기는 나빠지지 않는다. */
.mp{padding:16px 0 12px !important;}
.mcard{padding:12px 13px 11px !important;gap:8px !important;}
.mc-hd{gap:9px !important;}
.mc-links{gap:0 !important;}
.mc-links a{padding:2px 0 !important;line-height:1.5 !important;}
.mc-more{margin-top:6px !important;}
.mega-promo{padding:10px 16px !important;}
.mega-body{gap:11px !important;}

/* ⑤-b 떠돌이 넷 — 갈래는 위와 같은데 파일 안에서 멀리 떨어져 있던 것들이다.
     원래 순서를 지킨다: 640px 머리줄 → 400px 로고 → 메가 세로쌓기 → 모바일 입력칸.
   ⚠ 400px 은 640px «뒤»여야 이긴다. 좁은 쪽이 나중이다.
   ⚠ 모바일 입력칸 규칙(16px·44px)은 :not() 을 여덟 번 써서 명시도가 0,7,1 로 높다.
     머리줄 검색칸만 그 44px 을 벗어나는데, 그 예외는 site.css 에 있다. */
@media(max-width:640px){
  .hdr-top .wrap{height:auto;min-height:60px;padding-top:9px;padding-bottom:9px;
    gap:14px;row-gap:8px;align-content:center}
  .brand{font-size:22px}
  .acct{gap:12px;font-size:12.5px;flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
  .acct .mypage{display:none}
  .acct .bal{display:inline-flex}
}
@media(max-width:400px){
  /* 제일 좁은 화면 — 여기서도 붙지 않게 한 단계 더 줄인다 */
  .brand{font-size:20px}
  .acct{gap:10px;font-size:12px}
}

@media(max-width:900px){.mega-body{flex-direction:column;}.mega-promo{width:auto;}}

/* 입력칸 — iOS 자동 확대 방지(16px)와 손가락 크기(44px)
   🔴 둘을 «다른 폭»에 건다 (2026-09-16).
     전에는 둘 다 640px 아래에만 걸려 있었다. 그런데 iOS 는 «태블릿에서도» 16px 보다
     작은 칸을 누르면 화면을 당긴다 — 641~900px 에서 머리줄 검색 13px, 상품 주소칸 14px,
     고객센터 검색 14px, 로그인 모달 14.5px 였다. 아이패드에서 칸을 누를 때마다 확대됐다.
   ★ 글씨 크기는 900px 까지, 최소 높이 44px 은 640px 까지만.
     44px 을 900px 까지 올리면 머리줄 검색칸이 32 → 50px 이 되어 태블릿 머리줄이
     51 → 69px 로 커진다(2-AW 에서 줄여 놓은 것이 되돌아간다). 확대를 막는 것은
     «글씨 크기»뿐이므로 높이는 따라갈 이유가 없다. */
@media(max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]),select,textarea,.form-control{font-size:16px;}
}
@media(max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]),select,textarea,.form-control{min-height:44px;}
}






/* ⑥ 이동 경로(.crumb) — 여섯 벌에 복사돼 있었다. 홈에는 없고, 상품만 여백이 다르다.
     공통을 여기 두고 상품의 여백 한 줄만 product.css 에 남겼다. */
.crumb{font-size:12.5px;color:var(--gray);padding:16px 0 0;font-weight:600;}
.crumb span{margin:0 6px;color:#ccc;} .crumb a:hover{color:var(--accent-d);}

/* ⑥-b 메가 카드 높이 — 복사본이 살아 있을 때 화면 CSS «뒤»(site.css)에서 덮어야 했던
     고침이다. 이제 메가 규칙의 원본이 이 파일에 있으므로 여기로 합쳤다.
     🔴 min-height:278px 이 세 벌에만 있어 메뉴가 화면마다 67px 다른 높이로 열렸다(2-AX). */
.mcard{min-height:0}