/* ============ MAECHULUTION — AI 콘텐츠 자동화 시스템 상세 ============ */

/* hero visual — code → structured content terminal */
.sys-mock {
  width: 100%; max-width: 400px; margin-inline: auto;
  background: #0E1726; border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  box-shadow: var(--shadow-2); overflow: hidden; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.sys-mock .sm-bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sys-mock .sm-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.22); }
.sys-mock .sm-bar i:nth-child(1){ background: #FF5F57; }
.sys-mock .sm-bar i:nth-child(2){ background: #FEBC2E; }
.sys-mock .sm-bar i:nth-child(3){ background: #28C840; }
.sys-mock .sm-bar span { margin-left: .5rem; font-size: .76rem; color: rgba(255,255,255,.45); }
.sys-mock .sm-code { padding: 1rem 1.1rem; font-size: .8rem; line-height: 1.9; }
.sys-mock .sm-code .ln { color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-mock .sm-code .cm { color: #5B6B82; }
.sys-mock .sm-code .kw { color: #5CC8FF; }
.sys-mock .sm-code .st { color: #7DE3A0; }
.sys-mock .sm-code .fn { color: #E0B96B; }
.sys-mock .sm-out { border-top: 1px solid rgba(255,255,255,.08); padding: 1rem 1.1rem; background: rgba(0,183,255,.06); }
.sys-mock .sm-out .ot { display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: var(--blue); font-weight: 700; margin-bottom: .7rem; }
.sys-mock .sm-out .ot svg { width: 14px; height: 14px; }
.sys-mock .sm-doc { display: grid; gap: .45rem; }
.sys-mock .sm-doc .h2tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: #fff; }
.sys-mock .sm-doc .h2tag b { background: var(--blue); padding: .1em .4em; border-radius: 4px; font-size: .64rem; }
.sys-mock .sm-doc i { height: 7px; border-radius: 4px; background: rgba(255,255,255,.13); }
.sys-mock .sm-doc i.w1{ width: 100%; } .sys-mock .sm-doc i.w2{ width: 78%; }
.sys-mock .sm-doc .tbl { display: flex; gap: 4px; margin-top: .2rem; }
.sys-mock .sm-doc .tbl span { flex: 1; height: 18px; border-radius: 4px; background: rgba(0,183,255,.22); }

/* contrast: factory vs hybrid */
.vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem,3vw,2.4rem); align-items: stretch; }
.vs-card { border-radius: var(--radius); padding: clamp(1.6rem,2.8vw,2.3rem); border: 1px solid var(--line); }
.vs-card.bad { background: var(--bg-soft); }
.vs-card.good { background: #fff; border-color: var(--blue); box-shadow: var(--shadow-blue); }
.vs-head { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.2rem; }
.vs-card.bad .vs-head { color: var(--muted); }
.vs-card.good .vs-head { color: var(--blue-700); }
.vs-head .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.vs-card.bad .vs-head .ic { background: rgba(118,124,133,.14); color: var(--muted); }
.vs-card.good .vs-head .ic { background: var(--blue-tint); color: var(--blue-700); }
.vs-head .ic svg { width: 16px; height: 16px; }
.vs-card h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: .7rem; }
.vs-card.bad h3 { color: var(--ink-soft); }
.vs-card p { font-size: .96rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.vs-card.good p { color: var(--ink-soft); }
.vs-card .vs-tag { display: inline-block; margin-top: 1rem; font-size: .8rem; font-weight: 700; padding: .35em .85em; border-radius: 999px; }
.vs-card.bad .vs-tag { background: #FFF0ED; color: #C2683C; }
.vs-card.good .vs-tag { background: var(--blue-tint); color: var(--blue-700); }
.vs-mid { display: grid; place-items: center; color: var(--blue); }
.vs-mid svg { width: 38px; height: 38px; }
@media (max-width: 820px){ .vs-grid { grid-template-columns: 1fr; } .vs-mid svg { transform: rotate(90deg); } }

/* hybrid formula band */
.hybrid {
  margin-top: clamp(2rem,4vw,3rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem;
  background: var(--ink); border-radius: var(--radius); padding: clamp(1.8rem,3.5vw,2.6rem); color: #fff;
}
.hybrid-node { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; min-width: 130px; }
.hybrid-node .hn-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; }
.hybrid-node.ai .hn-ic { background: rgba(0,183,255,.16); color: var(--blue); }
.hybrid-node.human .hn-ic { background: rgba(255,255,255,.1); color: #fff; }
.hybrid-node.result .hn-ic { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.hybrid-node .hn-ic svg { width: 28px; height: 28px; }
.hybrid-node b { font-size: 1rem; font-weight: 700; }
.hybrid-node span { font-size: .82rem; color: rgba(255,255,255,.55); }
.hybrid-op { font-size: 1.8rem; font-weight: 300; color: rgba(255,255,255,.4); }
.hybrid-op.eq { color: var(--blue); }
@media (max-width: 620px){ .hybrid-op { transform: rotate(90deg); } }

/* 4 logic cards */
.logic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,2vw,1.6rem); }
.logic-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.7rem,2.8vw,2.4rem); background: var(--bg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.logic-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: transparent; }
.logic-card .lc-no { position: absolute; top: 1.3rem; right: 1.6rem; font-size: 3.4rem; font-weight: 800; color: var(--bg-soft); line-height: 1; letter-spacing: -0.04em; }
.logic-card .lc-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--blue-tint); color: var(--blue-700); display: grid; place-items: center; margin-bottom: 1.3rem; position: relative; }
.logic-card .lc-ic svg { width: 26px; height: 26px; }
.logic-card .lc-tag { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); }
.logic-card h3 { font-size: 1.26rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.35; margin-top: .5rem; position: relative; }
.logic-card p { margin-top: .8rem; color: var(--muted); line-height: 1.65; text-wrap: pretty; position: relative; }
.logic-card .lc-chips { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .45rem; position: relative; }
.logic-card .lc-chip { font-size: .78rem; font-weight: 700; color: var(--blue-700); background: var(--blue-tint); border-radius: 999px; padding: .35em .8em; }
@media (max-width: 760px){ .logic-grid { grid-template-columns: 1fr; } }

/* dwell prompt mini-visual reused style for inline facts */
.fact-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.fact-pill { font-size: .8rem; font-weight: 700; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: .35em .7em; font-variant-numeric: tabular-nums; }
.fact-pill b { color: var(--blue-700); }

/* results — 10x */
.results-sec { background: var(--ink); color: #fff; }
.results-sec .ds-head h2 { color: #fff; }
.results-sec .ds-head h2 .accent { color: var(--blue); }
.results-sec .ds-head p { color: rgba(255,255,255,.6); }
.res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.6rem); }
.res-card { border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.03); padding: clamp(1.8rem,3vw,2.4rem); text-align: center; transition: transform .4s var(--ease), border-color .4s, background .4s; }
.res-card:hover { transform: translateY(-6px); border-color: rgba(0,183,255,.4); background: rgba(0,183,255,.06); }
.res-card .res-val { font-size: clamp(2.8rem,1.6rem+4vw,4.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.res-card .res-val .u { font-size: .35em; color: #fff; margin-left: .15em; }
.res-card .res-label { margin-top: 1rem; font-weight: 700; font-size: 1.05rem; }
.res-card .res-sub { margin-top: .4rem; color: rgba(255,255,255,.55); font-size: .9rem; }
.res-card .res-dir { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; font-size: .82rem; font-weight: 800; color: var(--blue); }
.res-card .res-dir svg { width: 15px; height: 15px; }
.res-card.down .res-val { color: #9FE0FF; }
@media (max-width: 760px){ .res-grid { grid-template-columns: 1fr; } }