:root {
  --ink:#192e26; --muted:#61736a; --line:#e2e9e3; --brand:#185a43;
  --brand-soft:#eaf3ea; --canvas:#f6f8f5; --surface:#fff; --radius:16px;
  --shadow:0 2px 5px #163e2707; --rail:236px;
  font-family:Pretendard,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  color:var(--ink); background:var(--canvas); font-synthesis:none;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-width:320px;font-size:14px;line-height:1.56}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.5}
a{color:inherit;text-decoration:none}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #5c9966;outline-offset:3px}
h1,h2,h3,p{margin:0}
svg.icon{display:inline-block;flex:none;vertical-align:middle}
.muted{color:var(--muted)}
.skip{position:fixed;left:12px;top:12px;z-index:100;background:#fff;padding:10px;transform:translateY(-140%)}
.skip:focus{transform:translateY(0)}
.shell{min-height:100vh}
.rail{width:var(--rail);position:fixed;inset:0 auto 0 0;z-index:5;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:25px 17px 17px}
.logo-link{display:flex;align-items:center;gap:10px;padding:0 7px}
.logo-link img{display:block;width:38px;height:38px}
.wordmark{display:block;font-size:20px;font-weight:780;line-height:1.05;letter-spacing:-.065em}
.brand-label{display:block;margin-top:5px;font:650 9px/1.1 system-ui,sans-serif;letter-spacing:.15em;color:#678076}
.nav-label{padding:0 12px;margin:43px 0 9px;font:700 10px/1.4 system-ui,sans-serif;letter-spacing:.13em;color:#68796f}
.account-nav-label{margin-top:23px}
.nav-list{display:grid;gap:5px}
.nav-link{display:flex;align-items:center;gap:11px;min-height:44px;padding:10px 12px;border-radius:9px;color:#52675d;font-weight:650;white-space:nowrap}
.nav-link:hover{background:#f3f7f2;color:var(--brand)}
.nav-link.active{color:#18543f;background:#e8f2e8;font-weight:750}
.nav-link .nav-arrow{margin-left:auto;opacity:0}
.nav-link.active .nav-arrow{opacity:1}
.rail-footer{margin-top:auto;padding-top:26px}
.rail-note{padding:13px 12px;background:#f4f7f0;border-radius:11px;color:#486254;font-size:11px;line-height:1.6}
.rail-note strong{display:flex;align-items:center;gap:6px;color:#254c3a;font-size:12px;margin-bottom:4px}
.rail-meta{margin:12px 4px 0;color:#7a897f;font-size:10px;letter-spacing:.04em}
.body-col{margin-left:var(--rail);min-width:0}
.topbar{min-height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 30px}
.crumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap}
.crumb strong{color:var(--ink);font-weight:700}
.top-right{display:flex;align-items:center;gap:15px}
.demo-tag{display:inline-flex;align-items:center;gap:6px;color:#476852;border:1px solid #dce9d9;border-radius:30px;background:#f5f9f2;padding:4px 9px;font-size:11px;font-weight:700;white-space:nowrap}
.demo-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#5e9e64}
.profile{border:0;background:none;display:flex;align-items:center;gap:9px;padding:0;text-align:left;color:var(--ink)}
.profile-name{font:750 12px/1.3 system-ui,sans-serif;letter-spacing:.015em;white-space:nowrap}
.profile-name strong{display:block;max-width:155px;overflow:hidden;text-overflow:ellipsis}
.profile small{display:block;font-family:inherit;color:var(--muted);font-size:10px;margin-top:2px}
.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e9ede3;color:#285340;font:750 12px/1 system-ui,sans-serif}
.mobile-nav{display:none}
main{max-width:1530px;margin:auto;padding:26px 30px 40px;outline:none}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}
.page-head h1{font-size:clamp(26px,3vw,36px);letter-spacing:-.06em;line-height:1.22;margin:4px 0 6px}
.page-head p{color:var(--muted)}
.eyebrow{font:750 10px/1.35 system-ui,sans-serif;letter-spacing:.17em;color:#47745c;text-transform:uppercase}
.btn{display:inline-flex;min-height:38px;padding:8px 13px;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:9px;font-size:13px;font-weight:710;line-height:1.35;text-decoration:none;white-space:nowrap;transition:background-color .16s,color .16s,border-color .16s}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:#124532}
.btn.secondary{color:#294d3b;background:#fff;border-color:#d9e4db}
.btn.secondary:hover,.btn.quiet:hover{background:var(--brand-soft);border-color:#cfdece}
.btn.quiet{color:#285b44;background:transparent}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 20px}
.panel-head h2{font-size:17px;letter-spacing:-.035em}
.panel-head p{font-size:12px;color:var(--muted);margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:5px;max-width:100%;border-radius:25px;padding:4px 8px;font-size:11px;line-height:1.35;font-weight:740;white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.badge.green{background:#e7f3e9;color:#246040}
.badge.amber{background:#fff3dd;color:#825815}
.badge.blue{background:#eaf2f9;color:#325f85}
.badge.purple{background:#f2ecfa;color:#664688}
.badge.gray{background:#edf1ee;color:#52675d}
.badge.red{background:#faece9;color:#93433b}
.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:collapse;text-align:left}
.data-table th{font-weight:700;font-size:11px;color:#5d7367;background:#f6f8f5}
.data-table td,.data-table th{padding:12px 16px;border-bottom:1px solid #edf0ec;white-space:nowrap}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td{font-size:13px}
.data-table tr:hover td{background:#f9fbf8}
.empty{text-align:center;color:var(--muted);padding:28px 16px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.field{display:grid;align-content:start;gap:5px;font-size:13px;font-weight:690}
.field input,.field select,.field textarea{width:100%;min-height:40px;padding:8px 10px}
input,select,textarea{border:1px solid #d9e4dc;border-radius:8px;background:#fff;color:var(--ink)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--brand)}
.field textarea{resize:vertical}
.field small{color:var(--muted);font-size:11px;font-weight:500}
.dialog{width:min(710px,calc(100vw - 30px));max-height:calc(100dvh - 44px);padding:0;border:1px solid #dbe5dc;border-radius:20px;color:var(--ink);background:#fff;box-shadow:0 25px 100px #102a2454}
.dialog::backdrop{background:#102d27a1}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 16px;border-bottom:1px solid var(--line)}
.dialog-head h2{font-size:23px;letter-spacing:-.05em}
.dialog-head p{margin-top:3px;color:var(--muted);font-size:12px}
.dialog-body{padding:20px 24px 24px}
.profile-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:19px}
.profile-company{margin-top:13px}
.profile-reset{margin-top:15px}
.live-start{min-height:100vh;display:grid;place-content:center;text-align:center}
.live-start section{padding:28px;min-width:min(280px,80vw);display:grid;justify-items:center;gap:12px}
.live-start img{width:42px;height:42px}
.live-start p,.live-user span{color:var(--muted)}
.live-user{margin-top:9px;overflow-wrap:anywhere}
.live-user span{font-size:12px}
.live-account-actions,.live-dialog-tools{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.live-file-form{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;margin-top:12px}
.live-file-form>.field{flex:1;min-width:180px}
.live-invite-result,.live-documents{display:grid;gap:7px;margin-top:15px;padding:12px;border:1px solid var(--line);border-radius:10px}
.live-invite-result[hidden]{display:none}
.live-invite-result button{justify-self:start}
.live-documents h3{margin:0;font-size:13px}
.live-file-link{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;margin:3px 6px 3px 0;color:var(--brand);text-decoration:underline;text-underline-offset:2px;font-size:12px;overflow-wrap:anywhere}
.live-notices{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px}
.live-notices li a{display:grid;gap:3px;padding:10px;border:1px solid var(--line);border-radius:9px;overflow-wrap:anywhere}
.live-notices li.unread a,.live-notices li a:hover{background:var(--brand-soft)}
.live-notices small{color:var(--muted)}
.live-supplement{display:grid;gap:10px}
.live-bell{position:relative}
.live-bell>span{position:absolute;right:0;top:-3px;font-size:9px;font-weight:750;min-width:15px;padding:1px 3px;border-radius:20px;background:var(--brand);color:white}
.flag-box:empty{display:none}
.sales-country .flag-box,.ek-market .flag-box,.mk-country .flag-box{width:25px;height:21px;background:none;border:0;border-radius:0}
.icon-btn{min-width:34px;min-height:34px;display:grid;place-items:center;border:1px solid transparent;border-radius:9px;background:transparent;color:#47675a}
.icon-btn:hover{background:#edf4ec;border-color:#e2ebe0}
.toast{position:fixed;right:24px;bottom:24px;z-index:9;border-radius:11px;padding:12px 16px;color:#fff;background:#173d2f;box-shadow:0 8px 28px #173d2f40;display:none}
.toast.visible{display:block}
.dashboard{display:grid;gap:18px}
.hero{position:relative;isolation:isolate;min-height:274px;overflow:hidden;border-radius:18px;display:flex;align-items:center;background:#10372b;color:#fff}
.hero-photo{position:absolute;inset:0 0 0 29%;background:url(assets/green-skincare.png) center 55%/cover no-repeat;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#10372b 0%,#10372b 27%,#10372bdb 42%,#10372b20 66%,transparent 84%)}
.hero-content{padding:30px 32px}
.hero-label{display:inline-flex;align-items:center;gap:7px;color:#ddf0bb;font:700 10px/1.4 system-ui,sans-serif;letter-spacing:.16em}
.hero h1{font-size:clamp(31px,3.6vw,48px);line-height:1.2;letter-spacing:-.072em;font-weight:780;margin:9px 0 9px}
.hero p{font-size:13px;color:#e2ece1;max-width:440px;word-break:keep-all}
.hero-actions{display:flex;align-items:center;gap:9px;margin-top:19px;flex-wrap:wrap}
.hero-actions .hero-primary{background:#ddedb9;color:#163d2a}
.hero-actions .hero-primary:hover{background:#f0f8db}
.hero-actions .hero-secondary{background:#234d3e99;color:#fff;border-color:#87a79370}
.hero-actions .hero-secondary:hover{background:#355b4c}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.metric{padding:15px 15px 14px;display:block;color:inherit;transition:border-color .15s,background .15s}
.metric:hover{background:#f9fcf8;border-color:#b7d1bc}
.metric-top{display:flex;align-items:center;justify-content:space-between;gap:7px}
.metric-icon,.task-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:#e8f2e8;color:#2d6549}
.metric-icon.blue,.task-icon.blue{background:#e9f1f8;color:#3e6787}
.metric-icon.gold,.task-icon.gold{background:#faf1dd;color:#825f28}
.metric-icon.purple,.task-icon.purple{background:#f1eafa;color:#795991}
.metric-label{display:block;color:#52695d;font-size:12px;margin-top:11px;font-weight:680}
.metric-val{display:block;font-size:26px;font-weight:800;letter-spacing:-.055em;line-height:1.28}
.metric-val small{font-size:13px;margin-left:3px}
.metric-caption{display:block;color:#65786c;font-size:11px;margin-top:3px}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dash-list{list-style:none;margin:0;padding:0 18px 6px}
.dash-list li+li{border-top:1px solid #edf0eb}
.dash-row{display:flex;align-items:center;gap:10px;min-height:62px;padding:8px 1px}
.dash-row:hover .row-title{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.dash-row .right{margin-left:auto;flex:none}
.row-title{display:block;font-size:13px;color:var(--ink);font-weight:750;line-height:1.35}
.row-sub{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.flag-box{width:33px;height:32px;display:grid;place-items:center;background:#f1f5f1;border:1px solid #e9efe8;border-radius:9px;flex:none}
.flag-box svg{border-radius:2px;box-shadow:0 0 0 1px #2542311b}
.home-footer{font-size:11px;color:#6e7f73;text-align:right;margin-top:-5px}
@media(max-width:1150px){
  :root{--rail:203px}
  .rail{padding-inline:13px}
  main{padding-inline:23px}
  .topbar{padding-inline:23px}
  .metric-val{font-size:23px}
}
@media(max-width:850px){
  :root{--rail:182px}
  .home-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-photo{left:12%}
  .hero::after{background:linear-gradient(90deg,#10372b 0%,#10372be8 30%,#10372b55 70%,transparent)}
}
@media(max-width:650px){
  .rail{display:none}
  .body-col{margin-left:0}
  .topbar{padding:0 14px;min-height:57px}
  .crumb{font-size:12px}
  .top-right{gap:8px}
  .profile-name,.profile>.icon{display:none}
  .avatar{width:31px;height:31px}
  .mobile-nav{background:#fff;display:flex;padding:5px 7px;justify-content:space-around;border-bottom:1px solid var(--line);overflow:auto;gap:1px}
  .mobile-nav .nav-link{padding:5px 4px;min-height:35px;font-size:10px;gap:4px;flex:none}
  .mobile-nav .icon{width:15px;height:15px}
  .mobile-nav .nav-arrow{display:none}
  main{padding:14px 12px 28px}
  .dashboard{gap:12px}
  .hero{min-height:237px;border-radius:13px}
  .hero-content{padding:18px}
  .hero h1{font-size:31px}
  .hero-photo{left:0;background-position:58% center}
  .hero::after{background:linear-gradient(90deg,#10372bfa,#10372bc2 50%,#10372b59)}
  .hero p{font-size:12px}
  .metrics,.home-grid{gap:9px}
  .panel-head{padding:13px}
  .dash-list{padding-inline:12px}
  .page-head{gap:11px;align-items:flex-start;flex-direction:column;margin-bottom:14px}
  .page-head p{font-size:13px}
  .dialog-head,.dialog-body{padding:14px}
}
@media(max-width:420px){.form-grid{grid-template-columns:1fr}.metric{padding:11px}.metric-val{font-size:22px}.mobile-nav .nav-link{flex-direction:column;gap:2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}