/*
 * 투명 견적 (Transparent Quote) page — scoped under .ohm-tq
 *
 * Design ported from the client-provided "견적서 투명" draft. Every rule is
 * scoped to .ohm-tq and every class is tq- prefixed so nothing leaks into or
 * out of the Astra/Salient theme. Full-bleed reset + fixed-header clearance
 * mirror the other custom pages (see orc-partner-experience.css).
 */

/* ── Full-bleed: strip the Astra content container on this route ── */
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) {
  background: #f7f4ed !important;
}

html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) #content,
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) .site-content {
  padding: 78px 0 0 !important;
  display: block !important;
  background: #f7f4ed !important;
}

html body.admin-bar.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) #content,
html body.admin-bar.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) .site-content {
  padding-top: 110px !important;
}

html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) #page,
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) .site,
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) .site-content > .ast-container,
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) #primary,
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) .content-area,
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) .site-main,
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) article,
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
}

html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) .entry-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
 * WordPress core block-library styles cap direct, non-aligned children of
 * .entry-content at the theme's content width (max-width:1200px; margin:0
 * auto), the same rule that lets `alignwide`/`alignfull` blocks break out.
 * .ohm-tq is that direct child, so it was getting boxed with cream margins
 * on both sides instead of running edge-to-edge. Un-cap it explicitly.
 */
html body.ohm-route-transparency.ohm-global-header-page:not(.wp-admin) .entry-content > .ohm-tq {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* ── Page root / design tokens ── */
.ohm-tq {
  --tq-paper: #f7f4ed;
  --tq-paper-deep: #efeae0;
  --tq-ink: #191813;
  --tq-ink-soft: #3b3930;
  --tq-gray: #6e6a5e;
  --tq-line: #d8d2c4;
  --tq-yellow: #f2b90d;
  --tq-red: #c0452b;
  --tq-serif: "Noto Serif KR", serif;
  --tq-sans: "Noto Sans KR", sans-serif;
  --tq-mono: "IBM Plex Mono", monospace;

  background: var(--tq-paper);
  color: var(--tq-ink);
  font-family: var(--tq-sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.ohm-tq *,
.ohm-tq *::before,
.ohm-tq *::after {
  box-sizing: border-box;
}

/*
 * The standalone draft cleared all default margins with a global `* { margin:0 }`.
 * Inside the theme, Astra's `.entry-content p { margin-bottom:1.6em }` (and heading
 * defaults) leak in and loosen the step/promise lists. Neutralize them here with a
 * selector strong enough to beat Astra, but weaker than the `.ohm-tq .tq-*` rules
 * that set intentional spacing (those are two-class selectors and still win).
 */
html body .ohm-tq :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, figure, blockquote, hr) {
  margin: 0;
  padding: 0;
}

/*
 * Astra's global-styles block sets `h1..h6 { color: var(--ast-global-color-2) }`
 * directly on heading elements. A rule targeting the element itself always wins
 * over inherited color, no matter how low its specificity or how specific the
 * ancestor's color rule is — so headings ignored .tq-promise's white text color
 * and rendered in Astra's dark navy instead. Every heading needs its color set
 * explicitly; inheritance alone is not enough on this theme.
 */
html body .ohm-tq :is(h1, h2, h3, h4, h5, h6) {
  color: var(--tq-ink);
}

html body .ohm-tq .tq-promise :is(h1, h2, h3, h4, h5, h6) {
  color: var(--tq-paper);
}

.ohm-tq img {
  max-width: 100%;
  display: block;
}

.ohm-tq a {
  color: inherit;
  /*
   * Astra's inline global-styles block ships
   * `.ast-single-post .entry-content a { text-decoration: underline }`
   * at (0,3,1) specificity — higher than a plain `.ohm-tq a`. !important
   * is the only way to beat it (same pattern used throughout
   * orc-partner-experience.css to fight the same theme rule).
   */
  text-decoration: none !important;
}

.ohm-tq .tq-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.ohm-tq .tq-mono {
  font-family: var(--tq-mono);
}

.ohm-tq .tq-eyebrow {
  font-family: var(--tq-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--tq-gray);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ohm-tq .tq-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--tq-ink);
}

/* ── Cut-line motif ── */
.ohm-tq .tq-cutline {
  border: none;
  border-top: 1.5px dashed var(--tq-ink);
  position: relative;
  margin: 0;
}

.ohm-tq .tq-cutline::after {
  content: "\2702";
  position: absolute;
  left: 24px;
  top: -11px;
  font-size: 14px;
  background: var(--tq-paper);
  padding: 0 6px;
  color: var(--tq-gray);
}

/* ── Sections ── */
.ohm-tq .tq-section {
  padding: 80px 0;
}

.ohm-tq .tq-sec-head {
  margin-bottom: 48px;
}

.ohm-tq .tq-sec-head h2 {
  font-family: var(--tq-serif);
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.4;
  margin-top: 16px;
  word-break: keep-all;
}

.ohm-tq .tq-sec-head p {
  color: var(--tq-gray);
  margin-top: 12px;
  max-width: 560px;
  word-break: keep-all;
}

/* ── Hero ── */
.ohm-tq .tq-hero {
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}

.ohm-tq .tq-hero .tq-wrap {
  position: relative;
  z-index: 2;
}

.ohm-tq .tq-hero-rev {
  font-family: var(--tq-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--tq-gray);
  margin-bottom: 20px;
}

.ohm-tq .tq-hero-rev b {
  color: var(--tq-ink);
  border: 1px solid var(--tq-ink);
  padding: 3px 8px;
  margin-right: 10px;
  font-weight: 600;
}

.ohm-tq .tq-hero h1 {
  font-family: var(--tq-serif);
  font-weight: 900;
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  word-break: keep-all;
}

.ohm-tq .tq-hero h1 mark {
  background: linear-gradient(transparent 62%, var(--tq-yellow) 62%);
  color: inherit;
  padding: 0 2px;
}

.ohm-tq .tq-lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--tq-ink-soft);
  max-width: 620px;
  word-break: keep-all;
  margin-bottom: 40px;
}

.ohm-tq .tq-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.ohm-tq .tq-btn {
  font-family: var(--tq-mono);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 16px 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.15s, background 0.2s;
}

.ohm-tq .tq-btn-primary {
  background: var(--tq-ink);
  color: var(--tq-paper);
}

.ohm-tq .tq-btn-primary:hover {
  background: var(--tq-ink-soft);
  transform: translateY(-2px);
}

.ohm-tq .tq-btn-ghost {
  border: 1.5px solid var(--tq-ink);
  color: var(--tq-ink);
}

.ohm-tq .tq-btn-ghost:hover {
  background: var(--tq-paper-deep);
  transform: translateY(-2px);
}

.ohm-tq .tq-hero-bg {
  position: absolute;
  right: -60px;
  top: 40px;
  width: 420px;
  height: 420px;
  opacity: 0.1;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--tq-ink) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--tq-ink) 0 1px, transparent 1px 40px);
}

/* ── Problems ── */
.ohm-tq .tq-problems {
  background: var(--tq-paper-deep);
  border-top: 1px solid var(--tq-line);
  border-bottom: 1px solid var(--tq-line);
}

.ohm-tq .tq-prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--tq-line);
  border: 1px solid var(--tq-line);
}

.ohm-tq .tq-prob-card {
  background: var(--tq-paper);
  padding: 36px 28px;
  position: relative;
}

.ohm-tq .tq-prob-card .tq-tag {
  font-family: var(--tq-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--tq-red);
  font-weight: 600;
  margin-bottom: 16px;
  display: block;
}

.ohm-tq .tq-prob-card h3 {
  font-family: var(--tq-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 14px;
  word-break: keep-all;
}

.ohm-tq .tq-prob-card p {
  font-size: 15px;
  color: var(--tq-ink-soft);
  word-break: keep-all;
}

.ohm-tq .tq-prob-card .tq-quote {
  font-family: var(--tq-mono);
  font-size: 13px;
  color: var(--tq-gray);
  background: var(--tq-paper-deep);
  border-left: 3px solid var(--tq-red);
  padding: 10px 14px;
  margin-bottom: 16px;
}

/* ── Solution steps ── */
.ohm-tq .tq-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ohm-tq .tq-step {
  border-top: 3px solid var(--tq-ink);
  padding-top: 24px;
}

.ohm-tq .tq-step .tq-no {
  font-family: var(--tq-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--tq-gray);
  letter-spacing: 0.14em;
}

.ohm-tq .tq-step h3 {
  font-family: var(--tq-serif);
  font-size: 20px;
  font-weight: 700;
  margin: 12px 0;
  word-break: keep-all;
}

.ohm-tq .tq-step p {
  font-size: 15px;
  color: var(--tq-ink-soft);
  word-break: keep-all;
}

.ohm-tq .tq-step h3 em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--tq-yellow) 62%);
}

/* ── Quote-sheet comparison (signature) ── */
.ohm-tq .tq-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 32px;
  align-items: start;
}

.ohm-tq .tq-quote-sheet {
  background: #fffdf8;
  border: 1px solid var(--tq-line);
  box-shadow: 0 2px 0 var(--tq-line);
  padding: 32px 28px;
  font-family: var(--tq-mono);
  position: relative;
}

.ohm-tq .tq-quote-sheet .tq-sheet-label {
  position: absolute;
  top: -13px;
  left: 20px;
  background: var(--tq-ink);
  color: var(--tq-paper);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  font-weight: 600;
}

.ohm-tq .tq-quote-sheet.tq-bad .tq-sheet-label {
  background: var(--tq-red);
}

.ohm-tq .tq-quote-sheet.tq-good {
  border: 1.5px dashed var(--tq-ink);
  box-shadow: 6px 6px 0 var(--tq-yellow);
}

.ohm-tq .tq-quote-sheet h4 {
  font-size: 13px;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--tq-line);
  padding-bottom: 12px;
  margin-bottom: 16px;
  font-weight: 600;
}

.ohm-tq .tq-q-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--tq-line);
  gap: 12px;
}

.ohm-tq .tq-q-row .tq-item {
  color: var(--tq-ink-soft);
}

.ohm-tq .tq-q-row .tq-price {
  font-weight: 600;
  white-space: nowrap;
}

.ohm-tq .tq-q-row.tq-total {
  border-bottom: none;
  border-top: 2px solid var(--tq-ink);
  margin-top: 10px;
  padding-top: 14px;
  font-weight: 600;
  font-size: 15px;
}

.ohm-tq .tq-q-row.tq-muted .tq-item,
.ohm-tq .tq-q-row.tq-muted .tq-price {
  color: #b8b2a2;
}

.ohm-tq .tq-q-note {
  font-size: 12px;
  color: var(--tq-gray);
  margin-top: 16px;
  line-height: 1.8;
}

.ohm-tq .tq-q-note.tq-warn {
  color: var(--tq-red);
}

.ohm-tq .tq-q-group {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--tq-gray);
  margin: 18px 0 4px;
  font-weight: 600;
}

.ohm-tq .tq-q-group:first-of-type {
  margin-top: 0;
}

.ohm-tq .tq-zero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tq-mono);
  font-size: 12px;
  font-weight: 600;
  background: var(--tq-yellow);
  padding: 6px 12px;
  margin-top: 20px;
}

/* ── Promise (dark) ── */
.ohm-tq .tq-promise {
  background: var(--tq-ink);
  color: var(--tq-paper);
}

.ohm-tq .tq-promise .tq-eyebrow {
  color: #a9a493;
}

.ohm-tq .tq-promise .tq-eyebrow::before {
  background: var(--tq-yellow);
}

.ohm-tq .tq-promise h2 {
  font-family: var(--tq-serif);
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 34px);
  margin-top: 16px;
  word-break: keep-all;
  line-height: 1.4;
}

.ohm-tq .tq-promise-list {
  margin-top: 44px;
  display: grid;
  gap: 0;
  border-top: 1px solid #3b3930;
}

.ohm-tq .tq-promise-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid #3b3930;
  align-items: baseline;
}

.ohm-tq .tq-promise-item .tq-p-no {
  font-family: var(--tq-mono);
  font-size: 14px;
  color: var(--tq-yellow);
  font-weight: 600;
}

.ohm-tq .tq-promise-item h3 {
  font-family: var(--tq-serif);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  word-break: keep-all;
}

.ohm-tq .tq-promise-item p {
  color: #c9c4b4;
  font-size: 15px;
  word-break: keep-all;
  max-width: 560px;
}

/*
 * ── Final CTA (light — same paper background as the rest of the page) ──
 * Stacking this directly under the dark PROMISE section on a dark
 * background made the two blocks merge into one undifferentiated slab.
 * Staying on the page's own paper background keeps a clean boundary
 * against PROMISE above it, matching the original draft.
 *
 * The buttons still reuse the site's `.ohm-contact-channel` card markup
 * (icon badges, arrow, layout) for UI consistency with other pages, but
 * that component's text/border colors are white-on-dark by design — every
 * one of them needs a light-bg override below, each prefixed
 * `html body:not(.wp-admin) .ohm-tq ...` to out-specify the site's own
 * `html body:not(.wp-admin) .ohm-contact-channel ...` rules (elements +
 * :not() give those more weight than a plain class-based override would).
 */
.ohm-tq .tq-final-cta {
  text-align: center;
  padding: 96px 0;
}

.ohm-tq .tq-final-cta h2 {
  font-family: var(--tq-serif);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.45;
  word-break: keep-all;
  margin-bottom: 20px;
}

.ohm-tq .tq-final-cta h2 mark {
  background: linear-gradient(transparent 62%, var(--tq-yellow) 62%);
  color: var(--tq-ink);
}

.ohm-tq .tq-final-cta p {
  color: var(--tq-ink-soft);
  max-width: 520px;
  margin: 0 auto 40px;
  word-break: keep-all;
}

.ohm-tq .ohm-contact-channels {
  margin-top: 8px;
}

html body:not(.wp-admin) .ohm-tq .ohm-contact-channel {
  border: 1.5px solid var(--tq-ink) !important;
  background: var(--tq-paper) !important;
}

html body:not(.wp-admin) .ohm-tq .ohm-contact-channel strong {
  color: var(--tq-ink) !important;
}

html body:not(.wp-admin) .ohm-tq .ohm-contact-channel span {
  color: var(--tq-ink-soft) !important;
}

/* Icon badge fill: the site has two conflicting rules for the Kakao icon
   (#171511 in one place, #FFFFFF in another); the white one wins sitewide,
   which is illegible on the badge's own yellow (#FEE500) circle regardless
   of page background. Force the recognizable dark-on-yellow Kakao mark. */
html body:not(.wp-admin) .ohm-tq .ohm-contact-channel-title-badge--kakao .ohm-kakao-bubble-icon,
html body:not(.wp-admin) .ohm-tq .ohm-contact-channel-title-badge--kakao .ohm-kakao-bubble-icon path {
  fill: #171511 !important;
  color: #171511 !important;
}

/* `em` is the "카카오톡으로 견적서 보내기 →" / phone number line — the site
   styles it as plain yellow text, illegible on paper. Turn it into the same
   solid/outline button pair the rest of this page already uses. */
html body:not(.wp-admin) .ohm-tq .ohm-contact-channel em {
  border-radius: 0 !important;
  font-family: var(--tq-mono) !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
}

html body:not(.wp-admin) .ohm-tq .ohm-contact-channel--kakao em {
  background: var(--tq-ink) !important;
  color: var(--tq-paper) !important;
}

html body:not(.wp-admin) .ohm-tq .ohm-contact-channel--phone em {
  border: 1.5px solid var(--tq-ink) !important;
  color: var(--tq-ink) !important;
}

.ohm-tq .tq-final-cta .tq-cta-sub {
  font-family: var(--tq-mono);
  font-size: 12px;
  color: var(--tq-gray);
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--tq-line);
  letter-spacing: 0.06em;
  line-height: 1.9;
}

/*
 * ── Reveal (accessible: hidden only after JS arms the page) ──
 * Opacity-only: a translateY component here could overlap the moment a
 * webfont (Noto Serif KR) swaps in mid-transition on first load, producing
 * a brief double-exposure ghost on headings. Fading alone avoids that.
 */
.ohm-tq.tq-armed .tq-reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ohm-tq.tq-armed .tq-reveal.tq-on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ohm-tq.tq-armed .tq-reveal {
    opacity: 1;
    transition: none;
  }
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .ohm-tq .tq-prob-grid {
    grid-template-columns: 1fr;
  }
  .ohm-tq .tq-compare-grid {
    grid-template-columns: 1fr;
  }
  .ohm-tq .tq-steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ohm-tq .tq-hero {
    padding: 56px 0 48px;
  }
  .ohm-tq .tq-section {
    padding: 64px 0;
  }
}