/* ---------- KoreanOEM planning tools: /budget-planner, /formulas, /ingredients, /packaging-options (loaded by those pages only) ---------- */
.kt-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.kt-nav a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:700;color:var(--ink2);transition:border-color .2s,color .2s}
.kt-nav a:hover{border-color:var(--ink);color:var(--ink)}
.kt-nav a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.kt-nav svg{width:15px;height:15px;flex:none}
.kt-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.kt-aside{position:sticky;top:calc(var(--nav-h) + 16px)}
.kt-note,.card .kt-note{font-size:12.5px;line-height:1.5;color:var(--ink2);font-weight:500}
.kt-note a,.kt-link{text-decoration:underline;text-underline-offset:2px;font-weight:700}
.kt-count{font-size:13px;font-weight:700;color:var(--ink2)}
.kt-bar{display:none}
.kt :focus-visible,.kt-drawer :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kt .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.kt-filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:end}
.kt-search{position:relative;flex:1 1 260px;max-width:420px}
.kt-search input{padding-inline-start:40px}
.kt-search svg{position:absolute;inset-inline-start:14px;bottom:16px;width:17px;height:17px;color:var(--ink3);pointer-events:none}
.kt-label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.kt-empty{background:var(--panel);border:1.5px dashed var(--line2);border-radius:var(--r);padding:22px;color:var(--ink2);font-size:15px}
.kt-empty b{color:var(--ink)}
.kt-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kt-top{align-items:start}
@media (max-width:960px){.kt-grid{grid-template-columns:minmax(0,1fr)}.kt-aside{position:static}}
@media (max-width:760px){
  .kt-bar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;align-items:center;justify-content:space-between;gap:12px;background:var(--ink);color:#fff;border-radius:16px;padding:10px 10px 10px 16px;box-shadow:0 12px 30px rgba(21,23,26,.28)}
  .kt-bar b{display:block;font-size:18px;letter-spacing:-.02em;line-height:1.1}
  .kt-bar small{display:block;font-size:12px;color:rgba(255,255,255,.72);font-weight:600}
  .kt-bar .btn{flex:none}
  body.p-plan,body.p-ing{padding-bottom:84px}
  body.p-plan a.mobile-cta,body.p-ing a.mobile-cta{display:none}
}
@media (max-width:600px){.kt-cols{grid-template-columns:minmax(0,1fr)}.kt-search{max-width:none}}

/* budget planner */
.bp-add{display:grid;gap:14px;padding:20px}
.bp-add-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.bp-add-row .field{flex:1 1 240px}
.bp-add-row .btn{height:50px}
.bp-quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bp-quick>span{font-size:13px;font-weight:700;color:var(--ink2);margin-inline-end:2px}
.bp-lines{list-style:none;display:grid;gap:12px;margin-top:14px}
.bp-line{display:grid;grid-template-columns:56px minmax(0,1fr) auto 36px;grid-template-areas:"th info cost rm" "th qty qty qty" "th hint hint hint";gap:8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px 16px 16px;align-items:center}
.bp-th{grid-area:th;width:56px;height:56px;border-radius:14px;object-fit:cover;background:#eceef5;align-self:start}
.bp-info{grid-area:info;min-width:0}
.bp-name{font-size:17px;letter-spacing:-.015em;margin:0}
.bp-meta{font-size:13px;color:var(--ink2);font-weight:600;margin-top:2px}
.bp-cost{grid-area:cost;text-align:end}
.bp-cost b{display:block;font-size:22px;letter-spacing:-.03em;line-height:1.1}
.bp-cost small{display:block;font-size:12.5px;color:var(--ink2);font-weight:600}
.bp-rm{grid-area:rm;width:36px;height:36px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);align-self:start;transition:border-color .2s,color .2s}
.bp-rm:hover{border-color:var(--ink);color:var(--ink)}
.bp-rm svg{width:15px;height:15px}
.bp-qty{grid-area:qty;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.bp-qty label{font-size:13px;font-weight:700;color:var(--ink2)}
.bp-qty input{width:112px;padding:9px 12px;font-size:15px;font-weight:700;border-radius:12px}
.bp-steps{display:flex;flex-wrap:wrap;gap:6px}
.bp-steps button{padding:7px 10px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:12.5px;font-weight:700;line-height:1.2;transition:border-color .2s,background .2s}
.bp-steps button:hover{border-color:var(--ink)}
.bp-steps button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.bp-hint{grid-area:hint;font-size:13px;color:var(--ink2);font-weight:500;line-height:1.45}
.bp-hint.warn{color:var(--accent-dark);font-weight:600}
.bp-empty{margin-top:14px}
.bp-empty .btn{margin-top:12px}
.bp-sum{padding:22px}
.bp-sum-h{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0;max-width:none}
.bp-sum .bp-total{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:10px;color:var(--ink)}
.bp-sum .bp-sub{font-size:14px;font-weight:600;color:var(--ink2);margin-top:8px}
.bp-cta{display:grid;gap:8px;margin-top:18px}
.bp-cta .btn{white-space:normal;text-align:center}
.bp-msg,.card .bp-msg{margin-top:10px;font-size:13px;font-weight:600;color:var(--ink)}
.bp-msg:empty{margin:0}
.bp-msg input{margin-top:6px;font-size:13px;padding:9px 10px}
.bp-msg a{text-decoration:underline;text-underline-offset:2px}
.bp-sum .kt-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.bp-check{border:1px solid var(--line);display:block;min-width:0}
.bp-check legend{float:left;width:100%;padding:0;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.bp-check legend small{display:block;font-size:13px;font-weight:600;color:var(--ink2);letter-spacing:0;margin-top:2px}
.bp-ck{clear:both;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.bp-ck input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.bp-ck b{display:block;font-size:15px;letter-spacing:-.01em}
.bp-ck span{font-size:14px;color:var(--ink2);line-height:1.5}
.bp-breaks{width:100%;border-collapse:collapse;font-size:14px;margin-top:14px}
.bp-breaks th,.bp-breaks td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start}
.bp-breaks th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.bp-breaks td:first-child{font-weight:800}
@media (max-width:600px){
  .bp-line{grid-template-columns:48px minmax(0,1fr) 36px;grid-template-areas:"th info rm" "qty qty qty" "cost cost cost" "hint hint hint";padding:14px}
  .bp-th{width:48px;height:48px;border-radius:12px}
  .bp-cost{display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-align:start;flex-direction:row-reverse;border-top:1px solid var(--line);padding-top:10px}
  .bp-qty input{width:104px}
  .bp-sum .bp-total{font-size:40px}
  .bp-steps{gap:5px}
  .bp-steps button{padding:6px 8px;font-size:12px}
  .bp-add-row .btn{flex:1 1 100%}
}

/* ingredient finder */
.ing-list{display:grid;gap:10px;margin-top:18px}
.ing{background:var(--panel);border:1px solid var(--line);border-radius:18px;scroll-margin-top:calc(var(--nav-h) + 16px)}
.ing[open]{border-color:var(--line2);box-shadow:0 10px 30px rgba(21,23,26,.05)}
.ing>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:2px 14px;padding:16px 18px;align-items:center}
.ing>summary::-webkit-details-marker{display:none}
.ing>summary::after{content:"+";grid-column:2;grid-row:1 / span 3;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:600;transition:transform .3s var(--ease),background .3s}
.ing[open]>summary::after{transform:rotate(45deg);background:var(--accent-soft);border-color:transparent}
.ing h3{font-size:19px;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ing h3 small{font-size:12.5px;font-weight:600;color:var(--ink2);letter-spacing:0}
.ing-one{display:block;font-size:14.5px;color:var(--ink2);line-height:1.45}
.ing-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ing-tags .tag{font-size:11.5px;padding:3px 9px}
.ing-body{padding:2px 18px 18px;display:grid;gap:14px}
.ing-body dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 18px;font-size:15px;line-height:1.55;border-top:1px solid var(--line);padding-top:14px}
.ing-body dt{font-weight:800;font-size:13.5px;color:var(--ink)}
.ing-body dd{color:var(--ink2)}
.ing-body dd a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ing-src{font-size:12.5px;color:var(--ink2);line-height:1.55}
.ing-src a{text-decoration:underline;text-underline-offset:2px}
.ing-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ing-act .btn[aria-pressed="true"]{background:var(--mint);border-color:transparent;color:#146b45}
.ing-act .btn svg{width:16px;height:16px}
.ing-lab{background:var(--mint);border-radius:14px;padding:10px 14px;font-size:14px;color:#146b45;font-weight:600;line-height:1.5}
.ing-lab a{text-decoration:underline;text-underline-offset:2px}
.ing-brief{padding:22px}
.ing-brief h2{font-size:22px;letter-spacing:-.02em;max-width:none}
.ing-picked{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;list-style:none}
.ing-picked button{display:inline-flex;align-items:center;gap:6px;padding:7px 10px 7px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:13px;font-weight:700}
.ing-picked button svg{width:12px;height:12px}
.ing-brief .field{margin-top:14px}
.ing-brief .btn-block{margin-top:14px;white-space:normal}
@media (max-width:600px){.ing>summary{padding:14px}.ing-body{padding:0 14px 16px}.ing-body dl{grid-template-columns:minmax(0,1fr);gap:2px}.ing-body dd{margin-bottom:10px}.ing h3{font-size:18px}}

/* packaging options */
.po-incl{background:var(--mint);border-radius:var(--r);padding:16px 20px;max-width:880px}
.po-incl b{display:block;font-size:16px;letter-spacing:-.01em;color:#0f5537}
.po-incl p{font-size:15px;line-height:1.5;color:#1d4d38;margin-top:4px}
.po-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:end}
.po-bar .field{flex:0 1 360px}
.po-bar .kt-count{padding-bottom:14px}
.po-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.po-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;scroll-margin-top:calc(var(--nav-h) + 16px)}
.po-card>img,.po-ph{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#eceef5}
.po-ph{display:grid;place-items:center;background:var(--sky);color:#1d4f8f}
.po-ph svg{width:96px;height:150px}
.po-head{padding:18px 18px 0;display:flex;flex-direction:column;gap:8px}
.po-head h3{font-size:20px;margin:0}
.po-cap{display:inline-flex;align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--bg);font-size:12.5px;font-weight:800;color:var(--ink)}
.po-head p{font-size:14.5px;color:var(--ink2);line-height:1.5}
.po-card dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:7px 12px;font-size:13.5px;line-height:1.45;padding:14px 18px 20px}
.po-card dt{font-weight:800;color:var(--ink)}
.po-card dd{color:var(--ink2)}
.po-card dd a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.po-deco{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.po-deco li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.po-deco b{font-size:15px}
.po-deco p{grid-column:1;font-size:14px;color:var(--ink2);line-height:1.45}
.po-deco .tag{grid-column:2;grid-row:1 / span 2}
#po,#fl,#ing,#bp{scroll-margin-top:24px}
@media (max-width:960px){.po-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.po-deco{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .po-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .po-bar .field{flex:1 1 100%}
  .po-card{display:grid;grid-template-columns:106px minmax(0,1fr);grid-template-areas:"img head" "dl dl"}
  .po-card>img,.po-ph{grid-area:img;width:92px;height:92px;aspect-ratio:auto;margin:14px 0 0 14px;border-radius:12px}
  .po-ph svg{width:44px;height:68px}
  .po-head{grid-area:head;padding:14px 14px 0;gap:6px}
  .po-head h3{font-size:18px}
  .po-head p{font-size:14px}
  .po-card dl{grid-area:dl;grid-template-columns:84px minmax(0,1fr);padding:12px 14px 16px;font-size:13px}
  .po-deco li{grid-template-columns:minmax(0,1fr)}.po-deco .tag{grid-column:1;grid-row:auto;justify-self:start}
}

/* formula library */
.fl-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:18px}
.fl-card{display:flex;flex-direction:column;text-align:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),border-color .2s;width:100%}
.fl-card:hover{transform:translateY(-3px);border-color:var(--ink)}
.fl-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#eceef5}
.fl-card .b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.fl-card b{font-size:16px;letter-spacing:-.01em;line-height:1.25}
.fl-card small{font-size:12.5px;color:var(--ink2);font-weight:600;line-height:1.4}
.fl-card .p{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:800;color:var(--ink)}
.fl-card .p span{font-weight:600;color:var(--ink2);white-space:nowrap}
.fl-frame{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.fl-frame div{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px}
.fl-frame b{display:block;font-size:15px}
.fl-frame p{font-size:14px;color:var(--ink2);margin-top:4px;line-height:1.5}
@media (max-width:1200px){.fl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:960px){.fl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.fl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fl-frame{grid-template-columns:minmax(0,1fr)}.fl-card .b{padding:10px 12px 12px}.fl-card b{font-size:15px}}

/* drawer (native dialog: focus stays inside, Esc closes) */
.kt-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(560px,100vw);max-width:100vw;height:100%;max-height:100%;border:0;padding:0;background:var(--panel);color:var(--ink);box-shadow:-24px 0 60px rgba(21,23,26,.18);overflow-y:auto;overscroll-behavior:contain}
.kt-drawer[open]{animation:kt-in .35s var(--ease)}
.kt-drawer::backdrop{background:rgba(21,23,26,.45)}
@keyframes kt-in{from{transform:translateX(28px);opacity:0}}
.kt-dh{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px 14px 22px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.kt-dh h2{font-size:22px;letter-spacing:-.02em;max-width:none}
.kt-x{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.kt-x svg{width:16px;height:16px}
.kt-db{padding:18px 22px 28px;display:grid;gap:18px}
.kt-db img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:#eceef5}
.kt-db h3{font-size:16px;letter-spacing:-.01em;margin-bottom:8px}
.kt-db p,.kt-db li{font-size:14.5px;color:var(--ink2);line-height:1.55}
.kt-db .kt-note{font-size:12.5px;line-height:1.5}
.kt-db ul{margin-inline-start:18px}
.kt-db .kv{font-size:14px}
.kt-db .row .btn{flex:1 1 auto}
.kt-db table{width:100%;border-collapse:collapse;font-size:14px}
.kt-db th,.kt-db td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:start}
.kt-db th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.kt-db td+td,.kt-db th+th{text-align:end}
.kt-db .kt-chips{display:flex;flex-wrap:wrap;gap:6px}
.kt-db .kt-chips a{padding:6px 11px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13px;font-weight:700}
.kt-db .kt-chips a:hover{border-color:var(--ink)}
@media (max-width:600px){.kt-drawer{inset:auto 0 0 0;width:100vw;height:auto;max-height:90dvh;border-radius:22px 22px 0 0}.kt-drawer[open]{animation-name:kt-up}.kt-dh{padding:12px 12px 12px 18px}.kt-db{padding:16px 18px 24px}}
@keyframes kt-up{from{transform:translateY(40px);opacity:0}}
html.kt-lock{overflow:hidden}
/* ---------- end planning tools ---------- */