/* ════════ 팔레트 ════════
   메인:  연두  #7BBF45 / 연베이지 #F6F0E4
   섹션별 포인트:
     About    — 살구 핑크   #FFCBA4 / #FFF0E8
     Services — 라벤더      #C8BAF0 / #F0EDFB
     Products — 민트        #A8E4D8 / #E8FAF7
     Mission  — 연두 진하게 #7BBF45 (다크 카드)
     Footer   — 다크브라운  #3A2808 (푸터만)
════════════════════════ */
@import url('responsive.css');

:root {
  --dark:   #3A2808;

  --green:  #7BBF45;
  --gm:     #A2D468;
  --gl:     #C8E8A0;
  --gp:     #E8F6D4;

  --beige:  #F6F0E4;
  --beige2: #FBF8F2;
  --beige3: #FFFEFB;

  /* 섹션 포인트 */
  --apricot:    #FFCBA4;
  --apricot-lt: #FFF0E8;
  --lavender:   #C8BAF0;
  --lavender-lt:#F2EEFB;
  --mint:       #A8E4D8;
  --mint-lt:    #E8FAF7;

  --amber: #C8880A;

  --text:  #2A1E06;
  --mid:   #5C4420;
  --light: #967850;
  --muted: #C4A870;
  --white: #ffffff;
  --sh:    rgba(42,30,6,.1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans KR',sans-serif;background:var(--beige3);color:var(--text);overflow-x:hidden}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--gm);border-radius:4px}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:64px;background:rgba(255,254,251,.95);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--beige);
  display:flex;align-items:center;justify-content:space-between;padding:0 6%;
  transition:box-shadow .3s;
}
nav.sh{box-shadow:0 3px 22px var(--sh)}
.logo{font-family:'Gaegu',cursive;font-size:1.5rem;font-weight:700;color:var(--dark)}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{font-size:.85rem;font-weight:500;color:var(--mid);text-decoration:none;transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:2px;background:var(--green);border-radius:2px;transform:scaleX(0);transition:transform .2s}
.nav-links a:hover{color:var(--dark)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-r{display:flex;align-items:center;gap:14px}
.n-ico{font-size:1.1rem;cursor:pointer;color:var(--mid)}
.btn-nav{background:var(--amber);color:#fff;border:none;border-radius:50px;padding:10px 24px;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}
.btn-nav:hover{background:var(--dark);transform:translateY(-1px)}

/* ── NAV USER DROPDOWN ── */
.nav-user-wrap { position: relative; display: flex; align-items: center; }
.nav-user-btn { display: flex; align-items: center; gap: 5px; }
.nav-arrow { font-size: .65rem; transition: transform .2s; }
.nav-user-wrap.open .nav-arrow,
#nav-dropdown.open ~ * .nav-arrow { transform: rotate(180deg); }
#nav-user-btn.active .nav-arrow { transform: rotate(180deg); }

.nav-dropdown {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    background: #fff; border-radius: 14px;
    box-shadow: 0 8px 28px rgba(42,30,6,.14);
    border: 1px solid var(--beige); min-width: 160px;
    z-index: 400; overflow: hidden;
    animation: fadeDown .18s ease;
}
.nav-dropdown.open { display: block; }
.nd-item {
    padding: 11px 16px; font-size: .83rem; color: var(--mid);
    cursor: pointer; transition: background .15s;
    display: flex; align-items: center; gap: 8px;
}
.nd-item:hover { background: var(--beige2); color: var(--dark); }
.nd-logout:hover { color: #e74c3c; background: #fff5f5; }
.nd-divider { height: 1px; background: var(--beige); margin: 0; }

/* ── HERO ── */
.hero{margin-top:64px;height:calc(100vh - 64px);min-height:580px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}

/* 좌: 베이지 */
.hl{background:var(--beige);padding:9% 7% 7% 9%;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
/* 블러 점 1 — 왼쪽 상단 */
.hl::before{content:'';position:absolute;top:-60px;left:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(123,191,69,.2) 0%,transparent 70%);pointer-events:none}
/* 블러 점 2 — 오른쪽 "더 알뜰하게" 옆 */
.hl::after{content:'';position:absolute;top:32%;right:-30px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(123,191,69,.18) 0%,transparent 70%);pointer-events:none}
/* 블러 점 3 — 버튼 오른쪽 옆 */
.hl-dot{position:absolute;border-radius:50%;pointer-events:none}
.hl-dot.d3{width:180px;height:180px;top:58%;left:48%;background:radial-gradient(circle,rgba(123,191,69,.16) 0%,transparent 70%)}
/* 블러 점 4 — 왼쪽 하단 (작게) */
.hl-dot.d4{width:120px;height:120px;bottom:22%;left:-20px;background:radial-gradient(circle,rgba(123,191,69,.18) 0%,transparent 70%)}

.h-badges{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.h-badge{border-radius:20px;padding:5px 13px;font-size:.72rem;font-weight:600;letter-spacing:.4px}
.h-badge.g{background:rgba(123,191,69,.15);border:1px solid rgba(123,191,69,.35);color:#4E8A20}
.h-badge.a{background:rgba(200,136,10,.12);border:1px solid rgba(200,136,10,.3);color:var(--amber)}

.h-title{font-family:'Gaegu',cursive;font-size:clamp(1.9rem,3.8vw,3.1rem);font-weight:700;line-height:1.32;color:var(--dark)}
.h-title .g{color:var(--green)}
.h-title .a{color:var(--amber)}
.h-sub{color:var(--mid);font-size:.9rem;line-height:1.85;margin-top:16px;max-width:360px}

.btn-hero{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;border:none;border-radius:50px;padding:14px 34px;margin-top:26px;font-size:.92rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 6px 20px rgba(123,191,69,.38)}
.btn-hero:hover{background:#5E9E30;transform:translateY(-2px);box-shadow:0 10px 28px rgba(123,191,69,.48)}
.btn-hero .ico{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:.85rem}

.h-bot{display:flex;padding-top:24px;border-top:1px solid rgba(92,68,32,.15)}
.hst{padding-right:22px}
.hst+.hst{padding-left:22px;border-left:1px solid rgba(92,68,32,.15)}
.hst-n{font-family:'Gaegu',cursive;font-size:1.8rem;font-weight:700;color:var(--dark);display:block}
.hst-l{font-size:.7rem;color:var(--muted);margin-top:2px;display:block}
.hst-av{display:flex;margin-top:5px}
.hst-av span{width:22px;height:22px;border-radius:50%;border:2px solid var(--beige);background:var(--gl);display:flex;align-items:center;justify-content:center;font-size:.72rem;margin-left:-5px}
.hst-av span:first-child{margin-left:0}
.h-cats{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.h-cat{background:rgba(92,68,32,.07);border:1px solid rgba(92,68,32,.14);color:var(--mid);border-radius:20px;padding:5px 12px;font-size:.72rem;cursor:pointer;transition:all .2s}
.h-cat:hover,.h-cat.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}

/* 우: 3분할 — 연두/베이지/연두중간 */
.hr{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;overflow:hidden}
.hp{position:relative;display:flex;align-items:center;justify-content:center;font-size:clamp(4rem,7vw,6rem);overflow:hidden}
.hp:hover .hpi{transform:scale(1.07)}
.hpi{transition:transform .5s;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.hp1{background:linear-gradient(145deg,var(--gm),var(--green));grid-column:1/span 2}
.hp2{background:linear-gradient(145deg,#A8C870,#7BBF45)}
.hp3{background:linear-gradient(145deg,#C8DFA0,#A8C870)}
.hp-lbl{position:absolute;bottom:12px;left:12px;background:rgba(0,0,0,.38);backdrop-filter:blur(6px);color:#fff;font-size:.68rem;padding:4px 10px;border-radius:10px}
.hp-fl{position:absolute;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:.73rem;font-weight:700;color:var(--dark);white-space:nowrap;animation:bob 3s ease-in-out infinite}
.hp-fl.f1{top:14px;right:14px}
.hp-fl.f2{bottom:52px;right:14px;animation-delay:1.3s}
.hp-fl .fn{font-size:1rem;color:var(--amber);display:block}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ── ABOUT  배경: 베이지 ── */
.about-sec{padding:96px 8%;background:var(--beige2)}
.about-grid{display:grid;grid-template-columns:200px 1fr;gap:60px;align-items:start}
.al .tag{display:inline-flex;align-items:center;gap:6px;color:var(--amber);font-size:.75rem;font-weight:700;font-family:'Gaegu',cursive;letter-spacing:.8px;margin-bottom:14px}
.al .tag::before{content:'';width:18px;height:2px;background:var(--amber)}
.big-n{font-family:'Gaegu',cursive;font-size:3.6rem;font-weight:700;color:var(--amber);line-height:1;display:block}
.big-l{color:var(--muted);font-size:.82rem;margin-top:5px;display:block}
.ar h2{font-family:'Gaegu',cursive;font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;color:var(--dark);line-height:1.4;margin-bottom:16px}
.ar h2 u{text-decoration-color:var(--green)}
.ar-desc{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:.87rem;color:var(--mid);line-height:1.85;margin-bottom:22px}

/* About 카드: 살구/하늘/연두 */
.acards{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:390px}
.ac{border-radius:20px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;font-size:3.8rem;transition:transform .3s;cursor:default}
.ac:hover{transform:scale(1.025)}
.ac1{background:linear-gradient(145deg,var(--apricot-lt),var(--apricot))}
/* 하늘 → 세이지 그린 */
.ac2{background:linear-gradient(145deg,#7BAA80,#4E8060);grid-row:1/span 2;grid-column:2}
.ac2-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:24px;background:linear-gradient(to top,rgba(0,0,0,.3) 0%,transparent 55%)}
.ac2-n{font-family:'Gaegu',cursive;font-size:3rem;font-weight:700;color:#fff}
.ac2-l{font-size:.78rem;color:rgba(255,255,255,.75)}
.ac3{background:linear-gradient(145deg,var(--gp),var(--gl))}
.ac-lbl{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.88);border-radius:10px;padding:4px 10px;font-size:.68rem;font-weight:700;color:var(--dark);}

/* ── SERVICES  배경: 연산호(코랄) ── */
.svc-sec{padding:80px 8%;background:#FFF0EC}
.sec-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:38px}
.sec-t{font-family:'Gaegu',cursive;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;color:var(--dark)}
.sec-t .a{color:var(--green);margin-left:6px}
.btn-all{background:var(--green);color:#fff;border:none;border-radius:50px;padding:10px 22px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:5px}
.btn-all:hover{background:#5E9E30}

.svc-grid{display:grid;grid-template-columns:5fr 6fr;gap:26px;align-items:start}
/* 사진 → 진갈색 */
.svc-photo{border-radius:22px;overflow:hidden;height:380px;background:linear-gradient(145deg,#5C4010,var(--dark));display:flex;align-items:center;justify-content:center;font-size:6.5rem;position:relative}
.svc-pd{position:absolute;bottom:18px;left:18px;right:18px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:14px;padding:14px 16px;color:rgba(255,255,255,.88);font-size:.82rem;line-height:1.65}

.svc-list{display:flex;flex-direction:column;gap:8px}
.si{background:var(--white);border-radius:15px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s;border:2px solid transparent}
.si:hover{border-color:#FFBCAA}
/* 활성 아이템 → 황토(앰버)색 */
.si.on{border-color:var(--amber);background:var(--amber)}
.si.on .si-t{color:#fff}
.si.on .si-d{display:block;color:rgba(255,255,255,.78)}
.si.on .si-btn{background:rgba(255,255,255,.25);color:#fff}
.si-t{font-weight:600;font-size:.95rem;color:var(--dark)}
.si-d{display:none;font-size:.78rem;color:var(--light);line-height:1.55;margin-top:5px}
.si-btn{width:32px;height:32px;border-radius:50%;background:#FFE8E0;color:#C85030;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;transition:all .2s}

/* ── PRODUCTS  배경: 베이지 ── */
.prod-sec{padding:80px 8%;background:var(--beige2)}
.prow{display:flex;gap:15px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.prow::-webkit-scrollbar{display:none}

.pc{border-radius:20px;overflow:hidden;flex:0 0 210px;transition:all .25s;cursor:pointer;border:2px solid transparent;position:relative;background:var(--white)}
.pc:hover{transform:translateY(-6px);box-shadow:0 12px 32px var(--sh);border-color:var(--apricot)}

/* 이미지 배경: 살구/라벤더/민트/연두/베이지 돌아가며 */
.pi{height:165px;display:flex;align-items:center;justify-content:center;font-size:4.5rem}
.pi.ap{background:linear-gradient(145deg,var(--apricot-lt),var(--apricot))}
.pi.lv{background:linear-gradient(145deg,var(--lavender-lt),var(--lavender))}
.pi.mt{background:linear-gradient(145deg,var(--mint-lt),var(--mint))}
.pi.gn{background:linear-gradient(145deg,var(--gp),var(--gl))}
.pi.bg{background:linear-gradient(145deg,var(--beige2),var(--beige))}

.pc-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--dark);color:#fff;font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:8px}
.pc-wish{position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:.85rem;cursor:pointer}

.pb{padding:14px 16px 18px}
.pb-or{font-size:.65rem;color:var(--green);margin-bottom:4px;}
.pb-nm{font-weight:700;font-size:.85rem;color:var(--dark);line-height:1.4;margin-bottom:9px}
.pb-pr{display:flex;align-items:baseline;gap:6px;margin-bottom:7px}
.pb-og{font-size:.72rem;color:var(--muted);text-decoration:line-through}
.pb-sl{font-size:1.05rem;font-weight:700;color:var(--dark)}
.pb-dc{background:var(--gp);color:var(--green);font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:8px}
.pb-st{font-size:.7rem;color:var(--muted)}
.pb-st .s{color:var(--green)}
.pb-buy{width:100%;margin-top:10px;background:var(--amber);color:#fff;border:none;border-radius:12px;padding:9px 0;font-size:.88rem;font-weight:600;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:5px}
.pb-buy:hover{background:var(--dark)}

/* ── MISSION  배경: 연두 페일 → 베이지 카드 ── */
.miss-wrap{padding:80px 8%;background:var(--gp)}
.miss-card{background:var(--beige);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:280px;box-shadow:0 4px 32px rgba(42,30,6,.08)}
.ml{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.ml-tag{color:var(--green);font-size:.76rem;font-weight:700;letter-spacing:1px;margin-bottom:14px}
.ml-t{font-family:'Gaegu',cursive;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:700;color:var(--dark);line-height:1.45}
.ml-t .g{color:var(--green)}
.ml-sub{color:var(--mid);font-size:.87rem;line-height:1.85;margin-top:14px}

.mr{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px}
.ms{background:rgba(92,68,32,.06);border-radius:15px;padding:22px 18px;display:flex;flex-direction:column;gap:5px;transition:background .2s}
.ms:hover{background:rgba(92,68,32,.11)}
.ms-ico{font-size:1.4rem}
.ms-n{font-family:'Gaegu',cursive;font-size:1.55rem;font-weight:700;color:var(--green)}
.ms-l{font-size:.72rem;color:var(--muted)}

/* ── FOOTER  딥 세이지 그린 ── */
footer{background:#3D5A3E;color:rgba(255,255,255,.55);padding:60px 8% 30px}
.ft-g{
  display:grid;
  grid-template-columns:3fr 1fr 1fr;
  gap:48px;
}
.ft-logo{font-family:'Gaegu',cursive;font-size:1.4rem;color:#fff}
.ft-desc{font-size:.82rem;line-height:1.85;margin-top:12px}
.ft-col h5{font-family:'Gaegu',cursive;color:#fff;font-size:.92rem;margin-bottom:14px}
.ft-col a{display:block;font-size:.78rem;color:rgba(255,255,255,.38);text-decoration:none;margin-bottom:9px;transition:color .2s}
.ft-col a:hover{color:var(--gl)}
.ft-bot{display:flex;justify-content:space-between;padding-top:22px;font-size:.72rem}

/* ══ FLOATING CHATBOT ══ */
.fab{position:fixed;bottom:28px;right:28px;z-index:400;display:flex;flex-direction:column;align-items:flex-end;gap:10px}

/* 말풍선: 기본 숨김, hover 시 표시 */
.fab-bubble{
  background:#fff;border-radius:16px 16px 4px 16px;
  padding:12px 16px;
  box-shadow:0 6px 24px rgba(42,30,6,.16);
  font-size:.78rem;font-weight:600;color:var(--dark);
  line-height:1.55;max-width:175px;
  opacity:0;transform:translateY(6px) scale(.96);
  transition:all .25s;pointer-events:none;
}
.fab-bubble small{display:block;font-size:.68rem;color:var(--light);font-weight:400;margin-top:2px}
.fab:hover .fab-bubble{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* 원형 버튼 — 황토(앰버)색 */
.fab-btn{
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#E0A020,#C8880A);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  box-shadow:0 6px 22px rgba(200,136,10,.45);
  transition:all .25s;position:relative;
}
.fab-btn:hover{transform:scale(1.1);box-shadow:0 10px 30px rgba(200,136,10,.55)}

/* 링 애니메이션 — 황토색 */
.fab-btn::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2.5px solid #E0A020;
  animation:ring 2.4s ease-out infinite;
}
@keyframes ring{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.6);opacity:0}
  100%{opacity:0}
}

/* 알림 뱃지 */
.fab-badge{
  position:absolute;top:1px;right:1px;
  width:17px;height:17px;border-radius:50%;
  background:#E84040;color:#fff;
  font-size:.55rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2.5px solid #fff;
}

@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .65s,transform .65s}
.rv.on{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:920px){
  .hero{grid-template-columns:1fr;height:auto}
  .hr{height:260px}
  .about-grid{grid-template-columns:1fr;gap:24px}
  .acards{height:280px}
  .svc-grid{grid-template-columns:1fr}
  .svc-photo{height:200px}
  .miss-card{grid-template-columns:1fr}
  .ft-g{grid-template-columns:1fr 1fr}
}

/* ── PAGE ROUTING ── */
.page{display:none}.page.active{display:block;padding-top:64px}

/* ── CHAR ANIM ── */
@keyframes charBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
.char-card{background:rgba(255,255,255,.18);border-radius:20px;padding:8px;display:inline-flex;align-items:center;justify-content:center}

/* ── LOGIN ── */
.login-bg{min-height:calc(100vh - 64px);background:linear-gradient(160deg,var(--gp) 0%,var(--beige3) 50%,var(--apricot-lt,#FEF2E8) 100%);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login-box{background:#fff;border-radius:22px;padding:40px 36px;width:100%;max-width:420px;box-shadow:0 8px 36px rgba(42,30,6,.09)}
.l-tabs{display:flex;background:var(--beige2);border-radius:10px;padding:3px;margin-bottom:22px;gap:3px}
.l-tab{flex:1;text-align:center;padding:9px;border-radius:8px;font-size:.82rem;font-weight:500;color:var(--muted);cursor:pointer;transition:all .2s}
.l-tab.on{background:#fff;color:var(--dark);box-shadow:0 2px 8px var(--sh,rgba(42,30,6,.08))}
.fg{margin-bottom:14px}.fg label{display:block;font-size:.72rem;font-weight:600;color:var(--mid);margin-bottom:5px}
.fg input,.fg select{width:100%;padding:11px 14px;border:1.5px solid var(--sand);border-radius:10px;font-size:.84rem;font-family:inherit;color:var(--dark);background:var(--cream);outline:none;transition:border-color .2s}
.fg input:focus,.fg select:focus{border-color:var(--green);background:#fff}
.fg input::placeholder{color:var(--muted)}
.f-extra{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;margin-top:-4px}
.f-rem{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--mid);cursor:pointer}
.f-rem input{accent-color:var(--green)}
.f-forgot{font-size:.74rem;color:var(--green);cursor:pointer;font-weight:500}
.btn-submit{width:100%;padding:13px;background:var(--amber);color:#fff;border:none;border-radius:11px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:10px}
.btn-submit:hover{background:var(--brown,#3A2808);transform:translateY(-1px)}
.soc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.soc-btn{padding:10px;border-radius:10px;border:1.5px solid var(--sand);background:#fff;font-size:.76rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--mid)}
.soc-btn.kakao{background:#FEE500;border-color:#FEE500;color:#3A1D1D}
.soc-btn.naver{background:#03C75A;border-color:#03C75A;color:#fff}
.l-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:.72rem}
.l-divider::before,.l-divider::after{content:'';flex:1;height:1px;background:var(--sand)}
.sw-txt{text-align:center;font-size:.76rem;color:var(--muted)}
.sw-txt a{color:var(--green);font-weight:700;cursor:pointer}
.success-view{display:none;text-align:center;padding:16px 0}
.success-ico{font-size:3rem;margin-bottom:12px;display:block}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ── CART ── */
.cart-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.cart-item{display:flex;align-items:flex-start;gap:13px;padding:16px 0;border-bottom:1.5px solid var(--sand)}
.ct-thumb{width:64px;height:64px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0}
.ct-thumb.ap{background:linear-gradient(145deg,#FEF2E8,#F5C4A0)}
.ct-thumb.gn{background:linear-gradient(145deg,var(--gp,#E8F6D4),var(--gl,#C8E8A0))}
.ct-thumb.mt{background:linear-gradient(145deg,#E8FAF7,#A8E4D8)}
.ct-from{font-size:.65rem;color:var(--green);margin-bottom:2px;font-weight:500}
.ct-nm{font-size:.84rem;font-weight:500;color:var(--dark);margin-bottom:4px}
.ct-exp{font-size:.65rem;color:var(--muted);background:var(--warm,#F2EBD8);padding:2px 7px;border-radius:5px;display:inline-block;margin-bottom:10px}
.qty-ctrl{display:inline-flex;align-items:center;border:1.5px solid var(--sand);border-radius:8px;overflow:hidden}
.qty-b{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#fff;border:none;font-size:.9rem;color:var(--mid);cursor:pointer;font-family:inherit;transition:background .15s}
.qty-b:hover{background:var(--warm,#F2EBD8)}
.qty-v{width:32px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--dark);border-left:1.5px solid var(--sand);border-right:1.5px solid var(--sand)}
.ct-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.ct-price{font-weight:700;font-size:.9rem;color:var(--dark)}
.ct-og{font-size:.66rem;color:var(--muted);text-decoration:line-through}
.ct-del{font-size:.78rem;color:var(--muted);cursor:pointer;transition:color .2s}
.ct-del:hover{color:#e84040}
.cart-sum{background:#fff;border:1.5px solid var(--sand);border-radius:16px;padding:22px;position:sticky;top:80px}
.cs-title{font-size:.9rem;font-weight:700;color:var(--dark);margin-bottom:16px;padding-bottom:12px;border-bottom:1.5px solid var(--sand);}
.cs-row{display:flex;justify-content:space-between;font-size:.8rem;color:var(--mid);margin-bottom:9px}
.cs-row .v{font-weight:500}
.cs-row.total{font-weight:700;color:var(--dark);font-size:.9rem;margin-top:12px;padding-top:12px;border-top:2px solid var(--sand);margin-bottom:0;}
.cs-row.total .v{color:var(--amber)}
.del-opts{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.del-opt{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1.5px solid var(--sand);border-radius:9px;cursor:pointer;transition:all .2s}
.del-opt.on{border-color:var(--green);background:var(--gp,#E8F6D4)}
.del-opt input[type=radio]{accent-color:var(--green)}
.del-ti{font-size:.79rem;font-weight:500;color:var(--dark)}
.del-su{font-size:.67rem;color:var(--muted)}
.del-pr{font-size:.79rem;font-weight:700;color:var(--dark);margin-left:auto}
.pt-row{display:flex;gap:6px;margin:10px 0}
.pt-in{flex:1;padding:8px 11px;border:1.5px solid var(--sand);border-radius:8px;font-size:.78rem;font-family:inherit;color:var(--dark);background:var(--cream);outline:none}
.pt-in:focus{border-color:var(--green)}
.btn-pt{background:var(--gp,#E8F6D4);color:var(--green);border:1.5px solid var(--green);border-radius:8px;padding:8px 11px;font-size:.78rem;font-weight:600;cursor:pointer}
.btn-order{width:100%;padding:13px;background:var(--amber);color:#fff;border:none;border-radius:11px;font-size:.95rem;font-weight:600;cursor:pointer;margin-top:14px;box-shadow:0 4px 14px rgba(184,120,10,.28)}
.btn-order:hover{background:var(--brown,#3A2808)}
.ben-badge{display:flex;align-items:center;gap:6px;background:var(--gp,#E8F6D4);border-radius:9px;padding:9px 11px;margin-top:10px;font-size:.73rem;color:var(--green);font-weight:500}

/* ── MARKET ── */
.plk {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .92rem;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .15s;
}
.plk:hover {
  transform: scale(1.1);
}
.mkt-bar{background:#fff;border-bottom:1.5px solid var(--sand);padding:0 5%;display:flex;align-items:center;gap:8px;height:auto;min-height:50px;overflow-x:auto;scrollbar-width:none;flex-wrap:wrap}
.mkt-bar::-webkit-scrollbar{display:none}
.mf{padding:5px 13px;border-radius:100px;border:1.5px solid var(--sand);font-size:.74rem;color:var(--mid);cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0}
.mf:hover{border-color:var(--green)}.mf.on{background:var(--green);color:#fff;border-color:var(--green);font-weight:500}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.pc2{background:#fff;border:1.5px solid var(--sand);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .25s;position:relative}
.pc2:hover{box-shadow:0 8px 26px rgba(42,30,6,.1);transform:translateY(-3px);border-color:var(--gm,#A2D468)}
.pc2-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative}
.pc2-thumb.gn{background:linear-gradient(145deg,var(--gp,#E8F6D4),var(--gl,#C8E8A0))}
.pc2-thumb.ap{background:linear-gradient(145deg,#FEF2E8,#F5C4A0)}
.pc2-thumb.mt{background:linear-gradient(145deg,#E8FAF7,#A8E4D8)}
.pc2-thumb.lv{background:linear-gradient(145deg,#F2EEFB,#C8BAF0)}
.pbdg{position:absolute;top:7px;left:7px;display:flex;flex-direction:column;gap:3px;z-index:2}
.pbdg-t{font-size:.6rem;font-weight:500;padding:2px 6px;border-radius:4px;display:inline-block}
.pbdg-new{background:var(--green);color:#fff}.pbdg-exp{background:#D05018;color:#fff}
.pc2-body{padding:10px 11px 12px}
.pc2-farm{font-size:.62rem;color:var(--muted);margin-bottom:2px}
.pc2-nm{font-size:.8rem;font-weight:500;color:var(--dark);margin-bottom:5px;line-height:1.3}
.pc2-pr{display:flex;align-items:baseline;gap:4px;margin-bottom:4px}
.pc2-disc{font-size:.75rem;font-weight:700;color:#D05018}
.pc2-price{font-size:.75rem;font-weight:700;color:var(--dark)}
.pc2-og{font-size:.66rem;color:var(--muted);text-decoration:line-through}
.pc2-meta{font-size:.64rem;color:var(--muted)}
.btn-add{width:100%;margin-top:7px;padding:7px;background:var(--green);color:#fff;border:none;border-radius:7px;font-size:.74rem;font-weight:500;cursor:pointer;font-family:inherit}
.btn-add:hover{background:#529028}
.mpg{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:32px}
.mp-b{width:32px;height:32px;border-radius:7px;border:1.5px solid var(--sand);display:flex;align-items:center;justify-content:center;font-size:.76rem;color:var(--mid);cursor:pointer;transition:all .2s}
.mp-b:hover{border-color:var(--green);color:var(--green)}.mp-b.on{background:var(--green);color:#fff;border-color:var(--green)}

/* ── REVIEW ── */
.ai-sum{background:linear-gradient(135deg,var(--brown,#3A2808),#5C4010);border-radius:14px;padding:22px 24px;margin-bottom:24px;display:flex;gap:14px}
.ai-lbl{font-size:.90rem;font-weight:500;color:var(--gl,#C8E8A0);letter-spacing:1px;margin-bottom:6px}
.ai-txt{font-size:.82rem;color:rgba(255,255,255,.85);line-height:1.7}
.ai-tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.ai-tag{background:rgba(192,224,144,.18);border:1px solid rgba(192,224,144,.28);color:var(--gl,#C8E8A0);border-radius:100px;padding:3px 9px;font-size:.64rem;font-weight:500}
.rv2{background:#fff;border:1.5px solid var(--sand);border-radius:12px;padding:20px 22px;transition:transform .2s;margin-bottom:12px}
.rv2:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(42,30,6,.08)}
.rv2-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rv2-auth{display:flex;align-items:center;gap:9px}
.rv2-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.rv2-av.ap{background:linear-gradient(145deg,#FEF2E8,#F5C4A0)}
.rv2-av.gn{background:linear-gradient(145deg,var(--gp),var(--gl))}
.rv2-av.mt{background:linear-gradient(145deg,#E8FAF7,#A8E4D8)}
.rv2-nm{font-weight:500;font-size:.82rem;color:var(--dark)}
.rv2-dt{font-size:.66rem;color:var(--muted);margin-top:1px}
.rv2-stars{color:var(--amber);font-size:.85rem}
.rv2-prod{display:inline-flex;align-items:center;gap:5px;background:var(--gp,#E8F6D4);border-radius:7px;padding:3px 9px;font-size:.65rem;color:var(--green);font-weight:500;margin-bottom:9px}
.rv2-txt{font-size:.81rem;color:var(--mid);line-height:1.7;font-weight:300}
.rv2-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--sand)}
.hlp-btn{padding:3px 9px;border:1px solid var(--sand);border-radius:6px;background:#fff;font-size:.67rem;color:var(--mid);cursor:pointer;font-family:inherit}
.rv2-cert{font-size:.65rem;color:var(--green);font-weight:500}
.rv2-prod {  border: none;  cursor: pointer;  display: inline-flex;  align-items: center;  gap: 5px;  background: var(--gp);  border-radius: 7px;  padding: 3px 9px;  font-size: .65rem;  color: var(--green);font-weight: 700;margin-bottom: 9px;font-family: inherit;}
.rv2-prod:hover {background: var(--green);color: #fff;}
.pbdg-soon {
  background: #FFF5EF;
  color: #D05018;
  border: 1px solid #F5C8A8;
  margin-left: 4px;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — 768px (태블릿·모바일)
   style.css 클래스 오버라이드는 반드시 이 파일 끝에
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ── */
  nav { padding: 0 4%; }
  .nav-links { display: none; }
  /* 로고가 공간 채워서 오른쪽 아이콘들이 끝에 붙도록 */
  .logo { flex: 1; }
  .nav-r { gap: 4px; }
  /* 이름 버튼·로그인 버튼은 사이드 패널에서 처리 */
  .nav-user-wrap { display: none !important; }
  #btn-nav-login  { display: none !important; }
  /* 벨 아이콘 터치 영역 확보 */
  #bellIcon { padding: 8px; border-radius: 10px; margin-right: 2px; display: inline-flex; align-items: center; justify-content: center; }
  #bellIcon:hover { background: var(--beige2); }
  /* 알림 드롭다운: 화면 너비에 맞게 */
  #notificationDropdown { right: 12px !important; top: 60px !important; width: calc(100vw - 24px) !important; max-width: 360px !important; }

  /* ── HERO ── */
  .hero { grid-template-columns: 1fr; height: auto; min-height: unset; }
  .hl { padding: 36px 6% 28px; }
  .hr { height: 220px; padding: 0 6%; gap: 16px; }
  .hp-fl { display: none; }
  .h-title { font-size: clamp(1.55rem, 5.5vw, 2.2rem); }
  .h-sub { font-size: .84rem; }
  .btn-hero { padding: 12px 28px; font-size: .88rem; }
  .h-bot { flex-wrap: wrap; gap: 12px; }

  /* ── ABOUT ── */
  .about-sec { padding: 56px 6%; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .ar-desc { grid-template-columns: 1fr; gap: 10px; }
  .acards { grid-template-columns: 1fr 1fr; height: auto; min-height: 260px; }
  .ac2 { grid-row: auto; grid-column: auto; }

  /* ── SERVICES ── */
  .svc-sec { padding: 56px 6%; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-photo { height: 180px; font-size: 4rem; }
  .sec-hdr { flex-wrap: wrap; gap: 10px; }

  /* ── PRODUCTS (홈) ── */
  .prod-sec { padding: 56px 6%; }
  .pc { flex: 0 0 175px; }

  /* ── MISSION ── */
  .miss-wrap { padding: 56px 6%; }
  .miss-card { grid-template-columns: 1fr; }
  .ml { padding: 32px 24px; }
  .mr { grid-template-columns: 1fr 1fr; padding: 16px; gap: 8px; }
  .ms { padding: 16px 14px; }

  /* ── FOOTER ── */
  footer { padding: 48px 6% 24px; }
  .ft-g { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft-bot { flex-direction: column; gap: 6px; text-align: center; }

  /* ── LOGIN / 회원가입 ── */
  .login-bg { padding: 28px 16px; }
  .login-box { padding: 28px 20px; border-radius: 16px; }
  .name-row { grid-template-columns: 1fr; }
  .soc-btns { grid-template-columns: 1fr; }

  /* ── CART ── */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-sum { position: static; }

  /* ── MARKET 그리드 ── */
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
  /* 필터 칩: 줄바꿈 허용, 패딩 조정 */
  .mkt-bar { padding: 6px 4% 8px; gap: 6px; flex-wrap: wrap; }
  .mf { font-size: .7rem; padding: 5px 11px; }
}

@media (max-width: 480px) {

  /* ── NAV ── */
  nav { padding: 0 4%; }
  .logo { font-size: 1.18rem; }
  .logo img { height: 28px; }
  .n-ico { font-size: 1rem; }

  /* ── HERO ── */
  .hl { padding: 28px 4% 22px; }
  .hr { height: 180px; }
  .h-title { font-size: clamp(1.4rem, 7vw, 1.9rem); }

  /* ── SECTIONS ── */
  .about-sec, .svc-sec, .prod-sec { padding: 44px 4%; }
  .miss-wrap { padding: 44px 4%; }
  footer { padding: 40px 4% 20px; }

  /* ── ABOUT 카드 ── */
  .acards { grid-template-columns: 1fr; min-height: auto; }
  .ac2 { min-height: 180px; }

  /* ── MISSION ── */
  .mr { grid-template-columns: 1fr; }

  /* ── FOOTER ── */
  .ft-g { grid-template-columns: 1fr; gap: 24px; }

  /* ── MARKET ── */
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pc2-thumb { height: 100px; font-size: 2.5rem; }
  .pc2-body { padding: 8px 9px 10px; }
  .pc2-nm { font-size: .76rem; }

  /* ── CART ── */
  .cart-item { gap: 10px; }
  .ct-thumb { width: 52px; height: 52px; font-size: 1.6rem; }

  /* ── LOGIN ── */
  .login-box { padding: 22px 16px; }

  /* ── MARKET 필터 칩 ── */
  .mkt-bar { padding: 5px 4% 7px; gap: 5px; }
  .mf { font-size: .68rem; padding: 4px 9px; }
}
#notificationBadge:empty {display: none !important;}