:root {
  --navy:       #0B1829;
  --navy2:      #132238;
  --navy3:      #1C3355;
  --teal:       #0E9E7A;
  --teal2:      #11C49A;
  --teal-bg:    #E2F7F1;
  --blue:       #1A56DB;
  --blue-bg:    #EBF2FF;
  --amber:      #D97706;
  --amber-bg:   #FEF3C7;
  --red:        #DC2626;
  --red-bg:     #FEE2E2;
  --purple:     #7C3AED;
  --purple-bg:  #EDE9FE;
  --gray-50:    #F8FAFC;
  --gray-100:   #F1F5F9;
  --gray-200:   #E2E8F0;
  --gray-300:   #CBD5E1;
  --gray-400:   #94A3B8;
  --gray-600:   #475569;
  --gray-700:   #334155;
  --gray-900:   #0F172A;
  --white:      #FFFFFF;
  --border:     1px solid var(--gray-200);
  --r:          8px;
  --r-lg:       12px;
  --shadow:     0 1px 6px rgba(11,24,41,.07);
  --shadow-md:  0 4px 18px rgba(11,24,41,.11);
  --font:       'Noto Sans KR', sans-serif;
  --mono:       'IBM Plex Mono', monospace;
  --sidebar-w:  258px;
  --topbar-h:   56px;
}

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Malgun Gothic", "Noto Sans KR", Arial, sans-serif;
      background: #f3f6fb;
      color: #1f2937;
      font-size: 13px;
    }

    /* 式式 LAYOUT 式式 */
    .wrap {
      display: flex;
      height: 100vh;
    }

    /* 式式 SIDEBAR 式式 */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--navy);color:#fff;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:width .2s;
}
.sb-top{
  padding:16px 14px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.logo-row{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.logo-mark{
  width:34px;height:34px;background:var(--teal);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:500;color:#fff;flex-shrink:0;
}
.logo-name{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.3px;}
.logo-sub{font-size:10px;color:rgba(255,255,255,.38);margin-top:1px;letter-spacing:.3px;}
.sb-search{
  margin:12px 0 0;position:relative;
}
.sb-search input{
  width:100%;height:30px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);border-radius:6px;
  padding:0 10px 0 28px;color:#fff;font-size:12px;font-family:var(--font);
  outline:none;transition:border-color .15s;
}
.sb-search input::placeholder{color:rgba(255,255,255,.3);}
.sb-search input:focus{border-color:rgba(255,255,255,.3);}
.sb-search svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);opacity:.35;width:13px;height:13px;}

.sb-body{flex:1;overflow-y:auto;padding:8px 10px 16px;}
.sb-body::-webkit-scrollbar{width:4px;}
.sb-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}

.group-label{
  font-size:10px;font-weight:700;letter-spacing:1.2px;
  color:rgba(255,255,255,.28);padding:16px 4px 6px;
  text-transform:uppercase;display:flex;align-items:center;gap:6px;
}
.group-label::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07);}

.menu-btn{
  width:100%;border:0;background:transparent;
  color:rgba(255,255,255,.6);text-align:left;
  padding:7px 9px;border-radius:7px;cursor:pointer;
  font-size:12.5px;font-family:var(--font);line-height:1.35;
  display:flex;align-items:flex-start;gap:7px;transition:all .13s;
  margin-bottom:2px;
}
.menu-btn svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;opacity:.5;transition:opacity .13s;}
.menu-btn:hover{background:rgba(255,255,255,.07);color:#fff;}
.menu-btn:hover svg{opacity:.8;}
.menu-btn.active{background:var(--teal);color:#fff;font-weight:500;}
.menu-btn.active svg{opacity:1;}
.menu-btn .api-tag{
  margin-left:auto;font-size:9px;font-family:var(--mono);
  background:rgba(255,255,255,.12);padding:1px 5px;border-radius:4px;
  color:rgba(255,255,255,.5);flex-shrink:0;
}
.menu-btn.active .api-tag{background:rgba(255,255,255,.2);color:#fff;}

.sb-footer{
  padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);
  font-size:10px;color:rgba(255,255,255,.22);line-height:1.7;flex-shrink:0;
}

    /* 式式 MAIN 式式 */
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }

    /* 式式 TOPBAR 式式 */
    .topbar {
      min-height: 46px;
      background: rgba(255,255,255,.92);
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 16px;
      flex-shrink: 0;
      backdrop-filter: blur(10px);
      box-shadow: 0 1px 8px rgba(15,23,42,.04);
    }
    .topbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .topbar-left h2 {
      margin: 0;
      font-size: 15px;
      letter-spacing: -0.4px;
      color: #111827;
      white-space: nowrap;
    }
    .topbar-left span {
      color: #64748b;
      font-size: 11px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      padding: 3px 8px;
      white-space: nowrap;
    }
    .topbar-right {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #94a3b8;
      font-size: 11px;
    }
    .update-badge {
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid #fed7aa;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }
    .tab-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .tab-btn {
      border: 1px solid #d1d5db;
      border-radius: 20px;
      padding: 4px 11px;
      font-size: 11.5px;
      background: #fff;
      color: #374151;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
    }
    .tab-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
    .tab-btn.active {
      background: #2563eb;
      color: #fff;
      border-color: #2563eb;
      font-weight: bold;
    }

    /* 式式 CONTENT 式式 */
    .content {
      padding: 10px 12px 14px;
      overflow-y: auto;
      flex: 1;
    }

    /* 式式 SEARCH BOX 式式 */
    .search-box {
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      border: 1px solid #dbe4f0;
      border-radius: 14px;
      padding: 10px 12px;
      margin-bottom: 8px;
      box-shadow: 0 8px 24px rgba(15,23,42,.06);
    }
    .search-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .search-title-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .search-top strong {
      font-size: 13px;
      color: #0f172a;
      letter-spacing: -0.2px;
    }
    .mini-guide {
      color: #94a3b8;
      font-size: 11px;
      white-space: nowrap;
    }

    .filter-row {
      display: grid;
      grid-template-columns: auto auto minmax(220px, 1fr);
      gap: 8px;
      margin-bottom: 8px;
      align-items: center;
    }
    .filter-group {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      color: #475569;
      white-space: nowrap;
    }
    .radio-set {
      display: flex;
      gap: 0;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      overflow: hidden;
      background: #fff;
    }
    .radio-set label {
      padding: 3px 9px;
      font-size: 11.5px;
      cursor: pointer;
      color: #64748b;
      border-right: 1px solid #e2e8f0;
      user-select: none;
      line-height: 1.3;
    }
    .radio-set label:last-child { border-right: none; }
    .radio-set input[type=radio] { display: none; }
    .radio-set input[type=radio]:checked + span { background: #2563eb; color: #fff; display: block; padding: 3px 9px; margin: -3px -9px; }

    .date-select {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      min-width: 0;
    }
    .date-select select {
      height: 28px;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      padding: 0 10px;
      font-size: 11.5px;
      background: #fff;
      font-family: inherit;
      color: #334155;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 68px minmax(160px, 1.35fr) repeat(4, minmax(110px, 1fr)) 78px;
      gap: 6px;
    }
    .form-grid input {
      height: 31px;
      border: 1px solid #cbd5e1;
      border-radius: 9px;
      padding: 0 10px;
      font-size: 12px;
      background: #fff;
      font-family: inherit;
      transition: all .15s ease;
    }
    .form-grid input:focus { outline: none; border-color: #2563eb; }
    .btn {
      height: 31px;
      border: 0;
      border-radius: 9px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      font-size: 12px;
      transition: all .15s;
    }
    .btn-reset { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
    .btn-reset:hover { background: #e5e7eb; }
    .btn-search { background: #2563eb; color: #fff; }
    .btn-search:hover { background: #1d4ed8; }

    .notice { margin-top: 7px; color: #94a3b8; font-size: 11px; text-align: left; }

    /* 式式 SUMMARY CARDS 式式 */
    .summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 8px;
    }
    .s-card {
      background: #fff;
      border: 1px solid #dbe4f0;
      border-radius: 12px;
      padding: 7px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 38px;
      box-shadow: 0 2px 10px rgba(15,23,42,.035);
    }
    .s-card p { margin: 0; color: #64748b; font-size: 11px; }
    .s-card strong { font-size: 16px; color: #0f172a; letter-spacing: -0.5px; }

    /* 式式 SECTION TITLE 式式 */
    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 16px 0 10px;
      font-size: 17px;
      font-weight: 900;
    }
    .section-title::before {
      content: "";
      width: 5px;
      height: 18px;
      background: #2563eb;
      border-radius: 3px;
    }

    /* 式式 RESULT VALIDITY NOTE 式式 */
    .validity-note {
      font-size: 12px;
      color: #1d4ed8;
      margin-bottom: 10px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 6px;
      padding: 6px 12px;
    }

    /* 式式 MAIN GRID (table + detail) 式式 */
    .main-grid {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 14px;
      margin-bottom: 14px;
      align-items: start;
    }

    /* 式式 CARD 式式 */
    .card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      box-shadow: 0 3px 12px rgba(0,0,0,.04);
      overflow: hidden;
    }
    .card-head {
      padding: 11px 14px;
      background: #f9fafb;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      font-size: 13.5px;
    }
    .result-count { font-size: 12px; color: #6b7280; font-weight: normal; }

    /* 式式 TABLE 式式 */
    table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    th {
      background: #f8fafc;
      color: #374151;
      padding: 9px 10px;
      border-bottom: 1px solid #e5e7eb;
      text-align: left;
      font-weight: bold;
      white-space: nowrap;
    }
    td {
      padding: 9px 10px;
      border-bottom: 1px solid #edf0f3;
      color: #374151;
      white-space: nowrap;
    }
    tbody tr { cursor: pointer; transition: background .12s; }
    tbody tr:hover td { background: #f0f7ff; }
    tbody tr.active td { background: #dbeafe; }
    tbody tr.active td:first-child { border-left: 3px solid #2563eb; }

    .kd-code { color: #1d4ed8; font-weight: bold; }
    .price { font-weight: bold; color: #111827; }
    .deleted { color: #dc2626; font-size: 11px; }

    /* badges */
    .bdg {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px; height: 22px;
      border-radius: 50%;
      color: #fff;
      font-size: 11px;
      font-weight: bold;
      margin-right: 3px;
      vertical-align: middle;
    }
    .bdg-bo { background: #2563eb; }
    .bdg-bi { background: #6b7280; }
    .bdg-jm { background: #f59e0b; }
    .bdg-il { background: #10b981; }

    /* 式式 DETAIL TABLE 式式 */
    .detail-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .detail-table tr:hover td { background: transparent; }
    .detail-table td {
      padding: 8px 12px;
      border-bottom: 1px solid #f0f2f5;
      vertical-align: top;
    }
    .detail-table td:first-child {
      background: #f8fafc;
      width: 90px;
      font-weight: bold;
      color: #374151;
      white-space: nowrap;
    }
    .detail-val { color: #111827; }
    .detail-val.blue { color: #1d4ed8; font-weight: bold; }
    .detail-val.big  { font-size: 15px; font-weight: 900; color: #111827; }
    .detail-val.warn { color: #dc2626; font-weight: bold; }

    .ingredient-toggle {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      color: #1d4ed8;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s ease;
    }
    .ingredient-toggle:hover { background: #dbeafe; border-color: #93c5fd; }
    .ingredient-toggle .arrow { font-size: 10px; transition: transform .18s ease; }
    .ingredient-toggle.open .arrow { transform: rotate(180deg); }

    .ingredient-panel {
      display: none;
      margin-top: 8px;
      background: #f8fbff;
      border: 1px solid #dbeafe;
      border-radius: 10px;
      padding: 9px 10px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }
    .ingredient-panel.open { display: block; }
    .ingredient-panel-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
      font-size: 11.5px;
      color: #1d4ed8;
      font-weight: 900;
    }
    .ingredient-total {
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
    }

    .ins-badge {
      display: inline-block;
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
      border-radius: 5px;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: bold;
    }


    /* 式式 INGREDIENT CODE INLINE ACTION 式式 */
    .ingredient-code-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      position: relative;
    }
    .ingredient-hover-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0;
      vertical-align: middle;
    }
    .ingredient-code-text {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 2px 8px;
      border: 1px solid #bfdbfe;
      border-right: 0;
      border-radius: 999px 0 0 999px;
      background: #eff6ff;
      color: #1d4ed8;
      font-size: 12px;
      font-weight: 900;
      line-height: 18px;
    }
    .ingredient-dropdown-trigger {
      width: 28px;
      height: 24px;
      border: 1px solid #bfdbfe;
      border-radius: 0 999px 999px 0;
      background: #dbeafe;
      color: #1d4ed8;
      font-size: 10px;
      font-weight: 900;
      cursor: default;
      font-family: inherit;
      line-height: 20px;
      padding: 0;
    }
    .ingredient-dropdown-trigger:hover,
    .ingredient-hover-wrap:hover .ingredient-dropdown-trigger {
      background: #2563eb;
      border-color: #2563eb;
      color: #fff;
    }
    .ingredient-hover-wrap:hover .ingr-dropdown,
    .ingredient-hover-wrap:focus-within .ingr-dropdown {
      display: block;
    }
    .same-ingr-btn {
      height: 24px;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      color: #1d4ed8;
      border-radius: 999px;
      padding: 0 9px;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s ease;
      line-height: 22px;
    }
    .same-ingr-btn:hover {
      background: #2563eb;
      border-color: #2563eb;
      color: #fff;
      box-shadow: 0 4px 10px rgba(37,99,235,.18);
    }
    .same-ingr-btn:active { transform: translateY(1px); }
    .ingr-toggle {
      border: 0;
      background: transparent;
      color: #1d4ed8;
      font-weight: 900;
      cursor: pointer;
      font-family: inherit;
      padding: 0;
      font-size: 12.5px;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .ingr-dropdown {
      display: none;
      position: absolute;
      top: 28px;
      left: 0;
      z-index: 30;
      min-width: 270px;
      margin-top: 0;
      padding: 9px 10px;
      background: #f8fbff;
      border: 1px solid #dbeafe;
      border-radius: 9px;
      box-shadow: 0 10px 24px rgba(15,23,42,.14);
    }
    .ingr-dropdown.open { display: block; }
    .ingr-mini-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 5px 0;
      border-bottom: 1px solid #eaf1fb;
      font-size: 12px;
    }
    .ingr-mini-row:last-child { border-bottom: 0; }
    .ingr-mini-name { color: #374151; }
    .ingr-mini-amt { color: #1d4ed8; font-weight: 800; white-space: nowrap; }

    /* 式式 SUB GRID 式式 */
    .sub-grid {
      display: grid;
      grid-template-columns: .9fr 1.3fr;
      gap: 14px;
    }

    .up   { color: #dc2626; font-weight: bold; }
    .down { color: #059669; font-weight: bold; }

    .std-code { color: #1d4ed8; font-weight: bold; font-size: 12px; }

    .ingr-code {
      display: inline-block;
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
      border-radius: 5px;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .ingr-row {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid #f0f2f5;
      font-size: 12px;
    }
    .ingr-row:last-child { border-bottom: none; }
    .ingr-name { color: #374151; }
    .ingr-amt  { color: #1d4ed8; font-weight: bold; }

    /* legend row */
    .legend {
      display: flex;
      gap: 12px;
      padding: 8px 14px;
      border-top: 1px solid #f0f2f5;
      background: #fafbfc;
      flex-wrap: wrap;
    }
    .legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280; }


    /* 式式 RIGHT DETAIL STACK COMPACT 式式 */
    .right-detail-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }
    .right-detail-stack .card {
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(15,23,42,.035);
    }
    .right-detail-stack .card-head {
      padding: 8px 11px;
      min-height: 34px;
      font-size: 12.5px;
      background: linear-gradient(180deg, #fbfdff, #f8fafc);
    }
    .detail-table.compact td {
      padding: 5px 9px;
      font-size: 12px;
      line-height: 1.35;
    }
    .detail-table.compact td:first-child {
      width: 78px;
      color: #64748b;
      background: #fbfdff;
    }
    .detail-table.compact .detail-val.big {
      font-size: 14px;
    }
    .detail-table.compact .ins-badge {
      padding: 1px 7px;
      font-size: 10.5px;
    }
    .compact-table {
      font-size: 11.5px;
    }
    .compact-table th {
      padding: 6px 7px;
      font-size: 11px;
      background: #f8fafc;
    }
    .compact-table td {
      padding: 6px 7px;
      font-size: 11.5px;
      line-height: 1.35;
    }
    .compact-table .std-code {
      font-size: 11.5px;
    }
    .compact-table .price {
      font-size: 11.5px;
    }
    .right-mini-note {
      color: #64748b;
      font-size: 10.5px;
      line-height: 1.35;
    }
    .right-detail-stack .ingredient-code-wrap {
      gap: 5px;
    }
    .right-detail-stack .same-ingr-btn {
      height: 22px;
      line-height: 20px;
      padding: 0 8px;
      font-size: 10.5px;
    }
    .right-detail-stack .ingr-dropdown {
      top: 27px;
      min-width: 265px;
      padding: 7px 8px;
    }
    .right-detail-stack .ingr-mini-row {
      padding: 4px 0;
      font-size: 11.5px;
    }

    @media (max-width: 1100px) {
      .main-grid { grid-template-columns: 1fr; }
      .right-detail-stack { gap: 10px; }
    }

    @media (max-width: 1100px) {
      .main-grid, .sub-grid { grid-template-columns: 1fr; }
      .filter-row { grid-template-columns: 1fr 1fr; }
      .date-select { justify-content: flex-start; grid-column: 1 / -1; }
      .form-grid { grid-template-columns: 1fr 1fr; }
      .summary { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 700px) {
      .wrap { flex-direction: column; height: auto; }
      .sidebar { width: 100%; }
    }
.menu-link {
    text-decoration: none;   /* 壽還 薯剪 */
}

.menu-link .menu-text {
    color: #d9ecff;          /* 檜嘐雖諦 綠蝌и 嫩擎 ж棺儀 */
    font-weight: 500;
}

.menu-link:hover .menu-text {
    color: #ffffff;          /* 葆辦蝶 螢溜擊 陽 */
}
.shell{max-width:1560px;margin:0 auto;}