/* mockup port. generated by scripts/export-mockup-css.mjs from design/mockup-source.css.
   do not hand-edit: change the mockup source and re-run the export.
   every rule lives under .ohm-mk so generic names (.card .rows .n .t) never collide. */
.ohm-mk.ohm-mk {--g:#eef1f6;--g2:#f7f8fb;--card:rgba(255,255,255,.72);--solid:#fff;--k:#1c1c1e;--k2:#6e6e73;--k3:#a9adb4;--sep:rgba(0,0,0,.07);--hair:rgba(0,0,0,.10);--rule:rgba(28,28,30,.88);--fill:rgba(120,130,145,.10);--field:rgba(120,130,145,.12);--sh:0 1px 2px rgba(16,24,40,.04),0 10px 28px rgba(16,24,40,.07);--blur:saturate(180%) blur(20px);
    --green:#34c759;--gt:#248a3d;--gs:#e8f8ec;--orange:#ff9500;--ot:#c93400;--os:#fff3e0;--red:#ff3b30;--rt:#d70015;--rs:#ffe9e7;
    --sf:-apple-system,"SF Pro Display","SF Pro Text","Archivo","Noto Sans KR",sans-serif;
    --kr:-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
.ohm-mk.ohm-mk .sc {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.ohm-mk.ohm-mk svg {width:22px;height:22px;display:block}
.ohm-mk.ohm-mk .bar {display:flex;align-items:center;gap:10px;height:56px;padding:0 14px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--sep);position:sticky;top:0;z-index:6}
.ohm-mk.ohm-mk .bar .mark {flex:0 0 auto;display:grid;place-items:center}
.ohm-mk.ohm-mk .bar .mark svg.lg {width:38px;height:24px;max-width:none;max-height:none}
.ohm-mk.ohm-mk .bar .mark i {font-style:normal;color:var(--gt)}
.ohm-mk.ohm-mk .bar .ttl {flex:1;min-width:0;font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ohm-mk.ohm-mk .bar .ib {flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;color:var(--k);position:relative}
.ohm-mk.ohm-mk .bar .ib .bdg {position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;border-radius:8px;background:var(--red);color:#fff;font-family:var(--sf);font-size:10px;font-weight:800}
.ohm-mk.ohm-mk .fld {flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:36px;padding:0 11px;border-radius:10px;background:var(--field);color:var(--k2);font-size:14px}
.ohm-mk.ohm-mk .fld svg {width:16px;height:16px;color:var(--k3);flex:0 0 auto}
.ohm-mk.ohm-mk .fld span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ohm-mk.ohm-mk .fld.on {color:var(--k)}
.ohm-mk.ohm-mk .card {margin:14px 16px 0;border:1px solid var(--hair);border-radius:16px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh);overflow:hidden}
.ohm-mk.ohm-mk .card.flat {border:0;background:none;margin-left:0;margin-right:0}
.ohm-mk.ohm-mk .lbl {font-family:var(--sf);font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--k2)}
.ohm-mk.ohm-mk .rule {border-bottom:4px solid var(--rule)}
.ohm-mk.ohm-mk .hero {padding:16px 16px 14px;border-bottom:4px solid var(--rule)}
.ohm-mk.ohm-mk .hero .t {margin-top:7px;font-weight:700;font-size:20px;line-height:1.28;letter-spacing:-.03em}
.ohm-mk.ohm-mk .hero .n {display:flex;align-items:baseline;gap:10px;margin-top:10px}
.ohm-mk.ohm-mk .hero .n b {font-family:var(--sf);font-size:56px;font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .hero .n span {font-size:12.5px;color:var(--k2);line-height:1.45}
.ohm-mk.ohm-mk .hero .n span b {display:inline;font-size:12.5px;font-weight:700;color:var(--rt);letter-spacing:0}
.ohm-mk.ohm-mk .rows a {display:grid;grid-template-columns:var(--nw,76px) 1fr 12px;gap:12px;align-items:center;padding:11px 14px}
.ohm-mk.ohm-mk .rows a+a {border-top:1px solid var(--sep)}
.ohm-mk.ohm-mk .rows .n {font-family:var(--sf);font-weight:800;font-size:25px;letter-spacing:-.045em;line-height:1;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .rows .n.r {color:var(--rt)}
.ohm-mk.ohm-mk .rows .n.o {color:var(--ot)}
.ohm-mk.ohm-mk .rows .n.m {color:var(--k2)}
.ohm-mk.ohm-mk .rows .n small {display:block;font-family:var(--kr);font-size:10.5px;font-weight:500;color:var(--k2);margin-top:3px;white-space:nowrap;letter-spacing:0}
.ohm-mk.ohm-mk .rows .n.x {font-family:var(--kr);font-size:11.5px;font-weight:600;color:var(--k2);line-height:1.3;letter-spacing:0}
.ohm-mk.ohm-mk .rows .t {min-width:0;font-size:14.5px;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.ohm-mk.ohm-mk .rows .t small {display:block;font-size:12px;font-weight:400;color:var(--k2);margin-top:2px}
.ohm-mk.ohm-mk .rows .t b {font-weight:700}
.ohm-mk.ohm-mk .rows .ch {color:var(--k3);font-family:var(--sf);font-size:15px}
.ohm-mk.ohm-mk .rows .rt {flex:0 0 auto;font-family:var(--sf);font-size:13px;font-weight:600;color:var(--k2);white-space:nowrap}
.ohm-mk.ohm-mk .rows .rt.g {color:var(--gt)}
.ohm-mk.ohm-mk .rows .rt.r {color:var(--rt)}
.ohm-mk.ohm-mk .rows a.two {grid-template-columns:1fr auto 12px}
.ohm-mk.ohm-mk .quick {display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:14px 12px 0}
.ohm-mk.ohm-mk .quick a {display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;font-weight:500}
.ohm-mk.ohm-mk .quick a i {display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--hair);border-radius:16px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh)}
.ohm-mk.ohm-mk .quick a i svg {width:24px;height:24px;color:var(--k)}
.ohm-mk.ohm-mk .sec {display:flex;align-items:baseline;justify-content:space-between;padding:24px 16px 8px}
.ohm-mk.ohm-mk .sec h3 {margin:0;font-family:var(--sf);font-weight:700;font-size:19px;letter-spacing:-.025em}
.ohm-mk.ohm-mk .sec h3 small {font-family:var(--kr);font-weight:400;font-size:12px;color:var(--k2)}
.ohm-mk.ohm-mk .sec span {font-size:14px;color:var(--k2)}
.ohm-mk.ohm-mk .cnt {padding:12px 16px 0;font-size:12.5px;color:var(--k2);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .cnt b {color:var(--k);font-family:var(--sf)}
.ohm-mk.ohm-mk .grp {padding:20px 16px 6px;font-family:var(--sf);font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--k2)}
.ohm-mk.ohm-mk .pad {height:120px}
.ohm-mk.ohm-mk .g2 {display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:12px 16px 0}
.ohm-mk.ohm-mk .g3 {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 16px 0}
.ohm-mk.ohm-mk .pc {border:1px solid var(--hair);border-radius:16px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh);overflow:hidden;position:relative}
.ohm-mk.ohm-mk .pc .s {display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:13px 13px 10px;border-bottom:3px solid var(--rule)}
.ohm-mk.ohm-mk .pc .s b {font-family:var(--sf);font-weight:800;font-size:38px;line-height:.88;letter-spacing:-.055em;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .pc .s b.o {color:var(--ot)}
.ohm-mk.ohm-mk .pc .s b.r {color:var(--rt)}
.ohm-mk.ohm-mk .pc .s b.x {font-family:var(--kr);font-size:12px;font-weight:600;color:var(--k2);letter-spacing:0;line-height:1.25}
.ohm-mk.ohm-mk .pc .s .lbl {font-size:9.5px;flex:0 0 auto}
.ohm-mk.ohm-mk .pc .m {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:9px 13px 0;font-family:var(--sf);font-size:11px;font-weight:500;line-height:1.5;color:var(--k2);font-variant-numeric:tabular-nums;min-height:30px}
.ohm-mk.ohm-mk .pc .m span+span::before {content:'·';margin:0 5px;color:var(--k3)}
.ohm-mk.ohm-mk .pc .m i {font-style:normal;color:var(--k);font-weight:700}
.ohm-mk.ohm-mk .pc .m i.g {color:var(--gt)}
.ohm-mk.ohm-mk .pc .nm {padding:6px 13px 0;font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.015em;min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ohm-mk.ohm-mk .pc .mk {padding:3px 13px 12px;font-size:11.5px;color:var(--k2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ohm-mk.ohm-mk .pc .pick {position:absolute;right:10px;top:10px;width:22px;height:22px;border:1.5px solid var(--k3);border-radius:7px;background:var(--solid)}
.ohm-mk.ohm-mk .pc .pick.on {border-color:var(--gt);background:var(--gt)}
.ohm-mk.ohm-mk .pc .pick.on::after {content:"✓";display:grid;place-items:center;height:100%;color:#fff;font-size:13px;font-weight:900}
.ohm-mk.ohm-mk .pc .pick+.s .lbl {visibility:hidden}
.ohm-mk.ohm-mk .hrail {display:flex;gap:12px;padding:12px 16px 0;overflow-x:auto}
.ohm-mk.ohm-mk .hrail .pc {flex:0 0 150px}
.ohm-mk.ohm-mk .seg {display:flex;margin:10px 16px 0;padding:2px;border-radius:9px;background:var(--fill);font-size:13px}
.ohm-mk.ohm-mk .seg :is(span,button) {flex:1;padding:6px 0;text-align:center;color:var(--k)}
.ohm-mk.ohm-mk .seg :is(b,[aria-pressed="true"]) {flex:1;padding:6px 0;text-align:center;border-radius:7px;background:var(--card);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ohm-mk.ohm-mk .filt {display:flex;gap:8px;padding:10px 16px 0;overflow:hidden}
.ohm-mk.ohm-mk .filt :is(span,a,button) {flex:0 0 auto;padding:7px 13px;border:1px solid var(--hair);border-radius:999px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);font-size:12.5px;font-weight:500;white-space:nowrap}
.ohm-mk.ohm-mk .filt :is(span,a,button).on {border-color:transparent;background:var(--k);color:var(--solid);font-weight:700}
.ohm-mk.ohm-mk .filt :is(span,a,button).b {border-color:var(--sep);color:var(--k);font-weight:600}
.ohm-mk.ohm-mk .filt :is(span,a,button).b::after {content:'';display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:3px;background:var(--gt);vertical-align:1px}
.ohm-mk.ohm-mk .filt.stick {position:sticky;top:0;z-index:5;padding-bottom:10px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--sep)}
.ohm-mk.ohm-mk .tabs {display:flex;gap:18px;padding:10px 16px 0;border-bottom:1px solid var(--sep);font-size:15px}
.ohm-mk.ohm-mk .tabs :is(span,a) {padding-bottom:9px;color:var(--k2)}
.ohm-mk.ohm-mk .tabs :is(b,a[aria-current]) {padding-bottom:7px;border-bottom:2.5px solid var(--k);font-weight:700}
.ohm-mk.ohm-mk .tb {flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr);height:64px;padding-bottom:6px;border-top:1px solid var(--sep);background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.ohm-mk.ohm-mk .tb a {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:500;color:var(--k2)}
.ohm-mk.ohm-mk .tb a svg {width:24px;height:24px}
.ohm-mk.ohm-mk .tb a.on {color:var(--gt);font-weight:700}
.ohm-mk.ohm-mk .act {flex:0 0 auto;display:flex;gap:8px;height:74px;padding:0 16px 8px;align-items:center;border-top:1px solid var(--sep);background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.ohm-mk.ohm-mk .act span {flex:1;height:50px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:14px;background:var(--card);font-size:13.5px;font-weight:600}
.ohm-mk.ohm-mk .act span.p {flex:2;border-color:transparent;background:var(--gt);color:#fff;font-size:15px;font-weight:700;box-shadow:0 4px 14px rgba(36,138,61,.32)}
.ohm-mk.ohm-mk .act .ic {flex:0 0 62px;flex-direction:column;gap:3px;font-size:10.5px;border:0}
.ohm-mk.ohm-mk .act .ic svg {width:21px;height:21px}
.ohm-mk.ohm-mk .fab {position:absolute;right:16px;bottom:86px;z-index:4;width:56px;height:56px;display:grid;place-items:center;border-radius:28px;background:var(--gt);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.ohm-mk.ohm-mk .fab svg {width:26px;height:26px;color:#fff}
.ohm-mk.ohm-mk .warn {display:flex;align-items:center;gap:9px;margin:12px 16px 0;padding:12px 14px;border:1px solid var(--hair);border-radius:14px;background:var(--rs);color:var(--rt);font-size:13.5px;font-weight:600;box-shadow:var(--sh)}
.ohm-mk.ohm-mk .warn svg {width:18px;height:18px;flex:0 0 auto}
.ohm-mk.ohm-mk .vd {padding:15px 16px 14px}
.ohm-mk.ohm-mk .vd .row {display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:4px solid var(--rule)}
.ohm-mk.ohm-mk .vd .v {font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.03em}
.ohm-mk.ohm-mk .vd .v small {display:block;font-size:12px;font-weight:400;color:var(--k2);margin-top:4px}
.ohm-mk.ohm-mk .vd .s {font-family:var(--sf);font-weight:800;font-size:76px;line-height:.76;letter-spacing:-.07em;color:var(--rt);font-variant-numeric:tabular-nums;text-align:right}
.ohm-mk.ohm-mk .vd .s.g {color:var(--gt)}
.ohm-mk.ohm-mk .vd .s.m {color:var(--k2)}
.ohm-mk.ohm-mk .vd .s small {display:block;font-family:var(--kr);font-size:10px;font-weight:600;color:var(--k2);margin-top:6px;letter-spacing:0}
.ohm-mk.ohm-mk .cuts div {display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--sep);font-size:14px}
.ohm-mk.ohm-mk .cuts div:last-child {border-bottom:0;padding-bottom:0}
.ohm-mk.ohm-mk .cuts div :is(b,strong) {flex:0 0 auto;font-family:var(--sf);font-weight:700;font-size:17px;color:var(--rt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .cuts div.k {color:var(--k2)}
.ohm-mk.ohm-mk .cuts div.k b {color:var(--gt);font-family:var(--kr);font-size:12.5px;font-weight:600}
.ohm-mk.ohm-mk .why {display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:var(--k)}
.ohm-mk.ohm-mk .claims {display:flex;flex-wrap:wrap;gap:6px;padding:11px 16px 0}
.ohm-mk.ohm-mk .claims span {padding:3px 9px;border:1px solid var(--sep);border-radius:6px;background:var(--card);font-size:11.5px;color:var(--k2)}
.ohm-mk.ohm-mk .folds {display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 0}
.ohm-mk.ohm-mk .folds a {padding:7px 13px;border:1.5px solid var(--sep);border-radius:999px;background:var(--card);font-size:13px;color:var(--k2)}
.ohm-mk.ohm-mk .folds a b {color:var(--k);font-weight:600}
.ohm-mk.ohm-mk .nu .h {display:flex;justify-content:space-between;align-items:baseline;margin:0 14px;padding:13px 0 8px;border-bottom:4px solid var(--rule)}
.ohm-mk.ohm-mk .nu .h :is(h2,h3) {margin:0;font-family:var(--sf);font-weight:700;font-size:18px;letter-spacing:-.02em}
.ohm-mk.ohm-mk .nu .h span {font-size:11.5px;color:var(--k2)}
.ohm-mk.ohm-mk .nu .r {display:grid;grid-template-columns:1fr 66px 46px;gap:10px;align-items:center;margin:0 14px;padding:8px 0;border-bottom:1px solid var(--sep);font-size:14.5px}
.ohm-mk.ohm-mk .nu .r:last-child {border-bottom:0;padding-bottom:12px}
.ohm-mk.ohm-mk .nu .r .bar {height:5px;border-radius:3px;background:var(--fill);overflow:hidden}
.ohm-mk.ohm-mk .nu .r .bar i {display:block;height:100%;border-radius:3px;background:var(--green)}
.ohm-mk.ohm-mk .nu .r.bad .bar i {background:var(--red)}
.ohm-mk.ohm-mk .nu .r b {font-family:var(--sf);font-weight:700;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .nu .r b small {font-weight:400;font-size:11px;color:var(--k2);margin-left:1px}
.ohm-mk.ohm-mk .nu .foot {margin:0 14px;padding:10px 0 12px;font-size:11.5px;color:var(--k2);display:flex;justify-content:space-between}
.ohm-mk.ohm-mk .ing {padding:13px 15px 15px}
.ohm-mk.ohm-mk .ing :is(h2,h3) {margin:0 0 6px;font-family:var(--sf);font-weight:700;font-size:16px;letter-spacing:-.02em}
.ohm-mk.ohm-mk .ing p {margin:0;font-size:14px;line-height:1.7}
.ohm-mk.ohm-mk .ing p u {text-decoration:none;padding:0 5px;border-radius:5px;background:var(--os);color:var(--ot);font-weight:600}
.ohm-mk.ohm-mk .ing p u.r {background:var(--rs);color:var(--rt)}
.ohm-mk.ohm-mk .adds {display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.ohm-mk.ohm-mk .adds a {padding:6px 10px;border:1px solid var(--sep);border-radius:8px;font-size:12px;color:var(--k2)}
.ohm-mk.ohm-mk .adds a b {color:var(--k);font-weight:600}
.ohm-mk.ohm-mk .adds a i {font-style:normal;color:var(--ot)}
.ohm-mk.ohm-mk .adds a i.ok {color:var(--k2)}
.ohm-mk.ohm-mk .catw {display:flex;height:100%}
.ohm-mk.ohm-mk .cats {flex:0 0 106px;overflow-y:auto;background:var(--fill);border-right:1px solid var(--hair)}
.ohm-mk.ohm-mk .cats a {display:block;padding:12px 12px;font-size:13px;color:var(--k2);line-height:1.3}
.ohm-mk.ohm-mk .cats a.on {background:var(--solid);color:var(--k);font-weight:700;box-shadow:inset 3px 0 0 var(--gt)}
.ohm-mk.ohm-mk .catm {flex:1;min-width:0;overflow-y:auto;padding-bottom:40px}
.ohm-mk.ohm-mk .cath {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 12px 6px}
.ohm-mk.ohm-mk .cath h3 {margin:0;display:flex;align-items:center;gap:7px;font-family:var(--sf);font-weight:700;font-size:17px;letter-spacing:-.02em}
.ohm-mk.ohm-mk .cath h3 svg {width:20px;height:20px}
.ohm-mk.ohm-mk .cath h3 small {font-family:var(--kr);font-weight:400;font-size:11.5px;color:var(--k2)}
.ohm-mk.ohm-mk .cath .all {flex:0 0 auto;padding:6px 12px;border-radius:999px;background:var(--k);color:var(--solid);font-size:11.5px;font-weight:700}
.ohm-mk.ohm-mk .catg {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 12px 0}
.ohm-mk.ohm-mk .catg a {display:flex;flex-direction:column;align-items:center;gap:5px}
.ohm-mk.ohm-mk .catg .art {display:grid;place-items:center;width:100%;aspect-ratio:4/3;border:1px solid var(--hair);border-radius:14px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh);font-family:var(--kr);font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ohm-mk.ohm-mk .catg .art i {font-style:normal;margin-left:1px;font-size:10px;font-weight:500;color:var(--k2)}
.ohm-mk.ohm-mk .catg small {font-size:11.5px;color:var(--k2);text-align:center;line-height:1.25}
.ohm-mk.ohm-mk .catchips {display:flex;flex-wrap:wrap;gap:6px;padding:0 12px}
.ohm-mk.ohm-mk .catchips span {padding:5px 10px;border:1.5px solid var(--sep);border-radius:999px;background:var(--card);font-size:11.5px}
.ohm-mk.ohm-mk .dim {position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.4)}
.ohm-mk.ohm-mk .sheet {position:absolute;left:0;right:0;bottom:0;z-index:9;max-height:80%;overflow-y:auto;border:1px solid var(--hair);border-bottom:0;border-radius:22px 22px 0 0;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 -10px 40px rgba(16,24,40,.16)}
.ohm-mk.ohm-mk .sheet .grab {width:36px;height:4px;margin:10px auto 6px;border-radius:2px;background:var(--sep)}
.ohm-mk.ohm-mk .sheet .hd {display:flex;align-items:center;justify-content:space-between;padding:4px 16px 12px;border-bottom:4px solid var(--rule)}
.ohm-mk.ohm-mk .sheet .hd b {font-family:var(--sf);font-size:18px;font-weight:700;letter-spacing:-.02em}
.ohm-mk.ohm-mk .sheet .hd span {font-size:13px;color:var(--k2)}
.ohm-mk.ohm-mk .sheet .sg {padding:14px 16px 0}
.ohm-mk.ohm-mk .sheet .sg h4 {margin:0 0 4px;font-family:var(--sf);font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--k2)}
.ohm-mk.ohm-mk .opt {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--sep);font-size:14.5px}
.ohm-mk.ohm-mk .opt:last-child {border-bottom:0}
.ohm-mk.ohm-mk .opt small {display:block;font-size:11.5px;color:var(--k2)}
.ohm-mk.ohm-mk .opt b.v {font-family:var(--sf);font-weight:700;font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .rad {flex:0 0 auto;width:20px;height:20px;border:2px solid var(--k3);border-radius:10px}
.ohm-mk.ohm-mk .rad.on {border-color:var(--gt);border-width:6px}
.ohm-mk.ohm-mk .sw {flex:0 0 auto;width:40px;height:23px;border-radius:12px;background:var(--fill);position:relative}
.ohm-mk.ohm-mk .sw::after {content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ohm-mk.ohm-mk .sw.on {background:var(--gt)}
.ohm-mk.ohm-mk .sw.on::after {left:auto;right:2px}
.ohm-mk.ohm-mk .sfoot {display:flex;gap:10px;padding:16px}
.ohm-mk.ohm-mk .sfoot .g {flex:0 0 96px;display:grid;place-items:center;height:48px;border:1px solid var(--hair);border-radius:14px;background:var(--card);font-size:14px;font-weight:600}
.ohm-mk.ohm-mk .sfoot .p {flex:1;display:grid;place-items:center;height:48px;border-radius:14px;background:var(--gt);color:#fff;font-size:15px;font-weight:700;box-shadow:0 4px 14px rgba(36,138,61,.32)}
.ohm-mk.ohm-mk .modal {position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:9;max-height:76%;overflow-y:auto;padding:18px 16px 16px;border:1px solid var(--hair);border-radius:20px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 20px 60px rgba(16,24,40,.24)}
.ohm-mk.ohm-mk .modal .x {position:absolute;right:12px;top:12px;color:var(--k3)}
.ohm-mk.ohm-mk .modal h3 {margin:0;font-family:var(--sf);font-size:19px;font-weight:700;letter-spacing:-.02em}
.ohm-mk.ohm-mk .modal .sub {margin:3px 0 0;font-size:12px;color:var(--k2)}
.ohm-mk.ohm-mk .prof {display:flex;align-items:center;gap:12px;padding:14px 16px}
.ohm-mk.ohm-mk .prof .av {flex:0 0 auto;width:52px;height:52px;border:1px solid var(--hair);border-radius:26px;display:grid;place-items:center;background:var(--card);box-shadow:var(--sh);font-family:var(--sf);font-size:19px;font-weight:800}
.ohm-mk.ohm-mk .prof .nm {flex:1;min-width:0}
.ohm-mk.ohm-mk .prof .nm b {font-size:17px;font-weight:700;letter-spacing:-.02em}
.ohm-mk.ohm-mk .prof .nm b i {font-style:normal;margin-left:6px;font-size:13px;font-weight:400;color:var(--k2)}
.ohm-mk.ohm-mk .prof .nm .st {display:flex;gap:12px;margin-top:3px;font-size:12px;color:var(--k2)}
.ohm-mk.ohm-mk .prof .nm .st b {font-family:var(--sf);font-size:12px;font-weight:700;color:var(--k)}
.ohm-mk.ohm-mk .prof .nm .st a {color:var(--k);font-weight:700}
.ohm-mk.ohm-mk .prof .btn {flex:0 0 auto;padding:8px 14px;border:1px solid var(--hair);border-radius:999px;background:var(--card);font-size:13px;font-weight:600;box-shadow:var(--sh)}
.ohm-mk.ohm-mk .today {margin:0 16px;border:1px solid var(--hair);border-radius:16px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh);overflow:hidden}
.ohm-mk.ohm-mk .today .h {display:flex;justify-content:space-between;padding:12px 14px 10px;font-size:12px;color:var(--k2);border-bottom:4px solid var(--rule)}
.ohm-mk.ohm-mk .meals {display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--sep)}
.ohm-mk.ohm-mk .meals div {padding:10px 4px;text-align:center;border-right:1px solid var(--sep)}
.ohm-mk.ohm-mk .meals div:last-child {border-right:0}
.ohm-mk.ohm-mk .meals div span {display:block;font-size:11px;color:var(--k2)}
.ohm-mk.ohm-mk .meals div b {display:block;margin-top:2px;font-family:var(--sf);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .meals div.none b {color:var(--k3);font-weight:400}
.ohm-mk.ohm-mk .sum {display:grid;grid-template-columns:repeat(4,1fr);padding:10px 0}
.ohm-mk.ohm-mk .sum div {text-align:center}
.ohm-mk.ohm-mk .sum div span {display:block;font-size:11px;color:var(--k2)}
.ohm-mk.ohm-mk .sum div b {display:block;font-family:var(--sf);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .sum div.over b {color:var(--rt)}
.ohm-mk.ohm-mk .today .open {display:block;padding:11px;border-top:1px solid var(--sep);text-align:center;font-size:13.5px;font-weight:600;color:var(--k)}
.ohm-mk.ohm-mk .cnt4 {display:grid;grid-template-columns:repeat(4,1fr);margin:12px 16px 0;border:1px solid var(--hair);border-radius:16px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh);overflow:hidden}
.ohm-mk.ohm-mk .cnt4 a {padding:12px 2px;text-align:center;border-right:1px solid var(--sep)}
.ohm-mk.ohm-mk .cnt4 a:last-child {border-right:0}
.ohm-mk.ohm-mk .cnt4 a b {display:block;font-family:var(--sf);font-size:20px;font-weight:800;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .cnt4 a small {font-size:11.5px;color:var(--k2)}
.ohm-mk.ohm-mk .goal {padding:12px 14px}
.ohm-mk.ohm-mk .goal .r {margin-bottom:11px}
.ohm-mk.ohm-mk .goal .r:last-child {margin-bottom:0}
.ohm-mk.ohm-mk .goal .r span {display:flex;justify-content:space-between;font-size:13px}
.ohm-mk.ohm-mk .goal .r span i {font-style:normal;font-family:var(--sf);color:var(--k2);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .goal .track {height:6px;margin-top:5px;border-radius:3px;background:var(--fill);overflow:hidden}
.ohm-mk.ohm-mk .goal .track i {display:block;height:100%;border-radius:3px;background:var(--green)}
.ohm-mk.ohm-mk .goal .track i.over {background:var(--red)}
.ohm-mk.ohm-mk .goal .track i.na {width:100%;background:repeating-linear-gradient(90deg,var(--sep) 0 6px,transparent 6px 10px)}
.ohm-mk.ohm-mk .empty {display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 24px;text-align:center}
.ohm-mk.ohm-mk .empty .art {display:grid;place-items:center;width:62px;height:62px;border:1px solid var(--hair);border-radius:31px;background:var(--card);color:var(--k3);box-shadow:var(--sh)}
.ohm-mk.ohm-mk .empty .art svg {width:28px;height:28px}
.ohm-mk.ohm-mk .empty b {font-size:16px}
.ohm-mk.ohm-mk .empty p {margin:0;font-size:13px;color:var(--k2)}
.ohm-mk.ohm-mk .empty .go {margin-top:6px;padding:11px 20px;border-radius:14px;background:var(--gt);color:#fff;font-size:14px;font-weight:700;box-shadow:0 4px 14px rgba(36,138,61,.32)}
.ohm-mk.ohm-mk .art {padding:20px 16px 0}
.ohm-mk.ohm-mk .art .k {font-family:var(--sf);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--gt)}
.ohm-mk.ohm-mk .art h1 {margin:9px 0 9px;font-size:26px;font-weight:700;line-height:1.28;letter-spacing:-.035em;text-wrap:balance}
.ohm-mk.ohm-mk .art .by {font-size:12px;color:var(--k2)}
.ohm-mk.ohm-mk .art .lead {margin:14px 0 0;padding:12px 14px;border-left:4px solid var(--rule);background:var(--fill);font-size:14px;line-height:1.6}
.ohm-mk.ohm-mk .art p.b {margin:14px 0 0;font-size:15px;line-height:1.75}
.ohm-mk.ohm-mk .art .src {margin:14px 0 0;font-size:11.5px;color:var(--k2)}
.ohm-mk.ohm-mk .cmt {margin:6px 16px 0}
.ohm-mk.ohm-mk .cmt .one {display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--sep)}
.ohm-mk.ohm-mk .cmt .av {flex:0 0 auto;width:32px;height:32px;border:1px solid var(--sep);border-radius:16px}
.ohm-mk.ohm-mk .cmt .bd {flex:1;min-width:0}
.ohm-mk.ohm-mk .cmt .who {font-size:11.5px;color:var(--k2)}
.ohm-mk.ohm-mk .cmt .tx {margin-top:2px;font-size:13.5px;line-height:1.55}
.ohm-mk.ohm-mk .cmt .ac {margin-top:4px;font-size:11.5px;color:var(--k2)}
.ohm-mk.ohm-mk .cmt .wr {display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 13px;border:1.5px solid var(--sep);border-radius:999px;font-size:13px;color:var(--k2)}
.ohm-mk.ohm-mk .cmt .wr svg {width:16px;height:16px}
.ohm-mk.ohm-mk .cmpw {margin:12px 0 0;overflow-x:auto}
.ohm-mk.ohm-mk table.cmp2 {min-width:660px;border-collapse:collapse;font-size:13px;font-family:var(--kr)}
.ohm-mk.ohm-mk table.cmp2 th, .ohm-mk.ohm-mk table.cmp2 td {padding:9px 12px;border-bottom:1px solid var(--sep);text-align:left;white-space:nowrap}
.ohm-mk.ohm-mk table.cmp2 thead th {font-size:11.5px;font-weight:500;color:var(--k2);vertical-align:bottom;border-bottom:4px solid var(--rule)}
.ohm-mk.ohm-mk table.cmp2 thead th b {display:block;max-width:130px;font-size:12.5px;font-weight:700;color:var(--k);white-space:normal;line-height:1.3}
.ohm-mk.ohm-mk table.cmp2 thead th .sv {display:inline-block;margin-top:5px;font-family:var(--sf);font-size:15px;font-weight:800;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk table.cmp2 thead th .sv.o {color:var(--ot)}
.ohm-mk.ohm-mk table.cmp2 thead th .cx {display:inline-grid;place-items:center;width:16px;height:16px;margin-left:5px;border-radius:8px;background:var(--fill);color:var(--k2);font-size:10px;vertical-align:2px}
.ohm-mk.ohm-mk table.cmp2 tbody th {position:sticky;left:0;background:var(--solid);font-weight:500;color:var(--k2)}
.ohm-mk.ohm-mk table.cmp2 td {text-align:right;font-family:var(--sf);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk table.cmp2 td.w {color:var(--gt);font-weight:700}
.ohm-mk.ohm-mk table.cmp2 td.tie {color:var(--k2)}
.ohm-mk.ohm-mk table.cmp2 td.na {color:var(--k3);font-size:11.5px;font-family:var(--kr)}
.ohm-mk.ohm-mk table.cmp2 tr.gap th, .ohm-mk.ohm-mk table.cmp2 tr.gap td {background:var(--fill)}
.ohm-mk.ohm-mk .ends {display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px 0}
.ohm-mk.ohm-mk .ends div {padding:13px 15px;border:1px solid var(--hair);border-radius:16px;background:var(--card);box-shadow:var(--sh)}
.ohm-mk.ohm-mk .ends span {font-family:var(--sf);font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--k2)}
.ohm-mk.ohm-mk .ends b {display:block;margin-top:3px;font-family:var(--sf);font-size:26px;font-weight:800;letter-spacing:-.05em;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .ends div.dn b {color:var(--rt)}
.ohm-mk.ohm-mk .ends small {display:block;margin-top:2px;font-size:12px;line-height:1.3;color:var(--k2)}
.ohm-mk.ohm-mk .pickbar {position:absolute;left:16px;right:16px;bottom:80px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:12px;background:var(--k);color:var(--g);font-size:13px}
.ohm-mk.ohm-mk .pickbar b {padding:7px 12px;border-radius:9px;background:var(--gt);color:#fff;font-size:13px}
.ohm-mk.ohm-mk .map {position:relative;flex:1;background:linear-gradient(140deg,#e4e9e6,#f1f3f2)}
.ohm-mk.ohm-mk .map .road {position:absolute;background:var(--card);opacity:.9}
.ohm-mk.ohm-mk .map .pin {position:absolute;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--hair);border-radius:18px;background:var(--solid);box-shadow:0 3px 10px rgba(16,24,40,.18);font-family:var(--sf);font-size:13px;font-weight:800;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .map .pin.o {color:var(--ot)}
.ohm-mk.ohm-mk .map .pin.r {color:var(--rt)}
.ohm-mk.ohm-mk .map .sheet2 {position:absolute;left:0;right:0;bottom:0;border:1px solid var(--hair);border-bottom:0;border-radius:22px 22px 0 0;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 -10px 40px rgba(16,24,40,.18);padding:0 0 16px}
.ohm-mk.ohm-mk .cam {position:relative;flex:1;display:flex;flex-direction:column;background:#0b0d0f;color:#fff}
.ohm-mk.ohm-mk .cam .top {display:flex;align-items:center;justify-content:space-between;padding:14px}
.ohm-mk.ohm-mk .cam .top .ib {width:36px;height:36px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.14);color:#fff}
.ohm-mk.ohm-mk .cam .top .ib svg {width:20px;height:20px;color:#fff}
.ohm-mk.ohm-mk .cam .stage {position:relative;flex:1;display:grid;place-items:center}
.ohm-mk.ohm-mk .cam .fr {position:relative;width:284px;height:200px}
.ohm-mk.ohm-mk .cam .fr i {position:absolute;width:28px;height:28px;border:3px solid #fff}
.ohm-mk.ohm-mk .cam .fr i:nth-child(1) {left:0;top:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.ohm-mk.ohm-mk .cam .fr i:nth-child(2) {right:0;top:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.ohm-mk.ohm-mk .cam .fr i:nth-child(3) {left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.ohm-mk.ohm-mk .cam .fr i:nth-child(4) {right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
.ohm-mk.ohm-mk .cam .say {position:absolute;left:-40px;right:-40px;bottom:-62px;text-align:center}
.ohm-mk.ohm-mk .cam .say b {display:block;font-size:18px;font-weight:700;letter-spacing:-.02em}
.ohm-mk.ohm-mk .cam .say span {display:block;margin-top:5px;font-size:13px;opacity:.72}
.ohm-mk.ohm-mk .cam .bot {padding:0 16px 22px}
.ohm-mk.ohm-mk .cam .modes {display:flex;justify-content:center;gap:8px;margin-bottom:20px}
.ohm-mk.ohm-mk .cam .modes span {padding:7px 16px;border-radius:999px;font-size:13px;color:rgba(255,255,255,.65)}
.ohm-mk.ohm-mk .cam .modes span.on {background:rgba(255,255,255,.18);color:#fff;font-weight:700}
.ohm-mk.ohm-mk .cam .tray {display:flex;align-items:center;justify-content:space-between}
.ohm-mk.ohm-mk .cam .tray .side {display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;font-size:11px;color:rgba(255,255,255,.78)}
.ohm-mk.ohm-mk .cam .tray .side .bx {width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center}
.ohm-mk.ohm-mk .cam .tray .side .bx svg {width:22px;height:22px;color:#fff}
.ohm-mk.ohm-mk .cam .sh {display:grid;place-items:center;width:72px;height:72px;border:4px solid #fff;border-radius:36px}
.ohm-mk.ohm-mk .cam .sh i {width:58px;height:58px;border-radius:29px;background:#fff}
.ohm-mk.ohm-mk .cam .rec {display:flex;gap:8px;padding:0 16px 16px}
.ohm-mk.ohm-mk .cam .rec .r {flex:1;display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.12);font-size:11.5px}
.ohm-mk.ohm-mk .cam .rec .r b {font-family:var(--sf);padding:1px 7px;border-radius:5px;background:#fff;color:#0b0d0f;font-weight:800}
.ohm-mk.ohm-mk .db1 {display:flex;align-items:center;gap:24px;height:60px;padding:0 21px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.ohm-mk.ohm-mk .db1 .mark {display:grid;place-items:center}
.ohm-mk.ohm-mk .db1 .mark svg.lg {width:44px;height:28px;max-width:none;max-height:none}
.ohm-mk.ohm-mk .db1 .mark i {font-style:normal;color:var(--gt)}
.ohm-mk.ohm-mk .db1 .fld {flex:1;max-width:560px;height:42px;border:1px solid var(--hair);border-radius:999px;background:var(--field);font-size:14px}
.ohm-mk.ohm-mk .db1 .right {margin-left:auto;display:flex;align-items:center;gap:22px;font-size:11px;color:var(--k2)}
.ohm-mk.ohm-mk .db1 .right a {display:flex;flex-direction:column;align-items:center;gap:3px}
.ohm-mk.ohm-mk .db1 .right svg {width:21px;height:21px;color:var(--k)}
.ohm-mk.ohm-mk .db2 {display:flex;align-items:center;gap:22px;height:48px;padding:0 21px;border-bottom:1px solid var(--hair);background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);font-size:14px}
.ohm-mk.ohm-mk .db2 .cat {display:flex;align-items:center;gap:8px;padding-right:22px;border-right:1px solid var(--sep);font-weight:700}
.ohm-mk.ohm-mk .db2 .cat svg {width:18px;height:18px}
.ohm-mk.ohm-mk .db2 nav {display:flex;align-items:center;gap:20px;color:var(--k2)}
.ohm-mk.ohm-mk .db2 nav .vr {flex:0 0 auto;width:1px;height:16px;background:var(--sep)}
.ohm-mk.ohm-mk .db2 nav a.on {color:var(--gt);font-weight:700}
.ohm-mk.ohm-mk .db2 .ed {margin-left:auto;font-size:12px;color:var(--k2)}
.ohm-mk.ohm-mk .dsc {flex:1;min-height:0;overflow-y:auto}
.ohm-mk.ohm-mk .dw {width:1136px;margin:0 auto}
.ohm-mk.ohm-mk .dg4 {display:grid;grid-template-columns:repeat(4,269px);gap:20px}
.ohm-mk.ohm-mk .dg3 {display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ohm-mk.ohm-mk .dg4f {display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ohm-mk.ohm-mk .tabl .dg4f {grid-template-columns:repeat(3,1fr)}
.ohm-mk.ohm-mk .stat {display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:20px 22px;border:1px solid var(--hair);border-radius:18px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh)}
.ohm-mk.ohm-mk .stat b {font-family:var(--sf);font-size:40px;font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .stat b.o {color:var(--ot)}
.ohm-mk.ohm-mk .stat b.r {color:var(--rt)}
.ohm-mk.ohm-mk .stat span {font-size:14.5px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.ohm-mk.ohm-mk .stat small {display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--k2)}
.ohm-mk.ohm-mk .tabl .dg3 {grid-template-columns:repeat(3,1fr);gap:14px}
.ohm-mk.ohm-mk .tabl .stat {padding:16px}
.ohm-mk.ohm-mk .tabl .stat b {font-size:32px}
.ohm-mk.ohm-mk .dsec {display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 14px}
.ohm-mk.ohm-mk .dsec h3 {margin:0;font-family:var(--sf);font-size:20px;font-weight:700;letter-spacing:-.025em}
.ohm-mk.ohm-mk .dsec a {font-size:13px;color:var(--k2)}
.ohm-mk.ohm-mk .dhero {display:grid;grid-template-columns:846px 270px;gap:20px;margin-top:22px}
.ohm-mk.ohm-mk .dhero .side div {min-height:115px}
.ohm-mk.ohm-mk .dhero .big {display:flex;flex-direction:column;justify-content:center;height:250px;padding:26px;border:1px solid var(--hair);border-radius:20px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh)}
.ohm-mk.ohm-mk .dhero .big .t {margin-top:8px;font-size:30px;font-weight:750;line-height:1.22;letter-spacing:-.03em;max-width:24ch}
.ohm-mk.ohm-mk .dhero .big .n {display:flex;align-items:baseline;gap:12px;margin-top:14px;padding-top:14px;border-top:6px solid var(--rule)}
.ohm-mk.ohm-mk .dhero .big .n b {font-family:var(--sf);font-size:56px;font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .dhero .big .n span {font-size:13px;color:var(--k2);line-height:1.45}
.ohm-mk.ohm-mk .dhero .side {display:flex;flex-direction:column;gap:20px}
.ohm-mk.ohm-mk .dhero .side div {flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px;border:1px solid var(--hair);border-radius:18px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh)}
.ohm-mk.ohm-mk .dhero .side div b {font-family:var(--sf);font-size:28px;font-weight:800;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .dhero .side div.r b {color:var(--rt)}
.ohm-mk.ohm-mk .dhero .side div span {margin-top:4px;font-size:12.5px;color:var(--k2);line-height:1.35}
.ohm-mk.ohm-mk .dlay {display:grid;grid-template-columns:240px 1fr;gap:40px;margin-top:22px}
.ohm-mk.ohm-mk .dfl h4 {margin:0 0 6px;font-family:var(--sf);font-size:13px;font-weight:700}
.ohm-mk.ohm-mk .dfl .bx {margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--sep)}
.ohm-mk.ohm-mk .dfl label {display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--k2)}
.ohm-mk.ohm-mk .dfl label i {flex:0 0 auto;width:15px;height:15px;border:1.5px solid var(--k3);border-radius:4px}
.ohm-mk.ohm-mk .dfl label i.on {border-color:var(--gt);background:var(--gt)}
.ohm-mk.ohm-mk .dfl label i.rd {border-radius:8px}
.ohm-mk.ohm-mk .dfl label em {margin-left:auto;font-style:normal;font-family:var(--sf);font-size:11.5px;color:var(--k3)}
.ohm-mk.ohm-mk .ddt {display:grid;grid-template-columns:1fr 380px;gap:40px;margin-top:20px;align-items:start}
.ohm-mk.ohm-mk .dside {position:sticky;top:0;border:1px solid var(--hair);border-radius:18px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh);overflow:hidden}
.ohm-mk.ohm-mk .dside .acts {display:flex;gap:8px;padding:14px}
.ohm-mk.ohm-mk .dside .acts .b {flex:1;display:grid;place-items:center;height:46px;border:1px solid var(--hair);border-radius:14px;font-size:13px;font-weight:600}
.ohm-mk.ohm-mk .dside .acts .b.p {flex:2;border-color:transparent;background:var(--gt);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(36,138,61,.32)}
.ohm-mk.ohm-mk .card.flat {border:0;background:none;box-shadow:none;border-radius:0;margin-left:0;margin-right:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.ohm-mk.ohm-mk .card.flat + .card.flat {margin-top:0;border-top:1px solid var(--sep)}
.ohm-mk.ohm-mk .card.flat .rows a {padding-left:16px;padding-right:16px}
.ohm-mk.ohm-mk .card.flat .vd, .ohm-mk.ohm-mk .card.flat .ing {padding-left:16px;padding-right:16px}
.ohm-mk.ohm-mk .card.flat .nu .h, .ohm-mk.ohm-mk .card.flat .nu .r, .ohm-mk.ohm-mk .card.flat .nu .foot {margin-left:16px;margin-right:16px}
.ohm-mk.ohm-mk .card.flat .hero {padding-left:16px;padding-right:16px}
.ohm-mk.ohm-mk .fd {display:flex;flex-direction:column;gap:10px;padding:12px 16px 0}
.ohm-mk.ohm-mk .fp {display:block;padding:13px 15px 11px;border:1px solid var(--hair);border-radius:16px;background:var(--card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh)}
.ohm-mk.ohm-mk .fp .who {display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600}
.ohm-mk.ohm-mk .fp .who .av {flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:13px;background:var(--fill);font-style:normal;font-size:11px;font-weight:700;color:var(--k2)}
.ohm-mk.ohm-mk .fp .who em {font-style:normal;margin-left:auto;font-weight:400;font-size:11.5px;color:var(--k2)}
.ohm-mk.ohm-mk .fp .tx {display:block;margin-top:8px;font-size:14.5px;line-height:1.5;letter-spacing:-.01em}
.ohm-mk.ohm-mk .fp .att {display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 11px;border-radius:12px;background:var(--fill)}
.ohm-mk.ohm-mk .fp .att b {flex:0 0 auto;font-family:var(--sf);font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--gt);font-variant-numeric:tabular-nums}
.ohm-mk.ohm-mk .fp .att b.r {color:var(--rt)}
.ohm-mk.ohm-mk .fp .att > span {flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.3}
.ohm-mk.ohm-mk .fp .att small {display:block;font-size:11px;font-weight:400;color:var(--k2);margin-top:1px}
.ohm-mk.ohm-mk .fp .att i {flex:0 0 auto;font-style:normal;color:var(--k3);font-family:var(--sf)}
.ohm-mk.ohm-mk .fp .ft {display:flex;gap:14px;margin-top:9px;font-size:12px;color:var(--k2)}
.ohm-mk.ohm-mk .tabl {width:834px;height:900px;overflow:hidden;border:1px solid var(--pline);border-radius:18px;background:linear-gradient(168deg,var(--g2) 0%,var(--g) 46%,var(--g2) 100%);color:var(--k);font-family:var(--kr);box-shadow:0 12px 40px rgba(0,0,0,.10);display:flex;flex-direction:column}
.ohm-mk.ohm-mk .tabl .db1 {height:56px;padding:0 20px;gap:16px}
.ohm-mk.ohm-mk .tabl .db1 .fld {max-width:none}
.ohm-mk.ohm-mk .tabl .db1 .right {gap:16px}
.ohm-mk.ohm-mk .tabl .db2 {height:44px;padding:0 20px;gap:18px;overflow-x:auto}
.ohm-mk.ohm-mk .tabl .db2 nav {gap:18px}
.ohm-mk.ohm-mk .tw {width:786px;margin:0 auto;padding:0 0 40px}
.ohm-mk.ohm-mk .tg3 {display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ohm-mk.ohm-mk .tabl .dw {width:786px}
.ohm-mk.ohm-mk .tabl .dsc {overflow-x:hidden}
.ohm-mk.ohm-mk .tabl .dg4 {grid-template-columns:repeat(3,1fr);gap:16px}
.ohm-mk.ohm-mk .tabl .dhero {grid-template-columns:1fr 236px;gap:16px;margin-top:20px}
.ohm-mk.ohm-mk .tabl .dhero .big {height:auto;min-height:186px;padding:20px}
.ohm-mk.ohm-mk .tabl .dhero .big .t {font-size:23px;max-width:none}
.ohm-mk.ohm-mk .tabl .dhero .big .n b {font-size:44px}
.ohm-mk.ohm-mk .tabl .dhero .side div {min-height:0;padding:14px}
.ohm-mk.ohm-mk .tabl .dsec {margin:26px 0 12px}
.ohm-mk.ohm-mk .tabl .dlay {grid-template-columns:1fr;gap:0;margin-top:18px}
.ohm-mk.ohm-mk .tabl .dlay .dfl {display:none}
.ohm-mk.ohm-mk .tabl .ddt {grid-template-columns:1fr;gap:22px;margin-top:18px}
.ohm-mk.ohm-mk .tabl .ddt .dside {position:static}
.ohm-mk.ohm-mk .tabl .ddt > div:first-child {display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-content:start}
.ohm-mk.ohm-mk .tabl .ddt > div:first-child > * {grid-column:1/-1}
.ohm-mk.ohm-mk .tabl .ddt > div:first-child > .card:has(.nu), .ohm-mk.ohm-mk .tabl .ddt > div:first-child > .card:has(.ing) {grid-column:auto;margin-top:16px;align-self:start}
.ohm-mk.ohm-mk .tabl .ddt > div:first-child > .card.nu {grid-column:auto;margin-top:16px;align-self:start}
.ohm-mk.ohm-mk[data-theme="dark"], [data-theme="dark"] .ohm-mk.ohm-mk {--g:#0b0d10;--g2:#15181d;--card:rgba(32,36,42,.68);--solid:#1c1f24;--k:#f2f2f7;--k2:#9aa0a8;--k3:#6b7078;--sep:rgba(255,255,255,.08);--hair:rgba(255,255,255,.12);--rule:rgba(242,242,247,.80);--fill:rgba(255,255,255,.08);--field:rgba(255,255,255,.09);--sh:0 1px 2px rgba(0,0,0,.30),0 10px 28px rgba(0,0,0,.38);--blur:saturate(180%) blur(20px);
    --green:#3fbf6b;--gt:#5fd48c;--gs:#122c1c;--orange:#e5a33c;--ot:#e0a34a;--os:#33230a;--red:#e8564b;--rt:#ff8478;--rs:#331616}
[data-theme="dark"] .ohm-mk.ohm-mk .map {background:linear-gradient(140deg,#14181a,#0d1012)}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .ohm-mk.ohm-mk {--g:#0b0d10;--g2:#15181d;--card:rgba(32,36,42,.68);--solid:#1c1f24;--k:#f2f2f7;--k2:#9aa0a8;--k3:#6b7078;--sep:rgba(255,255,255,.08);--hair:rgba(255,255,255,.12);--rule:rgba(242,242,247,.80);--fill:rgba(255,255,255,.08);--field:rgba(255,255,255,.09);--sh:0 1px 2px rgba(0,0,0,.30),0 10px 28px rgba(0,0,0,.38);--blur:saturate(180%) blur(20px);
    --green:#3fbf6b;--gt:#5fd48c;--gs:#122c1c;--orange:#e5a33c;--ot:#e0a34a;--os:#33230a;--red:#e8564b;--rt:#ff8478;--rs:#331616}
html:not([data-theme="light"]) .ohm-mk.ohm-mk .map {background:linear-gradient(140deg,#14181a,#0d1012)}
}

/* ── site-side additions. the mockup values above are untouched. ─────────────
   1) the mockup's base came from its own body/.phone rules, which the export
      drops with the rest of the document frame. put them back on the holder,
      or the site's body rules fill the gap (line-height, letter-spacing, colour).
   2) neutralise the site's element-level rules that reach inside the holder.
      kept at (0,2,1) so the ported component rules (0,3,x) always win.
   3) the global :where(main a[href]) sets display:inline-flex on anything that
      did not declare display.
   4) the mockup used inline style attributes; CSP (style-src 'self') forbids them.
   5) the mockup lived in a 390px frame; widen the grids on bigger screens. */

/* 1) base */
.ohm-mk.ohm-mk {
  font-family: var(--kr); font-size: 16px; line-height: 1.55; letter-spacing: normal;
  color: var(--k); -webkit-font-smoothing: antialiased;
}

/* 2) neutralise */
.ohm-mk :is(section, div, nav, ul, ol, li, p, h1, h2, h3, h4, figure, blockquote) { margin: 0; padding: 0; }
.ohm-mk.ohm-mk :is(h1, h2, h3, h4) { font: inherit; letter-spacing: inherit; color: inherit; }
.ohm-mk :is(a, span, b, i, small, strong, em) { text-decoration: none; }

/* 3) display */
.ohm-mk.ohm-mk a { display: block; min-width: 0; min-height: 0; }
.ohm-mk.ohm-mk .sec a { display: inline-block; }
.ohm-mk.ohm-mk .pc, .ohm-mk.ohm-mk .hero { display: block; }
.ohm-mk.ohm-mk .hero .lbl, .ohm-mk.ohm-mk .hero .t { display: block; }
.ohm-mk.ohm-mk .hero .n { display: flex; }
.ohm-mk.ohm-mk .pc .s { display: flex; }

/* 4) values the mockup carried in style attributes */
.ohm-mk.ohm-mk .card.tight { margin-top: 0; }
.ohm-mk.ohm-mk .g2.tight { padding-top: 0; }
.ohm-mk.ohm-mk .rows.nw88 { --nw: 88px; }
.ohm-mk.ohm-mk .rows.nw76 { --nw: 76px; }
.ohm-mk.ohm-mk .rows.nw68 { --nw: 68px; }
.ohm-mk.ohm-mk .rows.nw52 { --nw: 52px; }
.ohm-mk.ohm-mk .rows.nw40 { --nw: 40px; }
.ohm-mk.ohm-mk .rows.nw0 { --nw: 0px; }

/* .fld 는 <button> 이라 전역 탭 최소 높이 규칙(public/style.css: button{min-height:max(var(--tap-min),…)!important})이
   목업 높이(36/42)를 44로 밀어 올린다 — 그 규칙을 지우거나 !important 로 다시 덮지 않고, 그 규칙이 읽는
   변수 자체를 이 안에서 목업 값으로 다시 정의한다(2026-09-09 실측: compare.mjs 로 44px 확인). */
.ohm-mk.ohm-mk .fld { --tap-min: 36px; }
.ohm-mk.ohm-mk .db1 .fld { --tap-min: 42px; }
/* .ib 도 icon 모드 검색·공유처럼 <button> 일 때가 있다 — 같은 전역 규칙이 34px 를 44px 로 밀어올린다.
   시각은 34px 그대로 두고, 누르는 자리 44px 는 위 .ib::after(투명 여백)가 대신 지킨다. */
.ohm-mk.ohm-mk .bar .ib { --tap-min: 34px; }

/* recipe thumbs — square, and the rule under them matches the card's */
.ohm-mk.ohm-mk .rcp .pc img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-bottom: 3px solid var(--rule); }
/* 2026-09-09: 24 목록 대조 — 사진 없는 .pc(레시피 목록 카드)는 기본 6px 그대로, 사진이 있을 때(홈 레시피 띠)만 10px. */
.ohm-mk.ohm-mk .rcp .pc:has(img) .nm { padding-top: 10px; }

/* no underline on hover; a hair of lift instead */
.ohm-mk.ohm-mk .pc, .ohm-mk.ohm-mk .card { transition: transform 120ms cubic-bezier(.2,0,0,1); }
@media (hover: hover) {
  .ohm-mk.ohm-mk .pc:hover { transform: translateY(-1px); }
  .ohm-mk.ohm-mk .card > .rows > a:hover { background: var(--fill); }
}
.ohm-mk.ohm-mk .pc:active, .ohm-mk.ohm-mk .quick a:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .ohm-mk.ohm-mk .pc, .ohm-mk.ohm-mk .card { transition: none; } }

/* 5) wider screens */
@media (min-width: 640px) {
  .ohm-mk.ohm-mk .g2 { grid-template-columns: repeat(3, 1fr); }
  .ohm-mk.ohm-mk .hero .n b { font-size: 72px; }
  .ohm-mk.ohm-mk .hero .t { font-size: 26px; }
}
@media (min-width: 1024px) {
  .ohm-mk.ohm-mk .g2 { grid-template-columns: repeat(4, 1fr); }
}

/* home page frame: the mockup carries its own gutters */
body:has(.ohm-mk) > main.wrap { width: 100%; max-width: 1178px; padding: 0 0 56px; }
/* 2026-09-09 형 지적("식품도 너비가 이상해"): /foods 만 1280 이고 나머지는 1178 이었다.
   page-system.css 의 body[data-page-role] > main.wrap 이 위 규칙과 특정도가 같아(0,2,2)
   실린 차례로 이겼다 — --page-width 기본값 1280 이 그대로 나온 것. 덧칠 대신 목업 틀 쪽에
   [data-page-role] 을 더해 특정도로 이기게 한다. */
body[data-page-role]:has(.ohm-mk) > main.wrap { width: 100%; max-width: 1178px; padding: 0 0 56px; }  /* 머리(.appbar-main)와 같은 상자 — public/desktop-chrome.css. 갈래 frame: 목업 틀 안쪽 1178(=.desk 1180 - 테두리 1px 양쪽) */
.home-shell { margin-top: 0 !important; padding: 0; }

/* the mockup's FAB is the brand green, not the forest tone the old skin left behind */
body:has(.ohm-mk) .fab, body:has(.ohm-mk) [class*="fab"] { background: #248a3d; color: #fff; }

/* ── ORDER-458 skin-v3 마무리: pageHeader() (html.js) 는 이제 화면 종류와 무관하게
   .appbar-main 안에 두 형제를 늘 그린다 — .hdr-m(<1024, 목업 .bar 그대로: 홈도 다른 화면도
   같은 마크업)과 .hdr-d(≥1024, 화면마다 같은 목업 두 줄 .db1/.db2). 둘 중 하나만 보이는
   단순 display 전환이고, ohm-mk 가 래퍼 한 겹 위에 있어 .ohm-mk.ohm-mk .bar/.db1/.db2 와
   특이도 다툼이 없다. */
/* 2026-09-09 목업 이식 배치 6: 부품 규칙 "머리 ≥768 은 두 줄" — 태블릿부터 db1/db2, 1024 이 아니다
   (목업 T1~T3 실측). public/style.css 의 --appbar-h, public/desktop-chrome.css 의 .appbar-main 너비도
   같이 768 로 내렸다 — 셋이 어긋나면 108px 내용이 56px 상자에 눌린다. */
.hdr-d { display: none; }
.hdr-m { flex: 1 1 auto; min-width: 0; }
@media (min-width: 768px) {
  .hdr-m { display: none; }
  .hdr-d { display: block; width: 100%; }
}
/* 목업 .bar/.db1/.db2 는 제 살갗(카드·블러·테두리)을 이미 갖고 있다 — .top 의 것을 얹으면
   테두리가 겹친다. 화면 종류와 상관없이 전부 목업 머리라 무조건 벗긴다. */
.top.appbar { background: none; backdrop-filter: none; border-bottom: 0; }
.top.appbar .appbar-main { padding-inline: 0; gap: 0; }

/* ── 6) list screens. the ported chips/rows sit inside the site's own
   .cat-chips / .list-controls / .chip-btn boxes, which still set the parts the
   mockup rule does not declare (min-height, display, colour, margins). */
.ohm-mk.ohm-mk .filt { overflow-x: auto; scrollbar-width: none; align-items: center; margin: 0; border: 0; }
.ohm-mk.ohm-mk .filt::-webkit-scrollbar { display: none; }
.ohm-mk.ohm-mk .filt :is(a, button, span) { min-height: 0; color: inherit; text-decoration: none; }
.ohm-mk.ohm-mk .filt .sort-chips { min-width: 0; display: flex; gap: 8px; overflow: visible; }
.ohm-mk.ohm-mk .filt .ctl { padding: 7px 13px; }
.ohm-mk.ohm-mk .filt .ctl::after { content: none; }
.ohm-mk.ohm-mk .filt .chip-btn.on { box-shadow: none; }
.ohm-mk.ohm-mk .cnt { margin: 0; white-space: normal; }
.ohm-mk.ohm-mk .g2 { margin: 0; }
/* the whole card is the target; the name link stretches over it */
.ohm-mk.ohm-mk .pc .nm::after { content: ''; position: absolute; inset: 0; }
.ohm-mk.ohm-mk .pc .verdict:empty { display: none; }
.ohm-mk.ohm-mk .pc .verdict { position: relative; margin: 0; padding: 0 13px 12px; font-size: 12px; }
.ohm-mk.ohm-mk .pc .product-variants { position: relative; padding: 0 13px 12px; font-size: 11.5px; }

/* ── 7) product detail. the ported pieces sit inside the old detail.css boxes,
   which still own the parts the mockup rule does not declare. */
.ohm-mk.ohm-mk .detail-verdict-hero { padding: 0; background: none; color: inherit; }
.ohm-mk.ohm-mk .vd .s .verdict-score-ring { all: unset; display: block; }
.ohm-mk.ohm-mk .vd .verdict-say { font: inherit; }
.ohm-mk.ohm-mk .vd .verdict-meta { display: block; }
.ohm-mk.ohm-mk .vd .verdict:empty { display: none; }
.ohm-mk.ohm-mk .vd .cuts { margin: 0; padding: 0; list-style: none; }
.ohm-mk.ohm-mk .vd .detail-why { margin-top: 10px; font-size: 13px; }
.ohm-mk.ohm-mk .vd .detail-diagnosis { margin: 0; padding: 0; border: 0; background: none; }
.ohm-mk.ohm-mk .vd .score-nutrition-read-note { margin-top: 8px; font-size: 12px; color: var(--k2); }
/* the mockup's bar is a div with a width; CSP forbids inline style, so it is a <progress>
   that the basis toggle already knows how to move. */
.ohm-mk.ohm-mk .nu .r progress.bar { appearance: none; border: 0; }
.ohm-mk.ohm-mk .nu .r progress.bar::-webkit-progress-bar { background: var(--fill); border-radius: 3px; }
.ohm-mk.ohm-mk .nu .r progress.bar::-webkit-progress-value { background: var(--green); border-radius: 3px; }
.ohm-mk.ohm-mk .nu .r progress.bar::-moz-progress-bar { background: var(--green); border-radius: 3px; }
.ohm-mk.ohm-mk .nu .r { text-decoration: none; color: inherit; }
.ohm-mk.ohm-mk .nu .r b .nutr-dv { display: none; }
.ohm-mk.ohm-mk .nu .foot .block-source { margin: 0; }
.ohm-mk.ohm-mk .detail-materials { padding: 0; border: 0; }
.ohm-mk.ohm-mk .ing .additive-reveal-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.ohm-mk.ohm-mk .ing .additive-reveal-list li { padding: 7px 0; border-bottom: 1px solid var(--sep); }
.ohm-mk.ohm-mk .ing .additive-reveal-list li:last-child { border-bottom: 0; }
.ohm-mk.ohm-mk .ing .raw-reveal-text { margin: 0; font-size: 14px; line-height: 1.7; }
.ohm-mk.ohm-mk .detail-cross-shelf { margin: 0; }
.ohm-mk.ohm-mk .hrail .pc { flex: 0 0 150px; }
.ohm-mk.ohm-mk .hrail .pc .nm::after { content: none; }
/* the old skin laid the hero out as a grid and filled it with a band colour;
   the mockup card owns that space now. */
.ohm-mk.ohm-mk .detail-verdict-hero { display: block; }
.ohm-mk.ohm-mk .nu .grid-nutr { display: block; margin: 0; border: 0; background: none; box-shadow: none; }
.ohm-mk.ohm-mk :is(.crumb, .claims, .sub, .ing, .detail-more, .notes, .prov) a { display: inline; }
.ohm-mk.ohm-mk .seg :is(button, [aria-pressed]) { border: 0; color: var(--k); }
.ohm-mk.ohm-mk .seg [aria-pressed="false"] { background: none; box-shadow: none; }
.ohm-mk.ohm-mk .crumb { padding: 10px 0 0; font-size: 12px; color: var(--k2); }
.ohm-mk.ohm-mk .vd :is(.verdict-say, .verdict-eyebrow, .verdict-meta, .verdict-band-label) { color: inherit; }
.ohm-mk.ohm-mk .vd .verdict-eyebrow { display: block; font-size: 12px; font-weight: 400; color: var(--k2); margin-top: 4px; }
.ohm-mk.ohm-mk .vd .verdict-say { display: block; font: inherit; }
.ohm-mk.ohm-mk .vd .row { flex-wrap: nowrap; }
.ohm-mk.ohm-mk .vd .v { min-width: 0; flex: 1 1 auto; }
.ohm-mk.ohm-mk .vd .s { flex: 0 0 auto; }
.ohm-mk.ohm-mk .vd .verdict-score-ring::before { content: none; }
.ohm-mk.ohm-mk .detail-label-facts { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 0 0; }
.ohm-mk.ohm-mk .detail-label-facts > span { padding: 3px 9px; border: 1px solid var(--sep); border-radius: 6px; background: var(--card); font-size: 11.5px; color: var(--k2); }
.ohm-mk.ohm-mk .detail-label-facts .basis-note { border: 0; padding: 0; background: none; }
/* 2026-09-09 목업(화면 5): summary 안의 .why 가 링크 꼴 낱말 크기·굵기·색을 그대로 낸다 — 여기선 마커만 지운다.
   화살표는 글자로 안 쓰고 CSS 로 낸다(사이트 관례 .fold > summary::after 와 같음, 글자로 또 쓰면 › 가 둘이 된다).
   a.why(다른 상세의 '왜 깎였는지 보기 ›' 링크)는 이미 글자로 쓰므로 summary.why 에만 좁힌다. */
.ohm-mk.ohm-mk .vd .detail-why > summary { list-style: none; }
.ohm-mk.ohm-mk .vd .detail-why > summary.why::after { content: "›"; margin-left: 4px; }
.ohm-mk.ohm-mk .vd .detail-why > summary::-webkit-details-marker { display: none; }
/* card text colour: the mockup rules set size and weight but inherit colour from .sk */
.ohm-mk.ohm-mk .pc .nm { color: var(--k); }
/* .pc .mk (제조사 줄) 은 design/mockup-source.css 가 이미 var(--k2) 회색으로 정해 둔다 — 여기서
   또 color:inherit 로 덮으면 .pc 의 먹색을 물려받아 목업과 달라진다(2026-09-09 대조기로 실측). */
.ohm-mk.ohm-mk .pc .m span { color: inherit; }
.ohm-mk.ohm-mk .pc .m { display: -webkit-box; }
/* row lists that carry <li> wrappers keep the grid on the anchor */
.ohm-mk.ohm-mk .rows > li { display: block; }
.ohm-mk.ohm-mk .rows > li + li > a { border-top: 1px solid var(--sep); }
.ohm-mk.ohm-mk .rows .t b { font-weight: 600; }
.ohm-mk.ohm-mk .rows .reading-entry--lead { border: 0; border-radius: 0; background: none; box-shadow: none; }
/* db2 왼쪽 '제품' 은 전체메뉴를 여는 단추다 — 목업에선 span 이라 단추 기본 살갗을 지운다 */
.ohm-mk.ohm-mk .db2 .cat { appearance: none; border: 0; border-right: 1px solid var(--sep); background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }

/* === 배치 desktop (ORDER-desktop, 2026-09-09) ===
   데스크톱 뼈대 클래스(.dw .dsec .dhero .dg3 .dg4 .dlay .dfl .ddt .dside)는 design/mockup-source.css
   에 이미 있다(목업 원본 그대로) — export-mockup-css.mjs 가 그대로 옮겨 .ohm-mk 아래 담았지만, 가리는
   조상이 `.tabl`/`.desk`(목업 문서의 고정폭 미리보기 상자)뿐이라 실제 페이지엔 그런 조상이 없어서
   전부 죽은 규칙이었다 — 폰(<768)·웹(≥768) 둘뿐인 진짜 폭 조건으로 되살린다.
   1) mk-phone/mk-web/mk-below-1024/mk-desktop: 같은 자료를 다른 마크업으로 보여줄 때 감싸개만
      바꾸는 손잡이. 태블릿(768~1023)은 데스크톱 뼈대를 쓰되 격자만 좁힌다(mockup-source.css 의
      .tabl 값 그대로, 여기서 진짜 min-width 로 되살린다) — .dw .dg4 .dhero .dsec 값. */
/* 2026-09-09 형 지적: 데스크톱에서 서비스 아이콘 줄(.quick)이 2차 머리와 중복으로 또 떴다.
   .mk-phone 이 붙어 있는데도 안 숨은 이유는 우선순위다 — 내보낸 목업 규칙은 두 겹(.ohm-mk.ohm-mk .quick)
   이라 한 겹짜리 숨김 규칙을 이긴다. 손잡이 규칙도 같은 두 겹으로 맞춘다(덧칠이 아니라 같은 자리 교정). */
/* 갈래 home2(2026-09-09): export-mockup-css.mjs 가 뽑은 목업 원본 규칙은 명시성을 올리려 .ohm-mk 를
   두 번 적는다(예: .ohm-mk.ohm-mk .quick) — 클래스 두 개짜리 이 손잡이 규칙이 거기 밀려 D1·T1 에서
   .quick(홈 아이콘 다섯 개 줄)이 안 숨었다. 손잡이도 같은 두 번 적기로 맞춘다. */
/* 2026-09-09 바로잡기: 손잡이가 부품의 제 display 를 덮어쓰고 있었다. `.mk-web{display:block}` 은
   `.ohm-mk.ohm-mk .dsec{display:flex}` 와 특이도가 같은데 뒤에 와서 이겼다 — `<div class="dsec mk-web">`
   (목록·상세의 웹 구간 머리)가 flex 를 잃고 제목과 개수가 두 줄로 떨어졌다(D2 실측 목업 31px · 코드 56px).
   보이는 쪽을 다시 켜지 말고 안 보이는 폭에서만 끈다 — 그 폭 밖에는 규칙 자체가 없어 부품의 제 display
   (flex·grid)가 그대로 산다. 끄는 쪽은 특이도를 그대로 둔다(내보낸 목업 규칙이 두 겹이라 얕으면 밀린다). */
@media (max-width: 767px) { .ohm-mk.ohm-mk .mk-web { display: none; } }
@media (min-width: 768px) { .ohm-mk.ohm-mk .mk-phone { display: none; } }
@media (max-width: 1023px) { .ohm-mk.ohm-mk .mk-desktop { display: none; } }
@media (min-width: 1024px) { .ohm-mk.ohm-mk .mk-below-1024 { display: none; } }
/* 2) 768~1023(태블릿)만 — mockup-source.css 의 `.tabl X` 값을 진짜 폭 조건으로. ≥1024 은 그 조건이
   꺼져 mockup-source.css 의 무조건 규칙(데스크톱 값)으로 그대로 되돌아간다 — 따로 다시 안 적는다. */
@media (min-width: 768px) and (max-width: 1023px) {
  .ohm-mk.ohm-mk .db1 { height: 56px; padding: 0 20px; gap: 16px; }
  .ohm-mk.ohm-mk .db1 .fld { max-width: none; }
  .ohm-mk.ohm-mk .db1 .right { gap: 16px; }
  .ohm-mk.ohm-mk .db2 { height: 44px; padding: 0 20px; gap: 18px; overflow-x: auto; }
  .ohm-mk.ohm-mk .db2 nav { gap: 18px; }
  /* 갈래 frame(2026-09-09): 목업 태블릿 틀 안쪽(.dsc)은 832, .dw 는 786 — 남는 여백은 양쪽 23씩
     (832 = 786 + 46 양쪽). 검사기가 코드를 832 폭으로 열 때 .dw 가 정확히 786 이 되도록 46 으로 맞춘다. */
  .ohm-mk.ohm-mk .dw { width: calc(100% - 46px); }
  .ohm-mk.ohm-mk .dg4 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ohm-mk.ohm-mk .dhero { grid-template-columns: 1fr 236px; gap: 16px; margin-top: 20px; }
  .ohm-mk.ohm-mk .dhero .big { height: auto; min-height: 186px; padding: 20px; }
  .ohm-mk.ohm-mk .dhero .big .t { font-size: 23px; max-width: none; }
  .ohm-mk.ohm-mk .dhero .big .n b { font-size: 44px; }
  .ohm-mk.ohm-mk .dhero .side div { min-height: 0; padding: 14px; }
  .ohm-mk.ohm-mk .dsec { margin: 26px 0 12px; }
  .ohm-mk.ohm-mk .dlay { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
  .ohm-mk.ohm-mk .dlay .dfl { display: none; }
  .ohm-mk.ohm-mk .ddt { grid-template-columns: 1fr; gap: 22px; margin-top: 18px; }
  .ohm-mk.ohm-mk .ddt .dside { position: static; }
  /* mockup-source.css 의 .tabl .ddt > div:first-child 서브그리드 — 목업 DOM 은 본문 div 가 첫째
     자식이고 영양 카드(.card.nu)·원재료 카드(.card:has(.ing))가 그 바로 밑 자식이라 :first-child 가
     먹지만, 여기 DOM 은 .dside 가 먼저라 본문은 둘째고, 영양은 <section class="detail-evidence-lead">
     한 겹을 더 두른다(다른 화면·JS 훅이 그 section 을 쓴다 — 못 뺀다). 그래서 "카드만 반칸" 대신
     "그 절을 통째로 반칸"으로 같은 결과를 낸다: 영양·원재료 절만 나란히, 나머지는 전체 폭. */
  .ohm-mk.ohm-mk .ddt > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-content: start; }
  .ohm-mk.ohm-mk .ddt > div > * { grid-column: 1 / -1; }
  .ohm-mk.ohm-mk .ddt > div > .detail-evidence-lead,
  .ohm-mk.ohm-mk .ddt > div > .detail-materials { grid-column: auto; margin-top: 16px; align-self: start; }
}
/* 3) .dw 는 목업의 .desk/.tabl 고정폭 상자(1180/834) 안에서 잰 값이다 — 실 페이지는 그 상자가
   없으니 뷰포트에 맞춰 줄어들 수 있어야 한다(작은 노트북 폭에서 가로 스크롤이 생기면 안 된다). */
.ohm-mk.ohm-mk .dw { max-width: 100%; }
/* 4) .ddt(제품·글 상세 2단) — mockup-source.css 의 .ddt 기본값은 desk 값(2단 그리드)이라 그대로 두면
   폰(<768)에서도 "1fr 380px" 두 단이 된다. 폰은 한 흐름, 웹(≥768)만 그리드다.
   DOM 은 .dside(판정) → 본문(div) → .acts(행동) 셋이다 — ORDER-212 순서 계약(판정→영양→더 볼 것→
   행동)이 폰(block)에서 그대로 서려면 .acts 를 본문 뒤 형제로 둬야 한다(목업 원본은 .dside 안에
   .acts 를 넣어 카드 하나다 — 여기선 카드 둘: 판정 카드 + 그 아래 행동 카드로 자리만 붙인다).
   태블릿(768-1023, 위에서 1단으로 되돌린 폭)은 order 로 "본문 → 판정 → 행동" 세로 흐름이고,
   데스크톱(≥1024, mockup-source 기본 2단)은 grid-column/row 로 판정·행동을 오른쪽 칸에 위아래로
   붙인다(순서 무의미해져 order 는 무시된다). */
.ohm-mk.ohm-mk .ddt { display: block; }
.ohm-mk.ohm-mk .ddt > .dside { position: static; margin: 0 0 20px; }
.ohm-mk.ohm-mk .ddt > .acts { margin-top: 20px; }
/* mockup-source.css 의 .dside 카드 그릇(테두리·배경·그림자)은 값 조건 없이 unconditional 이라
   폰에서도 걸린다 — .dside 안의 판정은 이미 그 자신이 .card(판정 히어로)라 폰에서 "카드 속 카드 +
   좌우 16px 이중 여백"이 생긴다. 폰은 옛 모습 그대로(카드 하나, .card 여백 그대로)여야 하니 .dside
   자체는 웹(≥768)에서만 카드가 되고, 그때는 안의 .card 가 테두리·배경·좌우 여백을 벗는다(.card.flat
   과 같은 처방 — 겉 카드가 이미 하나 있으니 속 카드는 납작해진다). */
.ohm-mk.ohm-mk .dside { border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
@media (min-width: 768px) {
  .ohm-mk.ohm-mk .ddt { display: grid; }
  .ohm-mk.ohm-mk .ddt > .dside { order: 2; margin: 0; }
  .ohm-mk.ohm-mk .ddt > div { order: 1; min-width: 0; }
  .ohm-mk.ohm-mk .ddt > .acts {
    order: 3; margin-top: 12px; padding: 14px;
    border: 1px solid var(--hair); border-radius: 18px; background: var(--card);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--sh);
  }
  .ohm-mk.ohm-mk .dside {
    border: 1px solid var(--hair); border-radius: 18px; background: var(--card);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--sh); overflow: hidden;
  }
  .ohm-mk.ohm-mk .dside > .card {
    margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* 목업 D3 본문의 .card(영양·원재료)는 인라인 style="margin:16px 0 0"로 좌우만 0 이다 —
     .ddt 본문 칸이 이미 폭을 잡아 줘 폰의 16px 화면 여백이 더는 필요 없다. */
  .ohm-mk.ohm-mk .ddt > div .card { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1024px) {
  .ohm-mk.ohm-mk .ddt > .dside { position: sticky; top: calc(var(--appbar-h) + 16px); grid-column: 2; grid-row: 1; }
  .ohm-mk.ohm-mk .ddt > div { grid-column: 1; grid-row: 1 / span 2; }
  /* 2026-09-09: 본문 div 가 두 줄을 걸쳐 있어 1줄 높이가 본문 절반(≈900px)까지 늘고, 행동 상자가
     판정 카드에서 530px 아래로 떨어져 있었다(목업 D3 은 판정 카드 바로 안에 붙어 있다).
     1줄을 판정 카드 높이(auto)로 못 박고 남는 것은 2줄이 가진다. */
  .ohm-mk.ohm-mk .ddt { grid-template-rows: auto 1fr; }
  .ohm-mk.ohm-mk .ddt > .acts { grid-column: 2; grid-row: 2; align-self: start; margin-top: 12px; }
}

/* 4b) .dg4 를 목록 화면(desktop-list-grid)에 직접 붙였다 — 이 요소는 D1(홈)의 .dg4 와 달리
   .mk-web/.mk-desktop 뒤에 숨어 있지 않고 폰에도 그대로 보인다. mockup-source.css 의 .dg4 값
   (4×269px 고정폭)은 조건 없이 걸려 있어 그냥 두면 폰에서 1076px+ 로 가로 넘친다 — 옛
   .desktop-list-grid 가 이미 갖고 있던 폰·600px 응답형 값을 .dg4 이름으로 그대로 되풀이해
   1024 미만에서는 완전히 덮는다("폰을 깨면 반려다"). */
@media (max-width: 599px) {
  .ohm-mk.ohm-mk .dg4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 600px) and (max-width: 767px) {
  .ohm-mk.ohm-mk .dg4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
/* 4d) 목업은 이 같은 격자를 폰에서 .g2(1fr 1fr, padding:12px 16px 0 — 목업 자기 값 그대로 맞는다),
   태블릿·데스크톱에서 .dg4(3열 또는 고정 269px, padding 없음)로 다른 이름으로 그린다 — 이 자리(목록
   카드)는 실제로는 한 요소라 두 이름을 같이 단다(목업 마디 이름을 그대로 쓴다). g2의 padding이
   ≥768(.dg4가 넘겨받는 폭)에서도 따라와 격자 안쪽 폭을 줄였다(태블릿 실측 242.656px, 기대
   251.328px) — 그 폭에서만 지운다(폰의 g2 패딩·다른 화면의 g2는 손대지 않는다). ≥1024에서는 g2의
   repeat(4,1fr) 규칙(5번 블록, 뒤에 옴)도 특이도가 같아 나중 규칙으로 이겨 .dg4의 269px 고정폭을
   짓눌렀다(2026-09-09 실측 189.5px) — 그 값도 여기서 되돌린다. */
@media (min-width: 768px) {
  .ohm-mk.ohm-mk .g2.dg4 { padding: 0; }
}
/* 2026-09-09 데스크톱 바로잡기 — 고정 px 칸이 좁은 자리에서 삐져나온다.
   목업의 데스크톱 값은 전부 .dw(1136) 를 통째로 쓸 때의 값이다: .dg4 는 269px 넉 장(+간격 60 = 1,136),
   .dhero 는 846+270(+20 = 1,136). 그런데 그 격자가 더 좁은 칸 안에 들어가는 자리가 셋 있다 —
   목록은 .dlay 본문 칸 856, 글 상세는 읽는 기둥 720, 홈은 창이 1024 일 때 .dw 자체가 1,115 로 준다.
   고정폭이라 칸을 못 알아보고 그대로 넘쳤다(실측 문서 폭: 목록 1280→1488 · 1024→1437,
   글 상세 1280→1416 · 1440→1496, 홈 1024→1157 — 목업 원본 D2 도 같은 자리가 넘친다).
   폭에 맞춰 세는 식으로 바꾼다(최소 260px): .dw(1136) 에서는 그대로 269px 넉 장이 나오고
   (1,136−60÷4 = 269), 목록 칸 856 은 272px 세 줄, 글 상세 기둥 720 은 350px 두 줄이 된다 —
   좁은 기둥에 세 줄을 우겨넣지 않는 자리다. 곁칸(.dhero .ddt)은 남는 칸을
   minmax(0,1fr) 로 준다 — 격자 트랙의 최소 크기가 auto 라 맨 1fr 로는 못 막는다. */
@media (min-width: 1024px) {
  .ohm-mk.ohm-mk .dg4,
  .ohm-mk.ohm-mk .g2.dg4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ohm-mk.ohm-mk .dlay { grid-template-columns: 240px minmax(0, 1fr); }
  .ohm-mk.ohm-mk .dhero { grid-template-columns: minmax(0, 1fr) 270px; }
  .ohm-mk.ohm-mk .ddt { grid-template-columns: minmax(0, 1fr) 380px; }
}
/* 4c) .mag-col720(글 상세) — 목업 자체 지적("본문은 720 한 기둥. 읽는 화면은 넓히지 않는다")만
   옮긴다. 관련 식품·목차·댓글 자리(.dg4 등)는 자료가 없어 뺐다 — .dw(1136) 안에서 본문만 720 으로
   다시 좁혀 가운데 둔다. 폰은 손대지 않는다(.reading-detail 의 기존 폭 그대로). */
@media (min-width: 768px) {
  .ohm-mk.ohm-mk .mag-col720 { max-width: 720px; margin: 0 auto; }
}
/* 5) .dlay(목록 필터 기둥) — mockup-source.css 기본값은 "240px 1fr" 2단 그리드라 그대로 두면 폰에서도
   걸린다. 폰·태블릿은 한 흐름(위 2번 블록이 태블릿의 grid-template-columns:1fr·.dfl 숨김을 이미 맡는다),
   필터 기둥은 ≥1024 에서만 나타난다("세 가지만 1024에서 바뀐다" 규범). DOM 은 본문(.dlay > div, 결과
   목록) 먼저 → .dfl(필터) 나중이다(키보드 탐색이 결과부터 닿는다) — order 로 ≥1024 에서만 왼쪽 기둥으로
   보인다. */
.ohm-mk.ohm-mk .dlay { display: block; }
@media (min-width: 1024px) {
  .ohm-mk.ohm-mk .dlay { display: grid; }
  .ohm-mk.ohm-mk .dlay > .dfl { order: 1; }
  .ohm-mk.ohm-mk .dlay > div { order: 2; min-width: 0; }
}

/* ── 8) 탭바·FAB. 목업의 .tb/.fab 는 390×800 .phone 안에서 자연스러운 흐름(정적 flex 칸)과
   .phone 이 만든 위치 기준(.fab 의 absolute)을 가정한다. 실제 화면은 그런 틀이 없으니
   뷰포트에 고정하고, 노치 안전영역만큼 키를 더한다. 색·글자·칸 배치는 위 목업 규칙 그대로 둔다. */
.ohm-mk.ohm-mk .tb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  box-sizing: border-box; view-transition-name: tabbar;
}
.ohm-mk.ohm-mk .fab {
  position: fixed; z-index: 31;
  bottom: calc(64px + env(safe-area-inset-bottom) + 22px);
}
@media (min-width: 1024px) {
  .ohm-mk.ohm-mk .tb, .ohm-mk.ohm-mk .fab { display: none; }
}

/* ── 상세 하단 행동 바 .act (2026-09-09 목업 이식 배치 4). 목업은 390×800 .phone 안의 정적 flex 줄을
   가정한다 — 실제 화면은 그런 틀이 없으니 .tb·.fab 처럼 뷰포트에 고정하고 노치 안전영역을 더한다.
   .ic/.p 는 목업에선 <span>이지만 실 코드는 접근성 때문에 button 구실을 하는 span(role=button)이나
   <a>를 쓴다 — 값은 같고 태그만 넓힌다(.filt :is(a,button,span) 와 같은 이미 있는 관례). */
/* mockup-source.css 의 ".act span"/".act span.p" 는 태그를 span 으로 못박는다 — 진짜 이동(레시피
   보기 등)은 <a>가 맞는 태그라 같은 값을 태그만 넓혀 다시 쓴다(값은 그대로, 손대는 건 mockup-source.css 쪽 규칙 아님). */
.ohm-mk.ohm-mk .act :is(span, a) { text-decoration: none; color: inherit; cursor: pointer; flex: 1; height: 50px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 14px; background: var(--card); font-size: 13.5px; font-weight: 600; }
.ohm-mk.ohm-mk .act :is(span, a).p { flex: 2; border-color: transparent; background: var(--gt); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 4px 14px rgba(36,138,61,.32); }
.ohm-mk.ohm-mk .act {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; box-sizing: border-box;
  height: calc(74px + env(safe-area-inset-bottom));
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { .ohm-mk.ohm-mk .act { display: none; } }
/* 옛 하단 바(.detail-action-bar)는 아이콘 둘 + 늘어나는 한 칸을 가정한 grid — .act 는 네 칸까지
   제 손으로 배치하니 그 grid 를 걷어내고 자리만 내준다(0,2,0 이라 옛 규칙을 덧칠 없이 이긴다). */
.detail-action-bar:has(.act) { display: block; position: static; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
html[data-ohm-skin="on"] .detail-action-bar:has(.act) { border-top: 0; box-shadow: none; background: none; }

/* ── 9) 머리 .ib. 목업 값(34×34)은 그대로 두고, 누르는 자리만 안 보이는 여백으로 44px 를
   채운다(격자 안 10px gap 과 딱 맞아 옆 칸과 안 겹친다) — 시각은 목업, 접근성은 44px 그대로. */
.ohm-mk.ohm-mk .bar .ib::after { content: ''; position: absolute; inset: -5px; }
/*   2026-09-09 로컬 훑기: 같은 문제가 세 자리 더 있었다 — 구간 머리의 "전체 ›"(32×25, 9곳),
   목록 탭 제품·음식·식재료(26×32, 9곳), 지도 뒤로(34×34). 위와 같은 방법으로 보이는 크기는 그대로 두고
   누르는 자리만 44 로 채운다. 탭 사이 gap 이 18px 이라 옆 칸과 닿기만 하고 안 겹친다(훑기로 확인). */
.ohm-mk.ohm-mk .sec a,
.ohm-mk.ohm-mk a.shelf-more,
.ohm-mk.ohm-mk .tabs :is(a, b),
.ohm-mk.ohm-mk .map-toolbar .map-back,
.ohm-mk.ohm-mk .cat-chips .chip-btn { position: relative; }
.ohm-mk.ohm-mk .sec a::after,
.ohm-mk.ohm-mk a.shelf-more::after,
.ohm-mk.ohm-mk .tabs :is(a, b)::after,
.ohm-mk.ohm-mk .map-toolbar .map-back::after,
.ohm-mk.ohm-mk .cat-chips .chip-btn::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 44px); height: max(100%, 44px);
}

/* ORDER-216 은 옛 .tabbar 리스킨 블록에 있던 사실이라 그 블록을 지우면서 같이 잃었다 — 다시 적는다:
   투명도를 줄여 달라는 사람에게는 블러를 끄고 살갗 자체를 불투명하게 낸다(머리·탭바 둘 다). */
@media (prefers-reduced-transparency: reduce) {
  .ohm-mk.ohm-mk :is(.bar, .tb) { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* === 배치 personal: 10 내 몸 === 이미 있는 관례(9번 블록)를 따라 .rows a 값을 태그만 넓힌다 —
   내 몸 페이지의 줄은 다이얼로그를 여는 button, 켬/끔 토글은 checkbox 를 감싼 label 이다. */
.ohm-mk.ohm-mk .rows > :is(button.two, label.two) {
  display: grid; grid-template-columns: 1fr auto 12px; gap: 12px; align-items: center; padding: 11px 14px;
  width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
}
.ohm-mk.ohm-mk .rows > :is(button.two, label.two):not(:first-child) { border-top: 1px solid var(--sep); }

/* ORDER-129 관례: style-src 'self' CSP가 인라인 style=(서버·클라이언트 무관)을 조용히 무시한다
   (실측: getComputedStyle이 기본값 그대로, 콘솔엔 위반만 남는다). 한 번뿐인 여백값과 진행폭은
   인라인 대신 미리 만든 클래스로 낸다 — 값은 그대로, 나르는 그릇만 class로 바꾼다. */
.ohm-mk.ohm-mk .mk-pb0 { padding-bottom: 0; }
.ohm-mk.ohm-mk .mk-mt0 { margin-top: 0; }
.ohm-mk.ohm-mk .mk-pt8 { padding-top: 8px; }
.ohm-mk.ohm-mk .mk-k2 { color: var(--k2); }
.ohm-mk.ohm-mk .filt.wrap { flex-wrap: wrap; height: auto; }
.ohm-mk.ohm-mk .mk-w0{width:0%}
.ohm-mk.ohm-mk .mk-w1{width:1%}
.ohm-mk.ohm-mk .mk-w2{width:2%}
.ohm-mk.ohm-mk .mk-w3{width:3%}
.ohm-mk.ohm-mk .mk-w4{width:4%}
.ohm-mk.ohm-mk .mk-w5{width:5%}
.ohm-mk.ohm-mk .mk-w6{width:6%}
.ohm-mk.ohm-mk .mk-w7{width:7%}
.ohm-mk.ohm-mk .mk-w8{width:8%}
.ohm-mk.ohm-mk .mk-w9{width:9%}
.ohm-mk.ohm-mk .mk-w10{width:10%}
.ohm-mk.ohm-mk .mk-w11{width:11%}
.ohm-mk.ohm-mk .mk-w12{width:12%}
.ohm-mk.ohm-mk .mk-w13{width:13%}
.ohm-mk.ohm-mk .mk-w14{width:14%}
.ohm-mk.ohm-mk .mk-w15{width:15%}
.ohm-mk.ohm-mk .mk-w16{width:16%}
.ohm-mk.ohm-mk .mk-w17{width:17%}
.ohm-mk.ohm-mk .mk-w18{width:18%}
.ohm-mk.ohm-mk .mk-w19{width:19%}
.ohm-mk.ohm-mk .mk-w20{width:20%}
.ohm-mk.ohm-mk .mk-w21{width:21%}
.ohm-mk.ohm-mk .mk-w22{width:22%}
.ohm-mk.ohm-mk .mk-w23{width:23%}
.ohm-mk.ohm-mk .mk-w24{width:24%}
.ohm-mk.ohm-mk .mk-w25{width:25%}
.ohm-mk.ohm-mk .mk-w26{width:26%}
.ohm-mk.ohm-mk .mk-w27{width:27%}
.ohm-mk.ohm-mk .mk-w28{width:28%}
.ohm-mk.ohm-mk .mk-w29{width:29%}
.ohm-mk.ohm-mk .mk-w30{width:30%}
.ohm-mk.ohm-mk .mk-w31{width:31%}
.ohm-mk.ohm-mk .mk-w32{width:32%}
.ohm-mk.ohm-mk .mk-w33{width:33%}
.ohm-mk.ohm-mk .mk-w34{width:34%}
.ohm-mk.ohm-mk .mk-w35{width:35%}
.ohm-mk.ohm-mk .mk-w36{width:36%}
.ohm-mk.ohm-mk .mk-w37{width:37%}
.ohm-mk.ohm-mk .mk-w38{width:38%}
.ohm-mk.ohm-mk .mk-w39{width:39%}
.ohm-mk.ohm-mk .mk-w40{width:40%}
.ohm-mk.ohm-mk .mk-w41{width:41%}
.ohm-mk.ohm-mk .mk-w42{width:42%}
.ohm-mk.ohm-mk .mk-w43{width:43%}
.ohm-mk.ohm-mk .mk-w44{width:44%}
.ohm-mk.ohm-mk .mk-w45{width:45%}
.ohm-mk.ohm-mk .mk-w46{width:46%}
.ohm-mk.ohm-mk .mk-w47{width:47%}
.ohm-mk.ohm-mk .mk-w48{width:48%}
.ohm-mk.ohm-mk .mk-w49{width:49%}
.ohm-mk.ohm-mk .mk-w50{width:50%}
.ohm-mk.ohm-mk .mk-w51{width:51%}
.ohm-mk.ohm-mk .mk-w52{width:52%}
.ohm-mk.ohm-mk .mk-w53{width:53%}
.ohm-mk.ohm-mk .mk-w54{width:54%}
.ohm-mk.ohm-mk .mk-w55{width:55%}
.ohm-mk.ohm-mk .mk-w56{width:56%}
.ohm-mk.ohm-mk .mk-w57{width:57%}
.ohm-mk.ohm-mk .mk-w58{width:58%}
.ohm-mk.ohm-mk .mk-w59{width:59%}
.ohm-mk.ohm-mk .mk-w60{width:60%}
.ohm-mk.ohm-mk .mk-w61{width:61%}
.ohm-mk.ohm-mk .mk-w62{width:62%}
.ohm-mk.ohm-mk .mk-w63{width:63%}
.ohm-mk.ohm-mk .mk-w64{width:64%}
.ohm-mk.ohm-mk .mk-w65{width:65%}
.ohm-mk.ohm-mk .mk-w66{width:66%}
.ohm-mk.ohm-mk .mk-w67{width:67%}
.ohm-mk.ohm-mk .mk-w68{width:68%}
.ohm-mk.ohm-mk .mk-w69{width:69%}
.ohm-mk.ohm-mk .mk-w70{width:70%}
.ohm-mk.ohm-mk .mk-w71{width:71%}
.ohm-mk.ohm-mk .mk-w72{width:72%}
.ohm-mk.ohm-mk .mk-w73{width:73%}
.ohm-mk.ohm-mk .mk-w74{width:74%}
.ohm-mk.ohm-mk .mk-w75{width:75%}
.ohm-mk.ohm-mk .mk-w76{width:76%}
.ohm-mk.ohm-mk .mk-w77{width:77%}
.ohm-mk.ohm-mk .mk-w78{width:78%}
.ohm-mk.ohm-mk .mk-w79{width:79%}
.ohm-mk.ohm-mk .mk-w80{width:80%}
.ohm-mk.ohm-mk .mk-w81{width:81%}
.ohm-mk.ohm-mk .mk-w82{width:82%}
.ohm-mk.ohm-mk .mk-w83{width:83%}
.ohm-mk.ohm-mk .mk-w84{width:84%}
.ohm-mk.ohm-mk .mk-w85{width:85%}
.ohm-mk.ohm-mk .mk-w86{width:86%}
.ohm-mk.ohm-mk .mk-w87{width:87%}
.ohm-mk.ohm-mk .mk-w88{width:88%}
.ohm-mk.ohm-mk .mk-w89{width:89%}
.ohm-mk.ohm-mk .mk-w90{width:90%}
.ohm-mk.ohm-mk .mk-w91{width:91%}
.ohm-mk.ohm-mk .mk-w92{width:92%}
.ohm-mk.ohm-mk .mk-w93{width:93%}
.ohm-mk.ohm-mk .mk-w94{width:94%}
.ohm-mk.ohm-mk .mk-w95{width:95%}
.ohm-mk.ohm-mk .mk-w96{width:96%}
.ohm-mk.ohm-mk .mk-w97{width:97%}
.ohm-mk.ohm-mk .mk-w98{width:98%}
.ohm-mk.ohm-mk .mk-w99{width:99%}
.ohm-mk.ohm-mk .mk-w100{width:100%}

/* === 배치 5-A === 계정·설정 무리(11 내 프로필·13 보관함·36 알림·36b 알림 설정·37 설정·38 정보).
   1) 보관함 .pc 카드: 목업의 list 화면 규칙(#6, 위)이 .nm::after 로 카드 전체를 덮어 눌러야 할
   .pick 체크박스·수정 details 를 가린다 — 그 둘만 쌓임 순서를 올린다(값은 그대로, 자리만 위로).
   2) 빈 보관함일 때는 고를 것도 지울 것도 없어 하단 행동바(.act)를 비운다. */
.ohm-mk.ohm-mk .pc .pick, .ohm-mk.ohm-mk .pc .cart-item-edit { position: relative; z-index: 1; }
/* 정보 페이지(38)의 "무엇을 하나"/"무엇을 안 하나" 네 줄은 다이얼로그도 링크도 아닌 그냥 문장이다 —
   이미 있는 button.two/label.two 관례(배치 personal-10)를 태그만 div로 넓힌다(값은 그대로). */
.ohm-mk.ohm-mk .rows > div.two { display: grid; grid-template-columns: 1fr auto 12px; gap: 12px; align-items: center; padding: 11px 14px; }
.ohm-mk.ohm-mk .rows > div.two:not(:first-child) { border-top: 1px solid var(--sep); }
body:has(#cart-root > .cart-empty) [data-cart-act] { display: none; }
/* 담아둔 카드의 .pick 은 라디오가 아니라 켬/끔 체크박스라 시각은 목업 그대로, 인풋은 화면 밖으로만 뺀다. */
.ohm-mk.ohm-mk .pc .pick input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
/* 목업 .pickbar 는 390px 폰 안 절대좌표였다 — 실제 화면은 하단 행동바 위에 뷰포트로 고정한다. */
.ohm-mk.ohm-mk .pickbar { position: fixed; left: 16px; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom) + 10px); z-index: 22; }
/* mockup-source.css 의 .pickbar b 는 <b> 로 못박는다 — 실은 이동이라 <a>(값은 그대로, 태그만 넓힌다). */
.ohm-mk.ohm-mk .pickbar a { padding: 7px 12px; border-radius: 9px; background: var(--gt); color: #fff; font-size: 13px; text-decoration: none; }
.ohm-mk.ohm-mk .pickbar a[aria-disabled="true"] { pointer-events: none; opacity: .5; }
@media (min-width: 1024px) { .ohm-mk.ohm-mk .pickbar { display: none; } }
/* 목업 .tabs 는 활성=<b>·비활성=<span> 로 태그를 못박는다 — 보관함 탭은 상태가 바뀌므로 둘 다
   <a>(값은 그대로, aria-current 로 활성만 가른다: .tabs :is(b,a[aria-current]) 규칙이 이미 있다). */
.ohm-mk.ohm-mk .tabs a { cursor: pointer; }

/* === 머리와 본문의 왼쪽 끝 맞추기 (형 지적 2026-09-09: "컨텐츠 너비") ===
   목업은 .desk(1180, 테두리 1px 양쪽 → 안쪽 1178) 한 틀 안에 머리와 본문이 같이 있어 둘의
   안쪽 여백이 같은 자리에서 시작한다. 실 페이지는 머리가 .wrap, 본문이 main > .dw 으로 서로
   다른 상자를 써서 어긋났었다 — 갈래 frame(2026-09-09) 실측: 목업 틀 안쪽 1178 · .dw 1136 ·
   남는 여백(양쪽 합) 42(21씩). 머리 상자를 목업 틀과 같은 1178 으로, db1/db2 안쪽 여백을 21로
   맞추면(public/desktop-chrome.css, design/mockup-source.css) 머리와 본문이 한 줄에 선다.
   폭을 넓히는 게 아니라 두 상자를 같게 만드는 것이다. */
@media (min-width: 1024px) {
  /* 1178 보다 좁은 데스크톱에서는 본문이 화면 끝에 닿는다 — 머리 db1/db2 와 같은 21px 을 띄운다.
     확정 폭이라야 .dw 의 margin:0 auto 가 가운데로 놓는다(width:auto 면 남는 폭이 오른쪽으로 간다). */
  .ohm-mk.ohm-mk .dw { width: min(1136px, calc(100% - 42px)); max-width: none; }
}
/* === 배치 5-B === */
/* 12·15·30·32·35 화면에서 쓰는 목업 자체 style="" 값을 인라인 대신 클래스로 뺀다(CSP
   style-src가 인라인 style=을 조용히 지운다, 배치 5-1에서 확인). .rows a는 목업이 화면마다
   --nw(첫 칸 너비) 값을 인라인으로 바꿔 쓴다 — 쓰는 값만 유틸 클래스로 둔다. */
.ohm-mk.ohm-mk .mk-nw52{--nw:52px}
.ohm-mk.ohm-mk .mk-nw64{--nw:64px}
.ohm-mk.ohm-mk .mk-nw68{--nw:68px}
/* 32 화면: 목업 .seg는 예시로 <span>/<b>만 쓰지만 실제 장소 전환은 서버 라우트(?place=)를
   그대로 쓰는 링크(<a>)다 — .seg가 span·button만 감싸던 규칙에 a를 더한다. */
.ohm-mk.ohm-mk .seg a{flex:1;padding:6px 0;text-align:center;color:var(--k);text-decoration:none}
/* 32 화면: .g2가 .sec 바로 뒤에 오면 목업은 style="padding-top:0"으로 위 여백을 없앤다. */
.ohm-mk.ohm-mk .mk-pt0{padding-top:0}
/* === D5 · 마이 데스크톱 (ORDER-d5) ===
   목업 D5 왼쪽 기둥의 "내 몸" 미니 카드 머리(라벨 + 전체 ›)는 목업이 인라인 style=로 그린다
   (display:flex;justify-content:space-between;padding:12px 14px 10px;font-size:12px;color:var(--k2);
   border-bottom:6px solid var(--rule)) — CSP가 인라인 style=을 지우므로 값만 그대로 클래스로 뺀다. */
.ohm-mk.ohm-mk .me-rail-h { display: flex; justify-content: space-between; padding: 12px 14px 10px; font-size: 12px; color: var(--k2); border-bottom: 6px solid var(--rule); }

/* === ORDER-cat A: 화면 2 "분류 = 식품 탭" ===
   1) 목업은 인라인 style="padding-top:18px"(.cath 앞)·style="margin:0 12px"(많이 본 것 카드)·
      style="--nw:44px"(그 rows)를 쓴다 — CSP가 인라인 style=을 지우니 유틸 클래스로 뺀다(값은 그대로). */
.ohm-mk.ohm-mk .mk-pt18{padding-top:18px}
.ohm-mk.ohm-mk .mk-mx12{margin-left:12px;margin-right:12px}
.ohm-mk.ohm-mk .mk-nw44{--nw:44px}
/* 2) 목업 .catchips는 예시로 <span>(안 눌림)만 그렸지만 실제 칩은 /foods?group=…&pair=…·
      additives_max=0 로 가는 손잡이라 <a>다 — .catchips span 규칙(위, mockup-source.css)에
      태그만 a로 더한다(값은 그대로, 밑줄만 지운다). */
.ohm-mk.ohm-mk .catchips a{padding:5px 10px;border:1.5px solid var(--sep);border-radius:999px;background:var(--card);font-size:11.5px;text-decoration:none;color:inherit}

/* === ORDER-cat B: 거르개 축 여섯 — 고른 조건 칩을 목업 .filt 문법으로 다시 세운다 ===
   public/catalog.css의 .selected-filters 옛 칩 규칙(패딩·배경·모서리)은 지웠다 — 이제 .filt 가
   준다. 여기서는 .filt 가 못 주는 것만: 아래 칩 줄과 위 내용 사이 세로 여백(.filt 는 margin:0),
   그리고 칩 안 × 표시(닫는 뜻은 있는데 목업 .filt 에는 그런 부호가 없다). */
.ohm-mk.ohm-mk .selected-filters.filt{margin:0 0 20px}
.ohm-mk.ohm-mk .selected-filters.filt a b{margin-left:6px;color:var(--k2);font-weight:400}

/* === 배치 sheet: 화면 34 "먹로그 올리기"(S14, /snap) ===
   .snap-sheet(snap.css)는 이미 좌우 여백(--s5)을 가진 바텀시트라 안에 목업 .card(margin:0 16px)를
   그대로 얹으면 여백이 두 번 붙는다 — 이 안에서만 .card·.seg 좌우 여백을 지우고, .act 는 시트
   가장자리까지 다시 넓힌다(빼 둔 여백만큼 안쪽 패딩으로 되돌려 준다). */
.snap-sheet .ohm-mk.ohm-mk .card{margin-left:0;margin-right:0}
.snap-sheet .ohm-mk.ohm-mk .seg{margin-left:0;margin-right:0}
.snap-sheet .ohm-mk.ohm-mk .act{margin:0 calc(var(--s5) * -1) calc(var(--s5) * -1);padding-left:var(--s5);padding-right:var(--s5)}
/* === 배치 rows === */
/* ORDER-rows 화면 19: 세계(사전·원물·낱말) 로컬 탭은 옛 .list-subtabs/.subtab 값을 그대로 쓰던
   자리에 목업 .tabs 마디를 더했다 — .list-subtabs{gap:var(--s4)…}(style.css, ohm-mk 스코프 밖이라
   .ohm-mk.ohm-mk .tabs 규칙이 안 먹는다)를 두 클래스 특이도로 이긴다. 값은 목업 .tabs 그대로. */
.list-subtabs.tabs{gap:18px;padding:10px 16px 0}
/* === 배치 dpc (ORDER-dpc, 2026-09-09) ===
   D2 왼쪽 기둥(.dfl)의 마지막 무리는 목업이 인라인 style="border:0"으로 아래 구분선을 지운다
   (CSP가 인라인 style=을 지우므로 :last-child로 같은 값을 낸다 — 이미 있는 관례). */
.ohm-mk.ohm-mk .dfl .bx:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
/* D4 "관련 글" 데스크톱 카드 — 목업은 인라인 style="margin:0"(옆 기둥 안이라 좌우 여백이 필요 없다).
   같은 값을 유틸 클래스로(CSP). */
.ohm-mk.ohm-mk .card.mk-m0{margin:0}
/* public/reading.css 의 .reading-detail{max-width:var(--w-reading)}(680px, 옛 한 기둥 읽기 폭)이
   .dw(1136) 보다 먼저 좁혀 .dw 자신의 min() 계산이 632px 로 쪼그라들었다 — 옛 규칙을 지운다
   (마디 안, 폭은 이제 .dw·.mag-col720(720)이 정한다. 2026-09-09 실측). */
.ohm-mk.ohm-mk.reading-detail{max-width:none}

/* === D5 · 마이 데스크톱(이어서) ===
   public/style.css 의 .me-summary-063(ORDER-d5, ≥1024 grid-template-columns:280px 1fr)는 원래
   .ohm-mk(왼쪽 기둥)·.desktop-me-layout(본문) 두 자식을 그 두 칸에 바로 앉혔다 — .dw(1136 상한)를
   끼우려면 그 둘을 한 자식(.me-content)으로 묶어야 해서, 그 한 자식이 두 칸 다(1/-1) 차지하게 하고
   실제 280px/1fr 나눔은 안쪽 .me-dlay 가 새로 맡는다(옛 규칙은 못 건드리니 지우지 않고 옆에서 이긴다). */
.me-summary-063 > .me-content{grid-column:1/-1}
.ohm-mk.ohm-mk .me-dlay{display:block}
@media (min-width:1024px){
  .ohm-mk.ohm-mk .me-dlay{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start}
  /* 새로 붙인 데스크톱 전용 절(요즘 인기·오마잇 숫자·안전 알림)은 .desktop-me-layout 자신의
     2×2 격자(오늘/내 것/기록/설정) 다섯째 칸으로 떨어져 반 칸(1열)만 차지했다 — 두 칸 다 편다. */
  .desktop-me-layout > .mk-desktop{grid-column:1/-1}
}

/* === 배치 frame (ORDER-frame, 2026-09-09) ===
   T1·홈 실측: 목업 태블릿 틀에서 "라벨 읽기" 홈 숫자 카드(.card.tight, html.js home-numbers, <1024
   에서만 보임)는 인라인 style="margin:0"(CSP가 지우는 값이라 유틸 클래스로). 데스크톱(≥1024)은
   이 카드 자체가 mk-below-1024라 숨어 이 규칙이 안 걸린다 — 태블릿 폭에서만 필요. */
@media (min-width: 768px) {
  .ohm-mk.ohm-mk .card.tight { margin-left: 0; margin-right: 0; }
}

/* === 배치 nav2 (2026-09-09 형 지적, 발주-mega 로 다시 씀) ===
   옛 기록: 목업 D1 2차 머리의 '전체'는 전체메뉴를 여는 자리였다(<button>, 링크 아님) — 아래 배치
   블록에서 <a href="/foods">(식품 메가메뉴 손잡이)로 바뀌었다. 여기 있던 버튼 살갗 초기화 규칙은
   위 .ohm-mk.ohm-mk .db2 .cat(더 높은 특이도, font-weight까지 포함)이 이미 덮어써 죽은 규칙이라 뺀다.
   지우는 것도 이 발주(design/mockup-site.css)의 몫이라 여기서 정리한다. */

/* === 배치: 메가메뉴 (발주 형 2026-09-09) ===
   "차라리 2차헤더 앞쪽 데스크톱 전체를 식품으로 바꾸고, 후버시에 저 패널이 등장하게" — db2 앞자리
   [data-mega-open]을 후버·포커스하면 #mega-food(왼쪽 대분류 17개 / 오른쪽 세부, 맨 아래 바로 가기)가
   db2 바로 아래 뜬다. .hdr-d 는 768px부터 보이지만(태블릿도 웹) 패널 자체는 1024px부터만 — 아래
   미디어쿼리가 그 경계를 진다(.hdr-d가 데스크톱 전용이 아니라는 사실을 여기서 보정한다). */
.hdr-d { position: relative; }
.ohm-mk.ohm-mk .db2 .cat.on { color: var(--gt); }
.ohm-mk.ohm-mk .mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 21px;
  right: 21px;
  z-index: 30;
  grid-template-columns: 316px 1fr;
  /* 목업 .card 는 반투명(--card)+블러다. 그건 바탕 위에 눕는 카드라 그렇고, 본문 위로 떠서 덮는
     이 패널은 불투명이어야 한다 — 안 그러면 뒤 글자가 비쳐 읽을 수가 없다(실제로 그랬다). */
  background: var(--g2);
  border: 1px solid var(--sep);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .14);
}
@media (min-width: 1024px) {
  .ohm-mk.ohm-mk .mega:not([hidden]) { display: grid; }
}
/* 대분류 17개는 잘리면 안 된다 — 420px 상한이 12개에서 끊고 나머지를 스크롤 뒤로 숨겼다. */
/* 한 칸으로 세우면 패널이 670px 로 길어져 오른쪽이 텅 빈다 — 두 칸으로 접어 높이를 반으로. */
.ohm-mk.ohm-mk .mega-groups { grid-column: 1; display: grid; grid-auto-flow: column; grid-template-rows: repeat(9, auto); grid-template-columns: 1fr 1fr; align-content: start; padding: 8px 0; border-right: 1px solid var(--sep); }
.ohm-mk.ohm-mk .mega-groups a { display: block; padding: 7px 20px; font-size: 14px; color: inherit; }
.ohm-mk.ohm-mk .mega-groups a:hover, .ohm-mk.ohm-mk .mega-groups a:focus-visible { background: var(--fill); color: var(--gt); }
.ohm-mk.ohm-mk .mega-subs { grid-column: 2; display: flex; flex-flow: column wrap; align-content: flex-start; gap: 2px 32px; max-height: 300px; padding: 14px 20px; }
.ohm-mk.ohm-mk .mega-subs a { display: block; padding: 5px 0; font-size: 13.5px; color: var(--k2); }
.ohm-mk.ohm-mk .mega-subs a:hover { color: var(--gt); }
.ohm-mk.ohm-mk .mega-shortcuts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 20px; border-top: 1px solid var(--sep); font-size: 13px; color: var(--k2); }
.ohm-mk.ohm-mk .mega-shortcuts a { display: inline; color: inherit; }
.ohm-mk.ohm-mk .mega-shortcuts a:hover { color: var(--gt); }
.ohm-mk.ohm-mk .mk-mt8 { margin-top: 8px; }
.ohm-mk.ohm-mk .mk-fs15 { font-size: 15px; }

/* === 배치: 상세(목업 D3) === */
/* 목업 D3 은 본문 맨 위에 제품 이름을 큰 글씨로 둔다 — 코드는 그 h1 이 머리로 넘어가 데스크톱에서
   이름이 한 글자도 안 보였다. 폰은 머리(.ttl)가 그 자리를 대신하니 1024 아래에서만 화면에서 감추되
   읽어 주는 기계에는 남긴다 — sr-only 와 같은 방식이되 덧칠 없이 제 규칙으로. */
@media (max-width: 1023px) {
  .ohm-mk.ohm-mk.detail > .dw > h1 {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
/* 형 지적("중앙 상세들 크기도 너무크고"): 100g/1회분/1봉 고르는 자리가 목업엔 없는 큰 판이었다.
   기능은 남기고 크기만 옆 칩 줄(.detail-label-facts)과 같은 급으로 내린다. */
.ohm-mk.ohm-mk.detail .basis.seg { display: inline-flex; width: auto; margin: 0 0 12px; padding: 2px; }
.ohm-mk.ohm-mk.detail .basis.seg > * { padding: 5px 14px; font-size: 13px; white-space: nowrap; }
/* 목업 폰 화면 5 에는 빵부스러기가 없다 — 머리의 ‹ 뒤로가 그 자리를 한다. 데스크톱 D3 에는 있다. */
@media (max-width: 1023px) {
  .ohm-mk.ohm-mk.detail > .dw > .crumb { display: none; }
  /* 목업 화면 25(레시피 상세)에도 빵부스러기·부제 줄이 없다 — 카드 머리줄이 그 말을 다 한다. */
  .ohm-mk.ohm-mk.recipe .crumb,
  .ohm-mk.ohm-mk .mk-below-1024-hide { display: none; }
}
/* 목업 .folds — 접힌 줄 세 개가 한 줄에 눕는다. 펼치면 그 칸이 한 줄을 통째로 가진다. */
.ohm-mk.ohm-mk .folds { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ohm-mk.ohm-mk .folds > details { min-width: 0; }
.ohm-mk.ohm-mk .folds > details[open] { flex: 1 0 100%; }
.ohm-mk.ohm-mk .folds > details > summary {
  display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--g2);
  font-size: 13px; color: var(--k2); cursor: pointer; list-style: none; white-space: nowrap;
}
.ohm-mk.ohm-mk .folds > details > summary::-webkit-details-marker { display: none; }
.ohm-mk.ohm-mk .folds > details > summary::after { content: " ⌄"; }
.ohm-mk.ohm-mk .folds > details[open] > summary::after { content: " ⌃"; }
.ohm-mk.ohm-mk .folds > details > summary b { font-weight: 600; color: var(--k); }
.ohm-mk.ohm-mk .folds .detail-label-facts { margin-top: 10px; }
.ohm-mk.ohm-mk .folds .detail-materials { margin-left: 0; margin-right: 0; }

/* === 배치: 조건 기둥의 줄 꼴(2026-09-09, D2) ===
   목업 .dfl 은 줄을 <label><i></i>이름<em>개수</em></label> 로 그린다. 우리 기둥의 조건은 폼이 아니라
   주소다(누르면 그 목록으로 간다) — 그래서 <a> 인데, 보이는 꼴은 목업의 label 과 같아야 한다.
   mockup-source.css 의 .dfl label 값을 그 자리에 그대로 옮겨 적는다(켠 표시는 aria-current). */
.ohm-mk.ohm-mk .dfl .opts a { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--k2); text-decoration: none; }
.ohm-mk.ohm-mk .dfl .opts a i { flex: 0 0 auto; width: 15px; height: 15px; border: 1.5px solid var(--k3); border-radius: 4px; }
.ohm-mk.ohm-mk .dfl .opts.rd a i { border-radius: 8px; }
.ohm-mk.ohm-mk .dfl .opts a[aria-current] { color: var(--k); font-weight: 600; }
.ohm-mk.ohm-mk .dfl .opts a[aria-current] i { border-color: var(--gt); background: var(--gt); }
.ohm-mk.ohm-mk .dfl .opts a em { margin-left: auto; font-style: normal; font-family: var(--sf); font-size: 11.5px; color: var(--k3); }
/* 기둥이 그 둘을 이미 펴 놓은 폭에서는 본문 위의 같은 조작을 두 번 두지 않는다(≥1024 = .dfl 이 보이는 폭).
   적용된 조건 알약·기준·초기화는 그대로 둔다 — 지금 걸린 것을 본문에서 바로 지우는 자리다. */
@media (min-width: 1024px) {
  .ohm-mk.ohm-mk .foods-results-main > .cat-chips--sub,
  .ohm-mk.ohm-mk .filt [data-sort-sheet-open],
  .ohm-mk.ohm-mk .filt [data-filter-sheet-open] { display: none; }
  /* 개수도 마찬가지 — 이 폭에서는 구간 머리(.dsec)의 오른쪽이 이미 같은 수를 말한다. */
  .ohm-mk.ohm-mk .foods-results-main > .cnt.list-result-count { display: none; }
}

/* === 배치: 상세의 "같은 분류 다른 제품"은 웹에서 격자 (2026-09-09, D3) ===
   목업 D3 는 이 자리를 옆으로 미는 레일이 아니라 네 칸 격자(.dg4f)로 편다. 우리는 폰(화면 5)과
   같은 요소 하나로 그리니 이름을 둘 달지 않고, 레일이 필요 없는 폭(≥768)에서만 격자로 편다 —
   데스크톱에서 레일은 칸 끝에서 카드가 반쯤 잘려 보이고 미는 손잡이도 없다(D3 1440 실측).
   .hrail 의 flex 고정폭(150px)도 여기서 푼다. 홈 선반 같은 다른 레일은 손대지 않는다. */
@media (min-width: 768px) {
  .ohm-mk.ohm-mk .hrail[data-alternatives] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; overflow: visible; }
  .ohm-mk.ohm-mk .hrail[data-alternatives] .pc { flex: 0 1 auto; }
}

/* === 배치: 웹에서 영양 막대는 남는 칸을 가진다 (2026-09-09, D3) ===
   목업 .nu .r 은 `1fr 66px 46px` — 폰(388) 에서는 이름 262 · 막대 66 이라 맞는 비율이다. 그런데
   데스크톱 본문 칸(718)에서 그대로 쓰면 이름 칸이 556px 로 벌어지고 "열량" 네 글자 옆이 통째로
   빈다(1440 실측). 남는 칸은 이름이 아니라 막대가 가지는 게 읽힌다 — 막대 상한만 열어 준다.
   숫자 칸(46px)과 폰 값은 그대로다. */
@media (min-width: 768px) {
  .ohm-mk.ohm-mk .nu .r { grid-template-columns: minmax(0, 1fr) minmax(66px, 260px) 46px; }
}

/* === 카드 머리 칸은 점수가 없어도 같은 높이 (2026-09-09) ===
   .pc .s b 는 숫자일 때 38px×.88 = 33px 이고, 점수가 없을 때(.x) 12px×1.25 = 15px 다. 같은 줄에
   숫자 카드와 "없음" 카드가 나란히 서면 머리 칸이 17px 낮아져 그 아래 이름·제조사 줄이 통째로
   어긋난다(/search 390 실측: 이름 줄 368 vs 350). 글자 크기는 그대로 두고 칸 높이만 맞춘다. */
.ohm-mk.ohm-mk .pc .s b { min-height: calc(38px * .88); }

/* 이름 칸도 같은 이유로 6px 어긋난다: 목업 .pc .nm 의 min-height:38px 은 두 줄(14px×1.35×2 = 37.8)에
   위 여백 6px 을 안 더한 값이라, 한 줄짜리 이름은 38px · 두 줄짜리는 44px 을 쓴다. 그 차이가 그대로
   제조사 줄로 내려가 한 줄 안의 카드들이 5~6px 씩 어긋났다(13화면 실측). 두 줄 칸을 온전히 잡는다. */
.ohm-mk.ohm-mk .pc .nm { min-height: calc(14px * 1.35 * 2 + 6px); }

/* === 색 대비: 눈에 안 보일 만큼만 낮춘다 (2026-09-09) ===
   로컬 훑기(30화면 × 390·1280)에서 대비 미달 193건이 나왔는데, 색 짝으로 묶으면 둘이 전부였다:
     #248a3d 위/아래 흰색 → 4.40 (필요 4.5) · 167건   ← 초록(--gt, 단추·켠 탭·강조 숫자)
     #6e6e73 위 옅은 회색 판 → 4.09~4.48 · 37건        ← 흐린 글자(--k2)
   목업 색을 갈아엎지 않고 밝기만 각각 97.2%·92.8% 로 낮춰 4.61 을 넘긴다 — 눈으로는 같은 색이다.
   (design/mockup-source.css 는 목업 정본이라 안 고친다 — 같은 토큰을 여기서 덮는다.)
   화살표 회색(--k3 #a9adb4, 2.25)은 그대로 뒀다: 줄 이름이 뜻을 다 지고 있는 장식이라
   aria-hidden 으로 읽어 주기에서 빼는 게 맞지 색을 어둡게 할 자리가 아니다(형 결정거리). */
.ohm-mk.ohm-mk { --gt: #23863b; --k2: #66666b; }
/* 머리의 빨간 배지는 10px 흰 글자를 --red(#ff3b30) 위에 얹어 3.55 다. 새 색을 만들지 않고
   같은 팔레트의 짙은 빨강(--rt #d70015, 5.38)을 쓴다 — 채워진 알약 위 글자 자리다. */
.ohm-mk.ohm-mk .bar .ib .bdg { background: var(--rt); }