@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root{
  --teal:#1AC9BA;
  --teal-dark:#0FA89A;
  --teal-soft:#E6F9F7;
  --ink:#111111;
  --text:#333333;
  --text-mid:#666666;
  --text-light:#999999;
  --bg:#ffffff;
  --bg-soft:#F6F6F6;
  --bg-soft2:#F2F2F2;
  --border:#E6E6E6;
  --dark:#1A1A1A;
  --danger:#E0503C;
  --radius-sm:5px;
  --radius-md:10px;
  --maxw:1040px;
  --font-kr:'Noto Sans KR','Poppins',Arial,sans-serif;
  --font-en:'Poppins','Noto Sans KR',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-en);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);font-weight:700;letter-spacing:-.01em;}
p{margin:0 0 1em;}
button{font-family:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  min-height:66px;padding-top:10px;padding-bottom:10px;max-width:1140px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;color:var(--ink);}
.brand .mark{
  width:30px;height:30px;border-radius:8px;background:var(--teal);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;
}
.brand small{display:block;font-size:10.5px;font-weight:500;color:var(--text-light);letter-spacing:.06em;}
.nav-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px 10px;font-size:13.5px;}
.nav-actions a,.nav-actions span{white-space:nowrap;}
.nav-actions a{color:var(--text-mid);padding:6px 4px;}
.nav-actions a:hover{color:var(--ink);}
.nav-actions a.btn{padding:8px 14px;color:var(--ink);}
.nav-actions a.btn:hover{color:var(--teal-dark);}
.nav-actions .divider{color:var(--border);}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:#B8BCBC;padding:34px 0;margin-top:60px;font-size:12.5px;}
.site-footer .wrap{max-width:1140px;}
.site-footer strong{color:#fff;}
.site-footer .foot-links{margin-bottom:14px;}
.site-footer .foot-links a{color:#9aa0a0;margin-right:14px;}
.site-footer .foot-links a:hover{color:var(--teal);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 22px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:14.5px;font-weight:600;cursor:pointer;line-height:1;transition:all .15s ease;
}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-dark);}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--border);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-dark);}
.btn-ghost{background:var(--bg-soft);color:var(--text-mid);}
.btn-ghost:hover{background:var(--bg-soft2);}
.btn-danger{background:#fff;color:var(--danger);border-color:#f2d3ce;}
.btn-danger:hover{background:#fff5f3;}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn-icon{width:32px;height:32px;padding:0;flex:0 0 32px;}
.btn-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- Cards / Sections ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:28px;margin-bottom:18px;}
.card + .card{margin-top:0;}
.section-title{
  display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:var(--ink);
  margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--ink);
}
.section-title .badge{
  background:var(--teal);color:#fff;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:20px;
}
.section-note{font-size:12.5px;color:var(--text-light);margin-top:4px;}
.hero-band{background:var(--bg-soft);padding:44px 0 36px;border-bottom:1px solid var(--border);}
.hero-band h1{font-size:26px;margin-bottom:8px;}
.hero-band p{color:var(--text-mid);margin:0;font-size:14.5px;}
.page-body{padding:36px 0 60px;}

/* ---------- Forms ---------- */
.form-row{margin-bottom:20px;}
.form-row label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.form-row .req{color:var(--teal-dark);margin-left:2px;}
.form-row .hint{font-weight:400;color:var(--text-light);font-size:12px;margin-left:6px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],textarea,select{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;
}
textarea{resize:vertical;min-height:90px;}
table.data textarea.item-content{min-height:40px;font-size:13px;padding:6px 8px;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft);}
input[type=file]{
  width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:13px;color:var(--text-mid);background:#fff;
}
input[type=file]::file-selector-button{
  border:none;background:var(--teal);color:#fff;font-weight:700;font-size:12.5px;
  padding:7px 12px;border-radius:var(--radius-sm);margin-right:10px;cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:var(--teal-dark);}
.input-inline{display:flex;gap:8px;align-items:center;}
.input-inline > *{flex:1;}
.check-row{display:flex;align-items:center;gap:8px;font-size:14px;}
.check-grid{display:flex;flex-wrap:wrap;gap:10px 18px;}
.check-item{display:flex;align-items:center;gap:7px;font-size:14px;padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;}
.check-item:has(input:checked){border-color:var(--teal);background:var(--teal-soft);color:var(--teal-dark);font-weight:600;}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--teal);}
.money-suffix{position:relative;}
.money-suffix input{padding-right:34px;text-align:right;}
.money-suffix::after{content:'원';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:13px;}
.field-error{color:var(--danger);font-size:12.5px;margin-top:6px;}
.alert{padding:13px 16px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:18px;}
.alert-error{background:#FDECEA;color:#B3261E;border:1px solid #F6C6C0;}
.alert-ok{background:var(--teal-soft);color:var(--teal-dark);border:1px solid #b7ede7;}

/* ---------- Repeater blocks (samples/menus/files) ---------- */
.repeater-item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin-bottom:12px;background:var(--bg-soft);position:relative;}
.repeater-item .remove-btn{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--text-light);font-size:18px;cursor:pointer;line-height:1;}
.repeater-item .remove-btn:hover{color:var(--danger);}
.add-btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1.5px dashed var(--teal);
  border-radius:var(--radius-sm);color:var(--teal-dark);font-weight:700;font-size:13.5px;background:#fff;cursor:pointer;
}
.add-btn:hover{background:var(--teal-soft);}

.dropzone{border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:10px 12px;transition:border-color .15s ease,background .15s ease;}
.dropzone.is-drag-over{border-color:var(--teal);background:var(--teal-soft);}
.dropzone-hint{display:block;margin-top:6px;font-size:11.5px;color:var(--text-light);}
.dropzone .add-btn{margin-top:10px;}

.menu-main{border:1px solid var(--ink);border-radius:var(--radius-md);padding:18px;margin-bottom:16px;}
.menu-main-head{display:flex;gap:10px;align-items:center;margin-bottom:14px;}
.menu-main-head input{font-weight:700;}
.menu-sub{background:var(--bg-soft);border-radius:var(--radius-sm);padding:14px;margin:10px 0 0 18px;border-left:3px solid var(--teal);}
.menu-sub-head{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.menu-sub-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.menu-sub-fields label{font-size:11.5px;color:var(--text-light);font-weight:700;margin-bottom:4px;display:block;}

/* ---------- Stepper ----------
   Circles sit on their own row with a full-width line behind them (::before);
   each circle has a solid ring border matching the page background so the line
   appears to run "through" the row without ever crossing the label text below. */
.stepper{position:relative;display:flex;justify-content:center;max-width:720px;margin:0 auto 30px;}
.stepper::before{content:'';position:absolute;top:14px;left:8%;right:8%;height:2px;background:var(--border);z-index:0;}
.stepper .step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1;min-width:0;padding:0 4px;}
.stepper .num{width:28px;height:28px;border-radius:50%;background:var(--bg-soft2);color:var(--text-light);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:3px solid var(--bg);flex-shrink:0;}
.stepper .label{font-size:12px;color:var(--text-light);font-weight:600;text-align:center;max-width:100%;}
.stepper .step.active .num{background:var(--teal);color:#fff;}
.stepper .step.active .label{color:var(--ink);}
.stepper .step.done .num{background:var(--ink);color:#fff;}

/* ---------- Styled file input (matches CMS reference form) ---------- */
.file-drop{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;background:#fff;}
.file-drop-input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;}
.file-drop-btn{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;
  background:var(--teal);color:#fff;font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:var(--radius-sm);white-space:nowrap;
}
.file-drop-btn:hover{background:var(--teal-dark);}
.file-drop-icon{font-size:14px;}
.file-drop-name{font-size:13px;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- Signature pad ---------- */
.sigpad-wrap{border:1.5px solid var(--border);border-radius:var(--radius-sm);background:#fdfdfd;position:relative;}
.sigpad-wrap canvas{width:100%;height:160px;display:block;touch-action:none;cursor:crosshair;}
.sigpad-wrap .sigpad-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-light);font-size:13px;pointer-events:none;}
.sigpad-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}

/* ---------- Terms scroll box ---------- */
.terms-box{
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-soft);
  max-height:340px;overflow-y:auto;padding:22px 24px;font-size:13.5px;color:var(--text);line-height:1.8;
}
.terms-box h4{font-size:14px;margin:18px 0 6px;color:var(--ink);}
.terms-box h4:first-child{margin-top:0;}
.terms-box p{margin:0 0 10px;}
.agree-box{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin-top:14px;display:flex;align-items:center;justify-content:space-between;}
.agree-box.checked{border-color:var(--teal);background:var(--teal-soft);}

/* ---------- Stamp / seal signature element ---------- */
.stamp{
  width:76px;height:76px;border-radius:50%;border:3px solid var(--teal);color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;
  transform:rotate(-8deg);margin:0 auto 18px;letter-spacing:-.02em;line-height:1.2;text-align:center;
}
.complete-hero{text-align:center;padding:50px 20px;}
.complete-hero h1{font-size:22px;}
.complete-hero .no{font-family:var(--font-en);font-weight:700;color:var(--teal-dark);letter-spacing:.03em;}

/* ---------- Intranet migrated post content ---------- */
.intranet-content img{max-width:100%;height:auto;border-radius:6px;margin:6px 0;}
.intranet-content{overflow-wrap:anywhere;word-break:break-word;}
.intranet-content table{max-width:100%;}

/* ---------- Toast notification ---------- */
.toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(16px);
  background:var(--ink);color:#fff;padding:13px 24px;border-radius:var(--radius-md);
  font-size:14px;font-weight:600;box-shadow:0 10px 28px rgba(0,0,0,.22);
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  z-index:999;display:flex;align-items:center;gap:8px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast::before{content:'✓';color:var(--teal);font-weight:800;}

/* ---------- Seal / stamp overlay ----------
   .seal wraps ONLY the "(인)" text so the image centers on that glyph
   regardless of how long the preceding name/title text is. */
.seal{position:relative;display:inline-block;}
.seal .seal-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);
  width:64px;height:64px;pointer-events:none;opacity:.9;mix-blend-mode:multiply;
}
.seal .seal-mark img{width:100%;height:100%;object-fit:contain;display:block;}
@media print{ .seal .seal-mark{ opacity:1; } }

/* ---------- Responsive table wrapper ---------- */
.wrap-table{width:100%;overflow-x:auto;}
.wrap-table table.data{min-width:640px;}
@media screen and (max-width:820px){
  /* Any .card that directly holds a data table scrolls horizontally instead of
     clipping/breaking its layout — overrides inline overflow:hidden some pages set. */
  .card:has(> table.data){overflow-x:auto !important;-webkit-overflow-scrolling:touch;}
}

/* ---------- Tables (view / admin) ---------- */
table.data{width:100%;border-collapse:collapse;font-size:13.5px;}
table.data th,table.data td{border:1px solid var(--border);padding:10px 12px;text-align:left;}
table.data th{background:var(--bg-soft);color:var(--ink);font-weight:700;}
.info-table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.info-table th{width:150px;background:var(--bg-soft);text-align:left;padding:11px 14px;font-size:13px;color:var(--text-mid);font-weight:700;border:1px solid var(--border);}
.intranet-info-table th{color:var(--ink);word-break:keep-all;}
.board-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.board-tab{padding:6px 16px;border-radius:6px;font-size:13px;font-weight:700;background:var(--bg-soft);color:var(--text-mid);border:1px solid var(--border);}
.board-tab:hover{background:var(--bg-soft2);}
.board-tab.active{background:var(--teal);color:#fff;border-color:var(--teal);}
.board-tab.disabled{opacity:.4;cursor:not-allowed;}
.editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px;border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;background:var(--bg-soft);}
.editor-toolbar button{padding:5px 9px;font-size:12.5px;border:1px solid var(--border);border-radius:5px;background:#fff;cursor:pointer;color:var(--ink);}
.editor-toolbar button:hover{background:var(--bg-soft2);}
.editor-toolbar select{width:fit-content; padding:4px 6px;font-size:12.5px;border:1px solid var(--border);border-radius:5px;background:#fff;}
.editor-toolbar input[type=color]{width:30px;height:28px;padding:2px;border:1px solid var(--border);border-radius:5px;background:#fff;cursor:pointer;}
.editor-sep{width:1px;align-self:stretch;background:var(--border);margin:0 4px;}
.editor-body{min-height:280px;padding:14px;border:1px solid var(--border);border-radius:0 0 8px 8px;font-size:14px;line-height:1.7;overflow-y:auto;overflow-wrap:anywhere;word-break:break-word;}
.editor-body:focus{outline:none;border-color:var(--teal);}
.editor-body img{max-width:100%;height:auto;}
.ref-block{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;}
.ref-block summary{padding:13px 16px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;background:var(--bg-soft);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ref-block summary::-webkit-details-marker{display:none;}
.ref-block summary span::before{content:'▸ ';color:var(--teal-dark);}
.ref-block[open] summary span::before{content:'▾ ';}
.ref-block[open] summary{border-bottom:1px solid var(--border);}
.ref-edit-btn{flex-shrink:0;}
.ref-content{padding:14px;}
.ref-content table.data{width:100%;}
.ref-content table.data td{font-size:13px;line-height:1.6;}
.ref-content p{margin-top:14px;}
.ref-content p:first-child{margin-top:0;}
.drag-handle{cursor:grab;text-align:center;color:var(--text-light);font-size:16px;user-select:none;}
table.data tr.dragging{opacity:.4;background:var(--bg-soft);}
table.data tbody tr[draggable="true"]:hover{background:var(--bg-soft);}
.info-table td{padding:11px 14px;font-size:13.5px;border:1px solid var(--border);}

/* ---------- Admin ---------- */
.admin-shell{display:flex;min-height:100vh;}
.admin-side{width:220px;background:var(--dark);color:#c7cbcb;flex-shrink:0;padding:22px 0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.admin-side .brand{color:#fff;padding:0 22px 22px;font-size:16px;}
.admin-side nav a{display:block;padding:11px 22px;font-size:13.5px;color:#c7cbcb;}
.admin-side nav a:hover{background:#262626;color:#fff;}
.admin-side nav a.active{background:var(--teal);color:#fff;font-weight:700;}
.admin-main{flex:1;background:#FAFAFA;min-width:0;}
.admin-topbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--border);background:#fff;}
#mobile-toggle{display:none;}
.global-search{flex:1;display:flex;align-items:center;max-width:420px;margin-right:16px;}
.global-search input{width:100%;padding:8px 14px;border:1px solid var(--border);border-radius:20px 0 0 20px;font-size:13px;background:var(--bg-soft);}
.global-search input:focus{background:#fff;border-color:var(--teal);}
.global-search button{border:1px solid var(--border);border-left:none;background:var(--bg-soft);border-radius:0 20px 20px 0;padding:8px 14px;font-size:13px;cursor:pointer;color:var(--text-mid);}
.global-search button:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
.admin-content{padding:26px 28px 60px;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;}
.stat-card .num{font-size:26px;font-weight:800;color:var(--ink);font-family:var(--font-en);}
.stat-card .label{font-size:12.5px;color:var(--text-light);margin-top:4px;}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.search-form{display:flex;gap:8px;}
.search-form input,.search-form select{width:auto;}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:20px;}
.pagination a,.pagination span{padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--text-mid);}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink);}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;}
.tag-teal{background:var(--teal-soft);color:var(--teal-dark);}
.tag-gray{background:var(--bg-soft2);color:var(--text-mid);}
.tag-dark{background:var(--ink);color:#fff;}
.tag-red{background:#e53935;color:#fff;}
.board-tag{display:inline-block;padding:3px 9px;border-radius:5px;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap;}
.board-tag-project{background:#dbeafe;color:#1d4ed8;}
.board-tag-production{background:#ffedd5;color:#c2410c;}
.board-tag-cms{background:#ede9fe;color:#6d28d9;}
.board-tag-project-old{background:#e5e7eb;color:#374151;}
.board-tag-maintenance{background:#dcfce7;color:#15803d;}
.board-tag-tips{background:#fef3c7;color:#a16207;}
.board-tag-default{background:var(--bg-soft2);color:var(--text-mid);}
.cat-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.cat-filter a{padding:5px 12px;border-radius:20px;font-size:12.5px;background:#fff;border:1px solid var(--border);color:var(--text-mid);transition:background .15s,color .15s,border-color .15s;}
.cat-filter a:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
.cat-filter a.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.cat-filter a.active:hover{background:var(--ink);border-color:var(--ink);}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);}
.login-box{width:360px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:36px;}
.login-box .brand{justify-content:center;margin-bottom:24px;}
.thumb-img{width:120px;height:80px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);}

.admin-page .scroll-helper{position:fixed;right:20px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:1100;}
.admin-page .scroll-helper button{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(17,17,17,.12);background:#fff;color:var(--ink);box-shadow:0 14px 28px rgba(8,20,41,.12);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;cursor:pointer;transition:transform .18s ease,background-color .18s ease,border-color .18s ease;}
.admin-page .scroll-helper button:hover{transform:translateY(-1px);background:var(--teal);border-color:var(--teal);color:#fff;}
.admin-page .scroll-helper button:focus-visible{outline:3px solid rgba(20,184,166,.3);outline-offset:3px;}
.admin-page .scroll-helper button:active{transform:translateY(0);}
@media (max-width:720px){.admin-page .scroll-helper{right:12px;bottom:12px;gap:8px;}.admin-page .scroll-helper button{width:40px;height:40px;}}

/* ---------- misc ---------- */
.muted{color:var(--text-light);}
.right{text-align:right;}
.center{text-align:center;}
.mt0{margin-top:0;}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.products-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;}
.divider{height:1px;background:var(--border);margin:26px 0;}

@media (max-width:820px){
  .form-grid,.grid-2,.products-grid-3{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .admin-side{position:fixed;left:-240px;top:0;bottom:0;height:100vh;width:240px;transition:left .2s;z-index:100;box-shadow:2px 0 20px rgba(0,0,0,.2);overflow-y:auto;}
  .admin-side.open{left:0;}
  .admin-overlay{display:none;}
  .admin-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99;}
  #mobile-toggle{display:inline-flex !important;order:1;}
  .admin-topbar{flex-wrap:wrap;height:auto;min-height:60px;padding:10px 16px;row-gap:10px;}
  .admin-topbar .global-search{order:3;flex:1 1 100%;max-width:100%;margin-right:0;}
  .admin-topbar>div:last-child{order:2;flex:1 1 auto;justify-content:flex-end;font-size:12.5px;gap:8px !important;}
  .admin-topbar>div:last-child a[href="/"],
  .admin-topbar>div:last-child a[href^="/downloads/"]{display:none;}
  .admin-content{padding:16px 14px 40px;}
  .menu-sub-fields{grid-template-columns:1fr;}
  .stepper .label{font-size:10.5px;}
  .stepper::before{left:6%;right:6%;}
}

/* ---------- Mobile fine-tuning (phones; screen-only so print/PDF stay desktop-style) ---------- */
@media screen and (max-width:480px){
  .wrap{padding:0 14px;}
  .site-header .wrap{padding-top:8px;padding-bottom:8px;}
  .brand{font-size:16px;gap:8px;}
  .brand .mark{width:26px;height:26px;font-size:13px;}
  .brand small{font-size:9.5px;}
  .nav-actions{width:100%;font-size:12px;gap:5px 8px;}
  .nav-actions a.btn{padding:6px 10px;}
  .info-table,.info-table tbody,.info-table tr{display:block;width:100%;}
  .info-table th,.info-table td{display:block;width:100% !important;box-sizing:border-box;word-break:break-word;overflow-wrap:anywhere;white-space:normal !important;}
  .info-table tr{border-bottom:1px solid var(--border);padding:8px 0;}
  .info-table tr:last-child{border-bottom:none;}
  .info-table th{border:none;background:none;padding:2px 2px 2px;font-size:11.5px;color:var(--text-mid);font-weight:700;}
  .info-table td{border:none;padding:0 2px 2px;font-size:13.5px;}
  table.data th,table.data td{padding:8px 8px;font-size:12.5px;}
  .stamp{width:60px;height:60px;font-size:11px;}
  .complete-hero{padding:34px 12px;}
  #quote-print-card h1,[id^="quote-print-card-"] h1{font-size:20px;}
  .complete-hero h1{font-size:19px;}
  .login-box{width:100%;max-width:340px;padding:24px;}
  .stepper .label{font-size:9.5px;}
}

@media print{
  .site-header,.site-footer,.no-print{display:none !important;}
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;color-adjust:exact !important;}
  body{font-size:12px;}
  .wrap{max-width:750px !important;padding:0 !important;}
  .card{border:none;padding:20px !important;}
  .page-body{padding:0;}
  .admin-side,.admin-topbar{display:none !important;}
  .admin-main{background:#fff;}
  .admin-content{padding:0;}
  .terms-box{max-height:none !important;overflow:visible !important;background:#fff !important;border:none !important;padding:0 !important;}
  .wrap-table{overflow:visible !important;}
  .wrap-table table.data td{overflow-wrap:anywhere;word-break:break-word;}
}

/* ---------- 관리자 모바일: 표를 카드로 (휴대폰에서 칸이 좁아 글자가 세로로 쪼개지지 않게) ----------
   각 줄 = 카드 한 장, 각 칸 = "항목명 : 값". 항목명은 표 머리(th)에서 자동으로 붙인다(_layout_bottom.php). */
@media screen and (max-width:820px){
  .admin-page table.data:not(.no-card){border:0;min-width:0 !important;width:100%;}
  .admin-page table.data:not(.no-card) thead{display:none;}
  .admin-page table.data:not(.no-card),.admin-page table.data:not(.no-card) tbody,.admin-page table.data:not(.no-card) tr,.admin-page table.data:not(.no-card) td{display:block;width:100% !important;box-sizing:border-box;}
  .admin-page table.data:not(.no-card) tr{border:1px solid var(--border);border-radius:12px;padding:8px 12px;margin:0 0 10px;background:#fff;}
  .admin-page table.data:not(.no-card) td,.admin-page table.data:not(.no-card) th{border:0;padding:6px 0;text-align:right;display:flex;justify-content:space-between;align-items:center;gap:12px;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;font-size:13.5px;}
  .admin-page table.data:not(.no-card) td + td{border-top:1px dashed var(--border);}
  .admin-page table.data:not(.no-card) td[data-label]:not([data-label=""])::before{content:attr(data-label);flex:0 0 34%;text-align:left;font-size:12px;font-weight:700;color:var(--text-light, #888);}
  .admin-page table.data:not(.no-card) td > *{max-width:100%;}
  .admin-page table.data:not(.no-card) td input,.admin-page table.data:not(.no-card) td select,.admin-page table.data:not(.no-card) td textarea{flex:1 1 auto;min-width:0;width:auto;}
  .admin-page table.data:not(.no-card) td:empty{display:none;}
  /* 첫 칸(보통 이름·업체명)은 카드 제목처럼 */
  .admin-page table.data:not(.no-card) td:first-child{justify-content:flex-start;text-align:left;font-size:14.5px;flex-wrap:wrap;}
  .admin-page table.data:not(.no-card) td:first-child::before{display:none;}
  .admin-page .card:has(> table.data){overflow-x:visible !important;}
  .admin-page .cons-table-wrap,.admin-page .wrap-table{overflow-x:visible;}
  /* 버튼 묶음은 줄바꿈 */
  .admin-page table.data td .btn{white-space:nowrap;}
  .admin-page table.data td:last-child{flex-wrap:wrap;justify-content:flex-end;}
}