@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  --bg: #ffffff;
  --bg2: #f4f6f4;
  --bg3: #eef2ee;
  --ink: #0d1f17;
  --ink2: #3a5244;
  --ink3: #7a9688;
  --g900: #0d2b1e;
  --g700: #1a4a32;
  --g500: #2e7d52;
  --g300: #6bc94a;
  --g100: #d4f0c4;
  --g50:  #edf8e6;
  --gold: #f5a623;
  --gold2: #ffd980;
  --gold-bg: #fff8eb;
  --red: #e84040;
  --maxw: 440px;
  --r: 16px;
  --r-sm: 10px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{background:#d0d8d0;font-family:'Pretendard',sans-serif;color:var(--ink);display:flex;justify-content:center;}
#app{width:100%;max-width:var(--maxw);min-width:320px;background:var(--bg);min-height:100vh;position:relative;overflow-x:hidden;display:flex;flex-direction:column;}

/* HEADER */
.hd{padding:14px 18px 12px;display:flex;align-items:center;gap:10px;background:var(--bg);position:sticky;top:0;z-index:50;border-bottom:1px solid #eee;}
.hd-logo{display:flex;align-items:center;gap:7px;text-decoration:none;}
.hd-logo-icon{width:30px;height:30px;background:var(--g900);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.hd-brand{font-size:15px;font-weight:800;color:var(--g900);letter-spacing:-.3px;}
.hd-brand span{color:var(--g300);}
.hd-search{flex:1;display:flex;align-items:center;gap:7px;background:var(--bg2);border-radius:20px;padding:8px 12px;cursor:pointer;}
.hd-search svg{flex-shrink:0;opacity:.5;}
.hd-search span{font-size:12px;color:var(--ink3);}
.hd-icons{display:flex;gap:8px;align-items:center;}
.hd-icon{width:32px;height:32px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* SCREEN */
.screen{flex:1;overflow-y:auto;padding-bottom:80px;-webkit-overflow-scrolling:touch;}
.screen::-webkit-scrollbar{width:0;}
.page{display:none;}
.page.active{display:block;animation:fu .18s ease;}
@keyframes fu{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* HERO BRAND */
.hero-brand{margin:0;padding:22px 18px 18px;background:var(--g900);position:relative;overflow:hidden;}
.hero-brand::before{content:'';position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;background:rgba(107,201,74,.08);}
.hero-brand::after{content:'';position:absolute;right:20px;bottom:-40px;width:100px;height:100px;border-radius:50%;background:rgba(107,201,74,.05);}
.hb-tag{display:inline-flex;align-items:center;gap:5px;background:rgba(107,201,74,.2);border:1px solid rgba(107,201,74,.3);border-radius:20px;padding:4px 10px;margin-bottom:12px;}
.hb-tag span{font-size:9.5px;font-weight:700;color:var(--g300);letter-spacing:.5px;text-transform:uppercase;}
.hb-main{display:flex;align-items:flex-end;justify-content:space-between;}
.hb-text h1{font-size:28px;font-weight:900;color:#fff;line-height:1.15;letter-spacing:-.5px;}
.hb-text h1 em{color:var(--g300);font-style:normal;}
.hb-text p{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:6px;font-weight:300;line-height:1.5;}
.hb-dog{width:80px;height:80px;flex-shrink:0;}
.hb-cta{display:flex;gap:8px;margin-top:14px;}
.hb-btn-primary{flex:1;padding:11px;background:var(--g300);color:var(--g900);border:none;border-radius:10px;font-size:12.5px;font-weight:700;cursor:pointer;letter-spacing:-.2px;}
.hb-btn-secondary{flex:1;padding:11px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;font-size:12.5px;font-weight:600;cursor:pointer;}

/* HOME CARD SECTIONS */
.home-wrap{background:#eef1ee;padding:14px 0 6px;}
.card-sec{background:#fff;border-radius:16px;box-shadow:0 2px 14px rgba(20,40,30,.07);margin:0 14px 12px;}

/* TRAINER STRIP */
.trainer-strip{margin:0;padding:13px 15px;background:#fff;border-radius:16px;display:flex;align-items:center;gap:11px;cursor:pointer;}
.ts-photo{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--g300);}
.ts-info{flex:1;}
.ts-info b{font-size:12.5px;font-weight:700;color:var(--ink);}
.ts-info p{font-size:10.5px;color:var(--ink3);margin-top:1px;}
.ts-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.ts-badge{font-size:8.5px;font-weight:600;padding:2px 6px;border-radius:4px;background:var(--g50);color:var(--g700);}
.ts-arr{color:var(--ink3);font-size:16px;}

/* QUICK ACCESS */
.sec-row{display:flex;align-items:center;justify-content:space-between;padding:0 18px;margin:20px 0 10px;}
.sec-ttl{font-size:15px;font-weight:800;color:var(--ink);}
.sec-more{font-size:11.5px;font-weight:500;color:var(--g500);cursor:pointer;}
.quick-row{display:flex;overflow-x:auto;gap:8px;padding:0 18px 4px;}
.quick-row::-webkit-scrollbar{height:0;}
.qitem{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;flex-shrink:0;width:64px;}
.qitem-ico{width:56px;height:52px;object-fit:contain;display:block;}
.qitem-lbl{font-size:10.5px;font-weight:500;color:var(--ink2);text-align:center;white-space:nowrap;}
.qitem:active .qitem-ico{transform:scale(.93);}

/* HOME 카드형 레이아웃 */
#page-home{background:#eef2ee;}
.home-card{background:#fff;border-radius:18px;margin:13px 14px 0;box-shadow:0 3px 14px rgba(20,50,35,.06);border:1px solid rgba(20,50,35,.04);padding:15px 16px;}
.home-card-ttl{font-size:14px;font-weight:800;color:var(--ink);display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.home-card-ttl .more{font-size:11px;font-weight:600;color:var(--g500);cursor:pointer;}
.home-card .qitem{width:auto;min-width:0;}
.home-card .qitem-ico{width:100%;max-width:52px;height:48px;}

/* EVENT BANNER */
.event-banner{margin:0 18px;border-radius:var(--r);overflow:hidden;cursor:pointer;position:relative;height:80px;display:flex;align-items:center;background:linear-gradient(135deg,#0d2b1e,#1a4a32);padding:0 18px;}
.eb-text b{font-size:14px;font-weight:800;color:#fff;}
.eb-text p{font-size:10px;color:rgba(255,255,255,.7);margin-top:2px;}
.eb-tag{position:absolute;top:10px;right:14px;background:var(--g300);color:var(--g900);font-size:9px;font-weight:700;padding:3px 8px;border-radius:12px;}
.eb-icon{font-size:32px;position:absolute;right:14px;bottom:6px;opacity:.4;}

/* FEED CARDS */
.feed-section{margin:0 18px;}
.feed-card{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #eef0ee;cursor:pointer;align-items:center;}
.feed-card:last-child{border-bottom:none;}
.feed-card:active{opacity:.7;}
.fc-thumb{width:94px;height:94px;border-radius:14px;flex-shrink:0;overflow:hidden;position:relative;background:var(--bg2);}
.fc-thumb img{width:100%;height:100%;object-fit:cover;}
.fc-type{position:absolute;bottom:5px;left:5px;font-size:8px;font-weight:700;padding:2px 5px;border-radius:5px;color:#fff;}
.fc-yt{background:rgba(220,50,50,.85);}
.fc-blog{background:rgba(27,30,35,.78);}
.fc-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.fc-cat{font-size:9.5px;font-weight:700;color:var(--ink3);margin-bottom:5px;letter-spacing:.12em;text-transform:uppercase;}
.fc-ttl{font-size:14px;font-weight:700;color:var(--ink);line-height:1.42;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fc-meta{display:flex;align-items:center;gap:6px;margin-top:6px;}
.fc-views{font-size:10px;color:var(--ink3);}
.update-dot{width:5px;height:5px;border-radius:50%;background:var(--g300);flex-shrink:0;}

/* BEFORE/AFTER */
.ba-row{display:flex;gap:10px;overflow-x:auto;padding:0 18px 4px;}
.ba-row::-webkit-scrollbar{height:0;}
.ba-card{min-width:160px;background:var(--bg);border:1px solid #eee;border-radius:var(--r);overflow:hidden;cursor:pointer;flex-shrink:0;}
.ba-imgs{display:flex;height:80px;}
.ba-half{flex:1;display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;}
.ba-half.before{background:#f5f0eb;}
.ba-half.after{background:var(--g50);}
.ba-tag{position:absolute;top:4px;left:4px;font-size:7.5px;font-weight:700;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.4);color:#fff;}
.ba-body{padding:8px 10px;}
.ba-body h4{font-size:11.5px;font-weight:700;}
.ba-body p{font-size:9.5px;color:var(--ink3);margin-top:2px;}
.ba-status{font-size:8px;font-weight:700;margin-top:4px;}
.ba-status.up{color:var(--g500);}
.ba-status.dr{color:var(--ink3);}

/* TABS */
.tabs{display:flex;margin:14px 18px;gap:6px;background:var(--bg2);padding:4px;border-radius:12px;}
.tab{flex:1;text-align:center;padding:9px 4px;border-radius:9px;font-size:12px;font-weight:500;color:var(--ink3);cursor:pointer;}
.tab.active{background:#fff;color:var(--g900);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08);}

/* FORMS */
.form-block{margin:0 18px 16px;}
.fb-label{font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.fb-num{width:20px;height:20px;background:var(--g900);color:#fff;border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.input,.textarea{width:100%;background:var(--bg2);border:1px solid #e0e0e0;border-radius:10px;padding:11px 13px;color:var(--ink);font-size:13px;font-family:inherit;outline:none;}
.date-row .input{font-size:13px;padding:10px 8px;height:44px;}
.form-block input[type="date"]:not(.date-row .input){width:50%;font-size:10px;padding:8px 6px;}
.input:focus,.textarea:focus{border-color:var(--g500);background:#fff;}
.textarea{resize:none;min-height:74px;line-height:1.6;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{padding:8px 14px;border-radius:20px;border:1px solid #e0e0e0;background:var(--bg);font-size:12px;color:var(--ink3);cursor:pointer;}
.chip.sel{border-color:var(--g500);color:var(--g700);background:var(--g50);}
.trainer-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
.trainer-row::-webkit-scrollbar{height:0;}
.trainer{min-width:80px;background:var(--bg);border:1.5px solid #eee;border-radius:12px;padding:11px 7px;text-align:center;cursor:pointer;}
.trainer.sel{border-color:var(--g300);background:var(--g50);}
.trainer .t-av{width:36px;height:36px;border-radius:50%;background:var(--bg2);margin:0 auto 6px;display:flex;align-items:center;justify-content:center;}
.trainer .t-nm{font-size:11px;font-weight:600;color:var(--ink);}
.trainer .t-tg{font-size:9px;color:var(--ink3);margin-top:2px;}
.trainer-detail{margin:0 18px 14px;background:var(--g50);border:1px solid var(--g100);border-radius:12px;padding:12px 14px;display:none;}
.trainer-detail.show{display:block;}
.td-name{font-size:13px;font-weight:700;color:var(--g900);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.td-badge{font-size:8.5px;padding:2px 6px;border-radius:4px;background:var(--gold);color:#4a2c00;font-weight:700;}
.td-info{font-size:11.5px;color:var(--ink2);line-height:1.75;}
.td-info b{color:var(--ink);font-weight:600;}
.pkg-list{display:flex;flex-direction:column;gap:8px;}
.pkg{background:var(--bg);border:1.5px solid #eee;border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
.pkg.sel{border-color:var(--g300);background:var(--g50);}
.pkg h4{font-size:13px;font-weight:700;}
.pkg p{font-size:10px;color:var(--ink3);margin-top:2px;}
.pkg .price{font-size:15px;font-weight:800;color:var(--g700);}
.pkg .per{font-size:9px;color:var(--ink3);margin-top:2px;text-align:right;}
.pkg-best{font-size:8.5px;font-weight:700;background:var(--gold);color:#4a2c00;padding:1px 5px;border-radius:3px;margin-left:4px;}
.price-card{margin:0 18px 16px;background:var(--g900);border-radius:14px;padding:16px 18px;color:#fff;}
.pc-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;opacity:.8;}
.pc-div{border-top:1px solid rgba(255,255,255,.15);margin:10px 0;}
.pc-total{display:flex;justify-content:space-between;align-items:center;}
.pc-total .lbl{font-size:13px;font-weight:500;}
.pc-total .amt{font-size:22px;font-weight:900;color:var(--gold);}
.pc-note{font-size:9.5px;opacity:.5;margin-top:8px;line-height:1.5;}
.date-row{display:flex;gap:8px;}
.date-row>div{flex:1;}
.date-row label{font-size:10.5px;color:var(--ink3);display:block;margin-bottom:4px;font-weight:500;}
.upload-box{border:1.5px dashed #d0d0d0;border-radius:12px;padding:18px;text-align:center;cursor:pointer;color:var(--ink3);}
.upload-box svg{margin-bottom:6px;}
.upload-box span{font-size:11.5px;display:block;}
.price-legend{display:flex;gap:14px;margin:0 18px 8px;font-size:11px;color:var(--ink3);}
.price-legend span{display:flex;align-items:center;gap:4px;}
.dot{width:8px;height:8px;border-radius:50%;}
.submit-btn{width:calc(100% - 36px);margin:6px 18px 16px;background:var(--g900);color:#fff;border:none;border-radius:12px;padding:14px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}
.submit-btn:active{background:var(--g700);}
.history-card{background:var(--g50);border:1px solid var(--g100);border-radius:12px;padding:14px;margin:0 18px 16px;}
.hc-head{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
.hc-badge{background:var(--g300);color:var(--g900);font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;}
.hc-head h4{font-size:12px;font-weight:500;}
.hc-row{display:flex;justify-content:space-between;padding:5px 0;font-size:11px;border-bottom:1px solid rgba(0,0,0,.04);}
.hc-row:last-child{border-bottom:none;}
.hc-row .k{color:var(--ink3);}
.hc-row .v{color:var(--ink2);}
.stars{color:var(--gold);}

/* AI */
.ai-hero{margin:16px 18px;text-align:center;padding:24px 18px;background:var(--bg2);border-radius:var(--r);}
.ai-hero h2{font-size:17px;font-weight:800;margin:10px 0 6px;}
.ai-hero p{font-size:12px;color:var(--ink3);line-height:1.6;}
.ai-upload{margin:0 18px;border:1.5px dashed #ccc;border-radius:var(--r);padding:30px 18px;text-align:center;cursor:pointer;}
.ai-upload h3{font-size:14px;font-weight:600;margin:10px 0 4px;}
.ai-upload p{font-size:11px;color:var(--ink3);}
.ai-steps{margin:18px 18px 0;}
.ai-step{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start;}
.as-num{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--g300);color:var(--g500);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px;}
.ai-step h4{font-size:12.5px;font-weight:700;margin-bottom:2px;}
.ai-step p{font-size:11px;color:var(--ink3);line-height:1.5;}

/* CHAT */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 56px - 80px - 42px);}
.chat-scroll{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;}
.chat-scroll::-webkit-scrollbar{width:0;}
.msg{max-width:82%;margin-bottom:12px;font-size:13px;line-height:1.6;}
.msg.bot{align-self:flex-start;display:flex;gap:8px;align-items:flex-start;}
.msg-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;margin-top:13px;}
.msg-body{min-width:0;}
.msg.user{align-self:flex-end;}
.msg .bubble{padding:10px 13px;border-radius:14px;}
.msg.bot .bubble{background:var(--bg2);border:1px solid #eee;border-bottom-left-radius:4px;}
.msg.user .bubble{background:var(--g900);color:#fff;border-bottom-right-radius:4px;}
.msg .who{font-size:9.5px;color:var(--ink3);margin-bottom:3px;padding:0 3px;}
.qrs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.qr{padding:7px 12px;border:1px solid var(--g300);border-radius:15px;font-size:11px;color:var(--g700);background:var(--g50);cursor:pointer;}
.chat-bar{display:flex;gap:8px;padding:10px 14px;border-top:1px solid #eee;background:var(--bg);}
.chat-bar input{flex:1;background:var(--bg2);border:1px solid #e0e0e0;border-radius:20px;padding:10px 14px;font-size:13px;color:var(--ink);outline:none;font-family:inherit;}
.chat-bar .send{width:40px;height:40px;border-radius:50%;border:none;background:var(--g900);color:#fff;font-size:17px;cursor:pointer;flex-shrink:0;}

/* CONTENT */
.cat-scroll{display:flex;gap:7px;overflow-x:auto;padding:12px 18px 8px;}
.cat-scroll::-webkit-scrollbar{height:0;}
.cat-pill{white-space:nowrap;padding:8px 15px;border-radius:22px;background:transparent;border:1px solid #e2e2df;font-size:12px;color:var(--ink3);cursor:pointer;font-weight:600;transition:all .15s;}
.cat-pill.active{background:var(--g500);color:#fff;border-color:var(--g500);}
.article-feed{margin:0 20px;}
/* 정보 페이지(훈련/질병) 검색·필터 박스 — 초보자도 '여기가 검색/필터'로 인지되게 묶음 */
.info-filter{background:var(--bg2);border:1px solid #e6e6e3;border-radius:14px;padding:13px 13px 15px;}
.info-searchbar{display:flex;gap:8px;align-items:stretch;}
.info-search{flex:1;min-width:0;width:auto;padding:11px 13px;border:1px solid #e0e0dd;border-radius:11px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink);box-sizing:border-box;}
.info-searchbtn{flex-shrink:0;padding:0 17px;border:none;border-radius:11px;background:var(--g500);color:#fff;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:opacity .15s;}
.info-searchbtn:active{opacity:.75;}
/* 필터 그룹: 라벨을 칩 위에 두어 자료유형·분류 칩들이 같은 좌측선에서 시작(줄 맞음) */
.info-type{display:block;margin-top:13px;}
.info-type-lbl{display:block;margin-bottom:7px;font-size:11px;font-weight:800;color:var(--ink2);letter-spacing:.01em;}
.type-pills,.cat-row{display:flex;flex-wrap:wrap;gap:7px;}
.type-pills .cat-pill,.cat-row .cat-pill{flex-shrink:0;background:#fff;}
.type-pills .cat-pill.active,.cat-row .cat-pill.active{background:var(--g500);}
/* 맨 위로 버튼 (훈련/질병 정보에서 스크롤 시) */
.scrolltop-btn{position:fixed;bottom:calc(72px + env(safe-area-inset-bottom));right:max(16px,calc(50vw - 204px));width:44px;height:44px;border-radius:50%;background:rgba(27,30,35,.9);color:#fff;border:none;cursor:pointer;z-index:70;display:none;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.scrolltop-btn.show{display:flex;}
.scrolltop-btn:active{opacity:.75;}
.info-body{display:flex;gap:12px;padding:14px 16px 10px;align-items:flex-start;}
/* 좌측 카테고리 = 칩이 아니라 테두리 없는 세로 메뉴(긴 이름 줄바꿈이 자연스럽게) */
.cat-vert{flex:0 0 82px;display:flex;flex-direction:column;gap:1px;position:sticky;top:6px;}
.cat-vert .cat-pill{width:100%;text-align:left;white-space:normal;padding:8px 8px 8px 9px;border:none;border-left:2px solid transparent;border-radius:0 7px 7px 0;background:transparent;font-size:11.5px;line-height:1.35;font-weight:600;color:var(--ink3);}
.cat-vert .cat-pill.active{background:var(--g50);color:var(--g700);border-left-color:var(--g700);font-weight:800;}
.info-body .article-feed{flex:1;min-width:0;margin:0;}
.info-body .feed-card{padding:12px 0;gap:10px;}
.info-body .fc-thumb{width:66px;height:66px;border-radius:11px;}
.info-body .fc-ttl{font-size:12.5px;}
.info-body .fc-summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* SHOP */
.shop-banner{margin:14px 18px;background:var(--g900);border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;}
.shop-banner h3{font-size:14px;font-weight:800;color:#fff;}
.shop-banner p{font-size:10.5px;color:rgba(255,255,255,.6);margin-top:3px;}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 18px;}
.product{background:var(--bg);border:1px solid #eee;border-radius:var(--r);overflow:hidden;cursor:pointer;}
.product:active{opacity:.8;}
.p-img{height:100px;display:flex;align-items:center;justify-content:center;background:var(--bg2);position:relative;font-size:40px;}
.p-badge{position:absolute;top:6px;left:6px;background:var(--g300);color:var(--g900);font-size:8.5px;font-weight:700;padding:2px 5px;border-radius:4px;}
.p-body{padding:10px;}
.p-cat{font-size:9.5px;color:var(--ink3);}
.p-body h4{font-size:12px;font-weight:600;line-height:1.4;margin:2px 0 5px;}
.p-price{font-size:13px;font-weight:800;color:var(--g900);}
.p-rec{font-size:9.5px;color:var(--g500);font-weight:500;margin-top:2px;}

/* MY */
.my-hero{background:var(--g900);margin:0;padding:24px 18px 20px;}
.my-hero p{font-size:11px;color:rgba(255,255,255,.6);margin-bottom:14px;}
.social-btn{width:100%;padding:12px;border-radius:10px;border:none;font-size:13px;font-weight:600;margin-bottom:8px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;}
.sb-kakao{background:#FEE500;color:#3c1e1e;}
.sb-naver{background:#03C75A;color:#fff;}
.sb-google{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)!important;}
.profile-card{margin:14px 18px;background:var(--bg2);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:13px;}
.ph-av{width:52px;height:52px;border-radius:50%;background:var(--g50);border:2px solid var(--g300);display:flex;align-items:center;justify-content:center;font-size:24px;}
.ph-name{font-size:15px;font-weight:700;}
.ph-sub{font-size:10.5px;color:var(--ink3);margin-top:2px;}
.mylist{margin:0 18px;}
.my-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #f0f0f0;cursor:pointer;}
.my-item:last-child{border-bottom:none;}
.mi-ico{width:36px;height:36px;border-radius:10px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mi-txt{flex:1;font-size:13px;font-weight:500;}
.mi-arr{color:var(--ink3);}

/* GROWTH */
.growth-hd{background:var(--g900);padding:20px 18px 18px;display:flex;align-items:center;justify-content:space-between;}
.growth-hd h2{font-size:17px;font-weight:800;color:#fff;}
.growth-hd p{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;}
.growth-hd .add-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:20px;}
.timeline{margin:16px 20px;border-left:2px solid var(--g100);padding-left:16px;}
.tl-item{position:relative;padding-bottom:20px;}
.tl-dot{position:absolute;left:-21px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--g300);border:2px solid var(--bg);}
.tl-date{font-size:10.5px;color:var(--g500);font-weight:700;margin-bottom:5px;}
.tl-card{background:var(--bg);border:1px solid #eee;border-radius:12px;padding:12px 13px;}
.tl-card h4{font-size:12.5px;font-weight:600;margin-bottom:3px;}
.tl-card p{font-size:11px;color:var(--ink3);line-height:1.5;}
.tl-meta{display:flex;gap:8px;margin-top:6px;font-size:10px;color:var(--ink3);}

/* ABOUT */
.about-hero{background:var(--g900);padding:22px 18px;display:flex;gap:14px;align-items:center;}
.about-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--g300);flex-shrink:0;}
.about-info h2{font-size:16px;font-weight:800;color:#fff;}
.about-info p{font-size:11px;color:rgba(255,255,255,.6);margin-top:3px;}
.about-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.ab-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;background:rgba(46,125,82,.14);color:var(--g700);}
.about-reasons{margin:0 18px 14px;}
.reason-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #f0f0f0;}
.reason-item:last-child{border-bottom:none;}
.ri-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ri-ico.g{background:var(--g50);}
.ri-ico.o{background:var(--gold-bg);}
.ri-ico.b{background:#eef4ff;}
.ri-ico.p{background:#f3eeff;}
.ri-text h4{font-size:13px;font-weight:700;margin-bottom:3px;}
.ri-text p{font-size:11.5px;color:var(--ink3);line-height:1.5;}
.call-card{margin:0 18px 14px;background:var(--g900);border-radius:14px;padding:16px 18px;}
.call-card small{font-size:10px;color:rgba(255,255,255,.6);}
.call-card .tel{font-size:22px;font-weight:900;color:var(--gold);margin-top:4px;}

/* STAFF */
.staff-hd{background:#111e17;color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;}
.staff-hd h2{font-size:14px;font-weight:700;}
.staff-hd .exit{font-size:12px;color:#7a9688;cursor:pointer;}
.s-tabs{display:flex;background:#0d1710;padding:0 10px;}
.s-tab{padding:11px;font-size:12px;color:#7a9688;cursor:pointer;border-bottom:2px solid transparent;font-weight:500;}
.s-tab.active{color:#fff;border-bottom-color:var(--g300);}
.s-body{padding:14px;background:#111e17;min-height:100%;}
.s-page{display:none;}
.s-page.active{display:block;}
.stat-row{display:flex;gap:8px;margin-bottom:14px;}
.stat-box{flex:1;background:#1a2e20;border:1px solid #253d2b;border-radius:12px;padding:12px;text-align:center;}
.stat-box .n{font-size:22px;font-weight:900;color:#fff;}
.stat-box .l{font-size:10px;color:#7a9688;margin-top:2px;}
.stat-box.warn .n{color:var(--gold);}
.stat-box.ok .n{color:var(--g300);}
.resv-item{background:#1a2e20;border:1px solid #253d2b;border-radius:12px;padding:13px;margin-bottom:10px;}
.resv-item.alert{border-color:var(--gold);}
.resv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.resv-name{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px;}
.flag{font-size:8.5px;padding:2px 6px;border-radius:4px;font-weight:700;}
.flag.care{background:rgba(245,166,35,.15);color:var(--gold);}
.st-w{font-size:9.5px;padding:3px 7px;border-radius:5px;font-weight:600;background:rgba(232,64,64,.18);color:#f08080;}
.st-d{font-size:9.5px;padding:3px 7px;border-radius:5px;font-weight:600;background:rgba(107,201,74,.15);color:var(--g300);}
.resv-meta{font-size:11px;color:#7a9688;line-height:1.7;}
.resv-meta b{color:#b0c8b8;font-weight:500;}
.resv-acts{display:flex;gap:7px;margin-top:10px;}
.resv-acts button{flex:1;padding:8px;border-radius:8px;border:none;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;}
.btn-call{background:var(--gold);color:#4a2c00;}
.btn-ok{background:var(--g300);color:var(--g900);}
.btn-gh{background:#253d2b;color:#b0c8b8;}
.db-item{background:#1a2e20;border:1px solid #253d2b;border-radius:12px;padding:13px;margin-bottom:10px;display:flex;gap:11px;}
.db-photo{width:48px;height:48px;border-radius:10px;background:#253d2b;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.db-name{font-size:13px;font-weight:700;color:#fff;}
.db-sub{font-size:10.5px;color:#7a9688;margin-top:2px;}
.db-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;}
.db-tag{font-size:9px;padding:2px 6px;border-radius:4px;background:#253d2b;color:#b0c8b8;}
.db-tag.h{background:rgba(232,64,64,.15);color:#f08080;}
.sv-item{background:#1a2e20;border:1px solid #253d2b;border-radius:12px;padding:13px;margin-bottom:10px;}
.sv-top{display:flex;justify-content:space-between;margin-bottom:5px;}
.sv-name{font-size:12.5px;font-weight:700;color:#fff;}
.sv-date{font-size:10px;color:#7a9688;}
.sv-stars{color:var(--gold);font-size:12px;margin-bottom:5px;}
.sv-text{font-size:11px;color:#b0c8b8;line-height:1.6;background:#111e17;padding:9px 11px;border-radius:8px;}

/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);display:flex;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid #eee;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:60;}
.nav-item{flex:1;text-align:center;cursor:pointer;padding:2px 0;}
.ni-ico{display:flex;justify-content:center;margin-bottom:3px;}
.ni-lbl{font-size:9px;font-weight:500;color:var(--ink3);}
.nav-item.active .ni-lbl{color:var(--g700);font-weight:700;}
.nav-item.center .ni-ico-wrap{background:var(--g900);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:-18px auto 0;border:3px solid #fff;}
.nav-item.center .ni-lbl{color:var(--g700);font-weight:700;}

/* MODAL */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:100;display:none;align-items:flex-end;justify-content:center;}
.modal-overlay.show{display:flex;}
.modal{width:100%;max-width:var(--maxw);max-height:88vh;background:var(--bg);border-radius:20px 20px 0 0;overflow:hidden;display:flex;flex-direction:column;animation:su .22s ease;}
@keyframes su{from{transform:translateY(100%)}to{transform:none}}
.modal-hd{padding:14px 18px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-hd h3{font-size:15px;font-weight:700;flex:1;margin-right:12px;}
.modal-close{width:28px;height:28px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;}
.modal-body{flex:1;overflow-y:auto;padding:18px;}
.modal-body::-webkit-scrollbar{width:0;}
.blog-content{font-size:13.5px;line-height:1.9;color:var(--ink);white-space:pre-line;}
.yt-wrap{position:relative;padding-bottom:56.25%;height:0;border-radius:10px;overflow:hidden;background:#000;}
.yt-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}
.log-item{padding:13px 0;border-bottom:1px solid #f0f0f0;}
.log-item:last-child{border-bottom:none;}
.log-date{font-size:11px;color:var(--g500);font-weight:700;margin-bottom:5px;}
.log-txt{font-size:12.5px;color:var(--ink);line-height:1.7;}

/* PASSWORD */
.pw-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--g900);z-index:999;display:flex;align-items:center;justify-content:center;}
.pw-box{text-align:center;padding:40px 30px;}
.pw-icon{margin-bottom:16px;}
.pw-box h2{font-size:18px;font-weight:800;color:#fff;margin-bottom:5px;}
.pw-box p{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:22px;}
.pw-input{width:160px;text-align:center;padding:14px;border:2px solid rgba(255,255,255,.2);border-radius:12px;font-size:22px;letter-spacing:10px;outline:none;background:rgba(255,255,255,.08);color:#fff;}
.pw-input:focus{border-color:var(--g300);}
.pw-err{font-size:11px;color:#f08080;margin-top:10px;min-height:16px;}

/* TOAST */
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(14px);background:var(--g900);color:#fff;padding:10px 16px;border-radius:10px;font-size:12px;opacity:0;pointer-events:none;transition:all .28s;z-index:3000;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* LOG BTN */
.log-btn{background:var(--g50);color:var(--g700);border:1px solid var(--g100);border-radius:8px;padding:7px 11px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;}

/* WALK TRACKING (full-screen map) */
#page-walktrack.active{position:fixed;top:0;left:0;right:0;bottom:calc(54px + env(safe-area-inset-bottom));max-width:var(--maxw);margin:0 auto;z-index:1200;display:block;background:#e8e8e8;animation:none;}
#walkmap{position:absolute;inset:0;z-index:1;background:#e8e8e8;}
.wk-pos{width:16px;height:16px;border-radius:50%;background:#2e7d52;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 1px 4px rgba(0,0,0,.25);}
.wk-mk{font-size:22px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.wk-photo img{width:120px;border-radius:9px;display:block;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.wt-top{position:absolute;top:14px;left:14px;right:14px;z-index:1000;display:flex;align-items:center;gap:8px;}
.wt-back{width:38px;height:38px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;flex-shrink:0;font-size:18px;}
.wt-pill{height:38px;padding:0 16px;background:#fff;border:none;border-radius:19px;font-size:12.5px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;color:#333;white-space:nowrap;font-family:inherit;}
.wt-pill-g{background:var(--g900);color:#fff;}
.wt-bottom{position:absolute;left:0;right:0;bottom:0;z-index:1000;background:#1b1e23;padding:12px 20px calc(20px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.34);}
.wt-grab{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:0 auto 14px;}
.wt-stats{display:flex;justify-content:center;align-items:center;margin-bottom:16px;}
.wt-stat{flex:1;text-align:center;}
.wt-sep{width:1px;height:36px;background:rgba(255,255,255,.13);}
.wt-num{font-size:33px;font-weight:800;color:#fff;text-align:center;line-height:1;letter-spacing:.5px;font-variant-numeric:tabular-nums;}
.wt-lbl{font-size:10.5px;color:rgba(255,255,255,.5);text-align:center;margin-top:7px;letter-spacing:.07em;}
.wt-ctrls{display:flex;justify-content:center;align-items:center;gap:28px;}
.wt-ctrl{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:background .15s;}
.wt-ctrl:active{background:rgba(255,255,255,.22);}
.wt-ctrl-main{width:66px;height:66px;background:#fff;color:#1b1e23;box-shadow:0 5px 16px rgba(0,0,0,.3);}
.wt-ctrl-main:active{background:#f0f0f0;}
.wt-stop{width:16px;height:16px;background:#fff;border-radius:4px;}
.wt-pause{display:flex;gap:5px;}
.wt-pause span{width:5px;height:22px;background:#1b1e23;border-radius:2px;}

/* WALK action buttons (mark / start) */
.wt-actions{display:flex;gap:10px;margin-bottom:10px;}
.wt-act{flex:1;height:54px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(255,255,255,.10);border-radius:16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;background:rgba(255,255,255,.07);color:#fff;transition:background .15s;}
.wt-act:active{background:rgba(255,255,255,.16);}
.wt-ico{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.wt-start{display:block;width:100%;height:56px;border:none;border-radius:16px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;margin-bottom:16px;letter-spacing:.02em;box-shadow:0 6px 18px rgba(0,0,0,.28);}
.wt-act-g{background:#fff;color:#1b1e23;}
.wt-act-stop{background:var(--red);color:#fff;}
.wt-ctrl.on{background:#fff;color:#1b1e23;}

/* 센터시설 카드 */
.fac-card{background:var(--bg2);border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(13,31,23,.06);}
.fac-img{width:100%;height:92px;object-fit:cover;display:block;}
.fac-ph{width:100%;height:92px;display:flex;align-items:center;justify-content:center;font-size:34px;background:var(--gold-bg);}
.fac-body{padding:9px 11px;}
.fac-name{font-size:12.5px;font-weight:700;color:var(--ink);}
.fac-desc{font-size:10.5px;color:var(--ink3);line-height:1.4;margin-top:3px;}
.fac-media{position:relative;cursor:pointer;}
.fac-card.has-vid{cursor:pointer;}
.fac-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(transparent 55%,rgba(0,0,0,.28));}
.fac-play span{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;}
.fac-play svg{width:14px;height:14px;fill:#fff;margin-left:2px;}
.fac-vidbadge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.55);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;display:flex;align-items:center;gap:3px;}
.fac-vidbadge svg{width:9px;height:9px;fill:#fff;}

/* 강아지 프로필 수정 폼 - 입력칸 높이/모양 균일화 */
#dpForm input,#dpForm select{height:46px;box-sizing:border-box;}
#dpForm select{-webkit-appearance:none;appearance:none;padding-right:34px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 13px center !important;}
#dpForm input[type=number]{-moz-appearance:textfield;}
#dpForm input[type=number]::-webkit-inner-spin-button,#dpForm input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#dpForm input[type=date]{-webkit-appearance:none;appearance:none;}

/* 건강수첩 기록 추가 폼 - 입력칸 높이/모양 균일화 (종류 select가 날짜/텍스트 input과 다르게 렌더되던 문제) */
#hbForm input,#hbForm select{height:42px;box-sizing:border-box;}
#hbForm select{-webkit-appearance:none;appearance:none;padding-right:34px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 13px center !important;}
#hbForm input[type=number]{-moz-appearance:textfield;}
#hbForm input[type=number]::-webkit-inner-spin-button,#hbForm input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#hbForm input[type=date]{-webkit-appearance:none;appearance:none;}