/* 홈 #sketchup2025 섹션(2027 신규기능) 스타일.
   - 아래 본문은 전달받은 common/sketchup.css 원본이며, 테마(Extra/NewSlate) CSS 보다 우선하도록
     모든 선택자 앞에 '#sketchup2025 ' 만 덧붙였습니다. (그 외 내용은 원본과 동일)
   - 맨 아래 '테마 연동 보정' 블록은 이 사이트에서만 필요한 추가 규칙입니다. */
/* SketchUp Pro detail page — every rule is scoped to #sketchup2025 .sketchup_detail_container.
   Same system as common/tekla.css:
   - fluid sizes follow the CONTAINER width (--sk-w): min @360px → Figma value @836px (design width)
   - mobile layout when the container is ≤ 764px (@container), with a 1200px @media fallback
     for browsers without container queries (≈ 764px column on the site: 400px right column + 36px gap) */
  @property --sk-w { syntax: '<length>'; inherits: true; initial-value: 836px; }

  #sketchup2025 .sketchup_detail_container {
    --dark-blue: #003054;
    --primary: #0063a3;
    --primary-pale: #dcedf9;
    --accent: #6a6e79;
    --secondary: #fbad26;
    --amber: #fec157;
    --neutral: #f5f5f8;
    --base-page: #fbfbfb;
    --gray-50: #cbcdd6;
    --ink: #171c1e;
    --ink-2: #0d1b2a;
    --sky: #019aeb;
  }
  #sketchup2025 .sketchup_detail_container > * {
    --sk-w: min(100vw, 836px);  /* fallback for browsers without container units */
    --layout: desktop;
    --inner-max: 1200px;  /* max width of each section's content (.sec-inner) */
    /* ---- type scale: 10 sizes only. PC value at 836px+ → mobile value at 360px, fluid in between.
       Tags carry them: h1–h6 and p; .lead / .small / .caption for text that isn't body size. ---- */
    --fs-h1: clamp(32px, 32px + 20 * (var(--sk-w) - 360px) / 476, 52px);       /* page title (hero) */
    --fs-h2: clamp(26px, 26px + 14 * (var(--sk-w) - 360px) / 476, 40px);       /* section titles */
    --fs-h3: clamp(22px, 22px + 10 * (var(--sk-w) - 360px) / 476, 32px);       /* large card titles */
    --fs-h4: clamp(20px, 20px + 8 * (var(--sk-w) - 360px) / 476, 28px);        /* card titles */
    --fs-h5: clamp(18px, 18px + 6 * (var(--sk-w) - 360px) / 476, 24px);        /* sub-titles, kicker */
    --fs-h6: clamp(16px, 16px + 4 * (var(--sk-w) - 360px) / 476, 20px);        /* small titles, buttons, table labels */
    --fs-lead: clamp(17px, 17px + 5 * (var(--sk-w) - 360px) / 476, 22px);      /* intro / emphasised paragraphs (.lead) */
    --fs-body: clamp(15px, 15px + 3 * (var(--sk-w) - 360px) / 476, 18px);      /* body text (p) */
    --fs-small: clamp(14px, 14px + 2 * (var(--sk-w) - 360px) / 476, 16px);     /* secondary text (.small) */
    --fs-caption: clamp(13px, 13px + 1 * (var(--sk-w) - 360px) / 476, 14px);   /* chips, labels, notes (.caption) */
    /* line heights: headings stay tight; text loosens on wide layouts and tightens on mobile */
    --lh-heading: 1.2;
    --lh-subhead: 1.3;
    --lh-text: 1.4;
    --lh-ui: 1.2;
    --pad-120: clamp(64px, 64px + 56 * (var(--sk-w) - 360px) / 476, 120px);
    --pad-80: clamp(48px, 48px + 32 * (var(--sk-w) - 360px) / 476, 80px);
    --pad-64: clamp(40px, 40px + 24 * (var(--sk-w) - 360px) / 476, 64px);
    --px-40: clamp(16px, 16px + 24 * (var(--sk-w) - 360px) / 476, 40px);
    --px-30: clamp(16px, 16px + 14 * (var(--sk-w) - 360px) / 476, 30px);
    --gap-64: clamp(40px, 40px + 24 * (var(--sk-w) - 360px) / 476, 64px);
    --gap-32: clamp(20px, 20px + 12 * (var(--sk-w) - 360px) / 476, 32px);
    --gap-24: clamp(16px, 16px + 8 * (var(--sk-w) - 360px) / 476, 24px);
    --sec-gap: clamp(16px, 16px + 8 * (var(--sk-w) - 360px) / 476, 24px);
    --card-30: clamp(20px, 20px + 10 * (var(--sk-w) - 360px) / 476, 30px);
    --card-24: clamp(18px, 18px + 6 * (var(--sk-w) - 360px) / 476, 24px);
    --p-20: clamp(16px, 16px + 4 * (var(--sk-w) - 360px) / 476, 20px);
    --p-32: clamp(20px, 20px + 12 * (var(--sk-w) - 360px) / 476, 32px);
    --r16: clamp(8px, 8px + 8 * (var(--sk-w) - 360px) / 476, 16px);
    --r24: clamp(12px, 12px + 12 * (var(--sk-w) - 360px) / 476, 24px);
    --r40: clamp(24px, 24px + 16 * (var(--sk-w) - 360px) / 476, 40px);
    --r12: clamp(8px, 8px + 4 * (var(--sk-w) - 360px) / 476, 12px);
    --why-icon: clamp(120px, 120px + 76 * (var(--sk-w) - 360px) / 476, 196px);
    --eco-icon: clamp(52px, 52px + 18 * (var(--sk-w) - 360px) / 476, 70px);
    --closing-h: clamp(260px, 260px + 277 * (var(--sk-w) - 360px) / 476, 537px);
    --logo-w: clamp(220px, 220px + 134 * (var(--sk-w) - 360px) / 476, 354px);
  }
  #sketchup2025 .sketchup_detail_container, #sketchup2025 .sketchup_detail_container * { box-sizing: border-box; margin: 0; padding: 0; }
  #sketchup2025 .sketchup_detail_container {
    width: 100%;  /* must be definite: the block sizes its contents from its own width (container), and the store's wrapper would otherwise shrink it to 0 */
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--ink);
    font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
    word-break: keep-all;
    -webkit-text-size-adjust: 100%;
    container: sketchup / inline-size;
  }
  #sketchup2025 .sketchup_detail_container > * + * { margin-top: var(--sec-gap); }
  @supports (width: 1cqw) {
    #sketchup2025 .sketchup_detail_container > * { --sk-w: 100cqw; }
  }
  #sketchup2025 .sketchup_detail_container img { display: block; max-width: 100%; }
  #sketchup2025 .sketchup_detail_container ul, #sketchup2025 .sketchup_detail_container ol { list-style: none; }
  #sketchup2025 .sketchup_detail_container .section { border-radius: var(--r16); overflow: hidden; }
  /* full-width use (detail ≥ 1400px, e.g. a page without the right column): square section edges */
  @container sketchup (min-width: 1400px) {
    #sketchup2025 .sketchup_detail_container .section { border-radius: 0; }
  }
  /* section background spans the full width; its content is capped at 1000px and centred.
     .sec-inner takes over the section's own flex layout (direction / alignment / gap). */
  #sketchup2025 .sketchup_detail_container section > .sec-inner {
    display: inherit; flex-direction: inherit; flex-wrap: inherit;
    align-items: inherit; justify-content: inherit; gap: inherit;
    width: 100%; max-width: var(--inner-max); margin-left: auto; margin-right: auto;
  }
  /* ---- typography by tag (sizes from the type scale above) ---- */
  #sketchup2025 .sketchup_detail_container h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: 600; color: var(--dark-blue); text-align:center; }
  #sketchup2025 .sketchup_detail_container h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: 600; color: var(--dark-blue); }
  #sketchup2025 .sketchup_detail_container h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: 600; }
  #sketchup2025 .sketchup_detail_container h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: 600; }
  #sketchup2025 .sketchup_detail_container h5 { font-size: var(--fs-h5); line-height: var(--lh-subhead); font-weight: 600; }
  #sketchup2025 .sketchup_detail_container h6 { font-size: var(--fs-h6); line-height: var(--lh-subhead); font-weight: 600; }
  #sketchup2025 .sketchup_detail_container p { font-size: var(--fs-body); line-height: var(--lh-text); }
  #sketchup2025 .sketchup_detail_container .lead { font-size: var(--fs-lead); line-height: var(--lh-text); }
  #sketchup2025 .sketchup_detail_container .small { font-size: var(--fs-small); line-height: var(--lh-text); }
  #sketchup2025 .sketchup_detail_container .caption { font-size: var(--fs-caption); line-height: var(--lh-ui); }
  #sketchup2025 .sketchup_detail_container h1 .light, #sketchup2025 .sketchup_detail_container h2 .light { font-weight: 500; }
  /* inline text keeps its parent's line height, baseline and inline display — the host site's CSS gives
     b/span/br… their own line-height (1.5), vertical-align: middle and (span/strong/em…) inline-block,
     which pulls heading lines apart. :where() keeps this at class level, so component rules still win. */
  #sketchup2025 .sketchup_detail_container :where(span, b, strong, em, i, small, a, br, cite, q, label, code, del, ins, dfn) { line-height: inherit; vertical-align: baseline; }
  #sketchup2025 .sketchup_detail_container :where(span, strong, em, cite, q, label, code, del, ins, dfn) { display: inline; }
  #sketchup2025 .sketchup_detail_container .kicker {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 26px 7px; border-radius: 500px; background: var(--amber);
    font-size: var(--fs-h5); font-weight: 600; line-height: var(--lh-ui); letter-spacing: -0.027em; color: var(--dark-blue);
  }

  /* 1. Hero */
  #sketchup2025 .sketchup_detail_container .hero { background: #f5fbff; padding: var(--pad-120) var(--px-40); display: flex; flex-direction: column; gap: var(--gap-32); }
  #sketchup2025 .sketchup_detail_container .hero-head { display: flex; flex-direction: column; align-items: center; gap: var(--gap-24); text-align: center; }
  #sketchup2025 .sketchup_detail_container .hero h1 { letter-spacing: -1px; }
  #sketchup2025 .sketchup_detail_container .hero-sub { letter-spacing: -0.5px; color: var(--accent); font-weight: 500; }
  #sketchup2025 .sketchup_detail_container .hero-sub b { font-weight: 600; }
  #sketchup2025 .sketchup_detail_container .steps { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 0; }
  #sketchup2025 .sketchup_detail_container .step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  /* step box = CSS (sky-blue rounded square); the line drawing inside is the SVG.
     Fits its column exactly (179px max), on PC and in the 2 × 2 mobile grid */
  #sketchup2025 .sketchup_detail_container .step-box {
    flex: none; width: min(179px, 100%); aspect-ratio: 1 / 1;
    border-radius: 22.35%;            /* 40 / 179 — scales with the box */
    background: var(--primary-pale); overflow: hidden;
  }
  #sketchup2025 .sketchup_detail_container .step-box img { width: 100%; height: 100%; }
  #sketchup2025 .sketchup_detail_container .step .t { color: #000; }
  #sketchup2025 .sketchup_detail_container .step .s { font-weight: 500; line-height: var(--lh-subhead); letter-spacing: -0.48px; color: var(--accent); margin-top: 4px; }
  #sketchup2025 .sketchup_detail_container .steps .arrow { width: 24px; height: 95px; flex: none; }

  /* 2. Pain points */
  #sketchup2025 .sketchup_detail_container .pains { background: var(--base-page); padding: var(--pad-120) var(--px-30); display: flex; flex-direction: column; align-items: center; gap: var(--gap-64); }
  #sketchup2025 .sketchup_detail_container .pains h2 { text-align: center; }
  #sketchup2025 .sketchup_detail_container .hooks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
  #sketchup2025 .sketchup_detail_container .hook { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  #sketchup2025 .sketchup_detail_container .hook-card {
    background: #fff; border: 1px solid var(--gray-50); border-radius: 16px; overflow: hidden;
    padding: 16px 0 0 16px; display: flex; flex-direction: column; isolation: isolate;
  }
  #sketchup2025 .sketchup_detail_container .hook-q { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin-bottom: -20px; font-weight: 500; }
  #sketchup2025 .sketchup_detail_container .hook-q .q { line-height: var(--lh-subhead); letter-spacing: -0.5px; color: var(--ink-2); }
  #sketchup2025 .sketchup_detail_container .hook-q .who { letter-spacing: -0.48px; color: var(--secondary); }
  #sketchup2025 .sketchup_detail_container .hook-img { position: relative; z-index: 1; aspect-ratio: 248 / 144; overflow: hidden; mix-blend-mode: multiply; }
  #sketchup2025 .sketchup_detail_container .hook-img img { position: absolute; max-width: none; }
  #sketchup2025 .sketchup_detail_container .hook-a { padding: 0 3px 24px 3px; letter-spacing: -0.48px; color: var(--dark-blue); font-weight: 500; }
  #sketchup2025 .sketchup_detail_container .hook-a b { font-weight: 600; }

  /* 3. Why SketchUp */
  #sketchup2025 .sketchup_detail_container .why { padding-top: var(--pad-120); display: flex; flex-direction: column; gap: var(--gap-64); }
  #sketchup2025 .sketchup_detail_container .why h2 { text-align: center; }
  /* carousel title row: title + prev/next buttons (buttons only in the wide swipe layout) */
  #sketchup2025 .sketchup_detail_container .carousel-nav { display: none; gap: 12px; flex: none; }
  #sketchup2025 .sketchup_detail_container .carousel-btn {
    width: 48px; height: 48px; border: 0; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(23, 28, 30, 0.1); color: #5c5f66; cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  #sketchup2025 .sketchup_detail_container .carousel-btn svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  #sketchup2025 .sketchup_detail_container .carousel-btn:hover { background: rgba(23, 28, 30, 0.16); }
  #sketchup2025 .sketchup_detail_container .carousel-btn:focus-visible { outline: 2px solid var(--dark-blue); outline-offset: 2px; }
  #sketchup2025 .sketchup_detail_container .carousel-btn:disabled { background: rgba(23, 28, 30, 0.04); color: #b9bbc1; cursor: default; }
  @container sketchup (min-width: 1200px) {
    #sketchup2025 .sketchup_detail_container .carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    #sketchup2025 .sketchup_detail_container .carousel-nav { display: flex; }
  }
  #sketchup2025 .sketchup_detail_container .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #sketchup2025 .sketchup_detail_container .why-card { background: var(--neutral); border-radius: var(--r24); padding: var(--card-30); display: flex; flex-direction: column; gap: 16px; }
  #sketchup2025 .sketchup_detail_container .why-card .icon { height: var(--why-icon); display: flex; align-items: center; }
  #sketchup2025 .sketchup_detail_container .why-card .icon img { height: 100%; width: auto; max-width: none; }
  #sketchup2025 .sketchup_detail_container .why-card .t { color: var(--dark-blue); }
  #sketchup2025 .sketchup_detail_container .why-card .d { font-size: var(--fs-h6); font-weight: 500; letter-spacing: -0.48px; color: var(--accent); margin-top: 16px; }
  /* wide detail page (≥ 1200px): title left, cards in one row (400px each) that swipes sideways.
     The row spans the full page width (cards stay visible to both edges while swiping) but starts
     and snaps in line with the content edge. */
  @container sketchup (min-width: 1200px) {
    #sketchup2025 .sketchup_detail_container .why { padding-bottom: var(--pad-120); }
    #sketchup2025 .sketchup_detail_container .why h2 { text-align: left; }
    #sketchup2025 .sketchup_detail_container .why-grid {
      display: flex; gap: 24px;
      /* bleed to both page edges; the padding / scroll-padding keep the cards lined up with the content */
      --bleed: calc((100cqw - min(100cqw, var(--inner-max))) / 2);  /* gap between content and page edge */
      margin-left: calc(-1 * var(--bleed)); margin-right: calc(-1 * var(--bleed));
      padding-left: var(--bleed); padding-right: var(--bleed); scroll-padding-left: var(--bleed);
      overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
      scrollbar-width: none; -webkit-user-select: none; user-select: none;
    }
    #sketchup2025 .sketchup_detail_container .why-grid::-webkit-scrollbar { display: none; }
    #sketchup2025 .sketchup_detail_container .why-grid.is-dragging { scroll-snap-type: none; }
    #sketchup2025 .sketchup_detail_container .why-card { flex: 0 0 400px; scroll-snap-align: start; }
    #sketchup2025 .sketchup_detail_container .why-card img { -webkit-user-drag: none; pointer-events: none; }
  }

  /* 4. New features */
  #sketchup2025 .sketchup_detail_container .news { background: var(--primary-pale); padding: var(--pad-120) var(--px-30) var(--px-30);  /* bottom = side padding below 1400px */ display: flex; flex-direction: column; gap: var(--gap-64); }
  @container sketchup (min-width: 1400px) {
    #sketchup2025 .sketchup_detail_container .news { padding-bottom: var(--pad-120); }
  }
  #sketchup2025 .sketchup_detail_container .news-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  #sketchup2025 .sketchup_detail_container .news-head .kicker { background: var(--secondary); }
  #sketchup2025 .sketchup_detail_container .news-head .lead { letter-spacing: -0.5px; color: var(--accent); font-weight: 500; }
  #sketchup2025 .sketchup_detail_container .news-head .lead b { font-weight: 600; }
  #sketchup2025 .sketchup_detail_container .btn.btn-sky { background: var(--sky); }  /* #019aeb */
  #sketchup2025 .sketchup_detail_container .btn-row { align-self: stretch; display: flex; flex-wrap: wrap; gap: 8px; margin-top:8px; }
  #sketchup2025 .sketchup_detail_container .news-block { display: flex; flex-direction: column; gap: 24px; }
  #sketchup2025 .sketchup_detail_container .news-list { display: flex; flex-direction: column; gap: 16px; }
  #sketchup2025 .sketchup_detail_container .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  #sketchup2025 .sketchup_detail_container .chips li { border: 1px solid currentColor; border-radius: 500px; padding: 4px 8px; font-size: var(--fs-caption); font-weight: 500; line-height: var(--lh-ui); white-space: nowrap; letter-spacing:0; }
  #sketchup2025 .sketchup_detail_container .improve-card {
    position: relative; overflow: hidden; border-radius: var(--r12);
    display: flex; flex-direction: column; justify-content: flex-end;
    aspect-ratio: 776 / 227; min-height: 170px;
  }
  #sketchup2025 .sketchup_detail_container .improve-card.is-lead { aspect-ratio: 16 / 9; }
  /* hover/tap makes a card the lead (big) one. aspect-ratio can't animate, so where container
     units exist the height is computed from the list width instead and transitions smoothly. */
  @supports (container-type: inline-size) {
    #sketchup2025 .sketchup_detail_container .news-list { container-type: inline-size; }
    #sketchup2025 .sketchup_detail_container .improve-card {
      --ratio: calc(227 / 776);
      aspect-ratio: auto; height: max(var(--min-h, 216px), 100cqw * var(--ratio));  /* --min-h: collapsed height that fits the text */
      min-height: min-content;  /* never shorter than its text (card grows instead of clipping) */
      transition: height 0.5s ease;
    }
    /* min-content would make a growing card jump straight to its end height; the lead card is
       always tall enough for its text, so it doesn't need it and grows smoothly */
    #sketchup2025 .sketchup_detail_container .improve-card.is-lead { --ratio: calc(9 / 16); min-height: 0; }
    /* new-feature cards carry an extra chip row: collapsed height that already fits the text */
  }
  /* image fitted to the card WIDTH and centred (center center): opening/closing a card only reveals
     more or less of it (no zoom). Only if the card gets taller than the image itself does it scale
     up to cover, still centred. */
  #sketchup2025 .sketchup_detail_container .improve-card > img,
  #sketchup2025 .sketchup_detail_container .improve-card > video {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: center center;
  }
  /* embedded video (Vimeo iframe, 16:9) — same behaviour: card width, centred, grows to cover only when
     the card is taller than the video. The image underneath shows until the player loads. */
  #sketchup2025 .sketchup_detail_container .improve-card > .card-video {
    /* video ratio: 16:9 by default, or set per card with style="--vw: 426; --vh: 230;" */
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); aspect-ratio: var(--vw, 16) / var(--vh, 9); width: auto;
    height: 100%; height: max(100%, 100cqw * var(--vh, 9) / var(--vw, 16));  /* 100cqw = card width (the list is the container) */
    overflow: hidden; pointer-events: none;
    opacity: 0; transition: opacity 0.6s ease;  /* shown once the player is actually playing (script) */
  }
  #sketchup2025 .sketchup_detail_container .improve-card > .card-video.is-playing { opacity: 1; }
  #sketchup2025 .sketchup_detail_container .improve-card > .card-video iframe { display: block; width: 100%; height: 100%; border: 0; }
  /* per-card media anchor: add .media-top-left to a card to pin its image/video to the top-left instead of the centre */
  #sketchup2025 .sketchup_detail_container .improve-card.media-top-left > img,
  #sketchup2025 .sketchup_detail_container .improve-card.media-top-left > video,
  #sketchup2025 .sketchup_detail_container .improve-card.media-top-left > .card-video { left: 0; top: 0; transform: none; object-position: left top; }
  /* wide detail page (≥ 1200px): improvement cards in one 4:3 row that swipes sideways like the
     why cards (full page width, snapping in line with the content; no lead/size change) */
  @container sketchup (min-width: 1200px) {
    #sketchup2025 .sketchup_detail_container .improve-list {
      flex-direction: row; gap: 24px;
      /* gap between content and page edge (news section has --px-30 side padding) */
      --bleed: calc((var(--sk-w) - min(var(--sk-w) - 2 * var(--px-30), var(--inner-max))) / 2);
      margin-left: calc(-1 * var(--bleed)); margin-right: calc(-1 * var(--bleed));
      padding-left: var(--bleed); padding-right: var(--bleed); scroll-padding-left: var(--bleed);
      overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
      scrollbar-width: none; -webkit-user-select: none; user-select: none;
    }
    #sketchup2025 .sketchup_detail_container .improve-list::-webkit-scrollbar { display: none; }
    #sketchup2025 .sketchup_detail_container .improve-list.is-dragging { scroll-snap-type: none; }
    #sketchup2025 .sketchup_detail_container .improve-card,
    #sketchup2025 .sketchup_detail_container .improve-card.is-lead {
      flex: 0 0 560px; aspect-ratio: auto; height: auto; min-height: 420px;  /* 4:3 */
      transition: none; scroll-snap-align: start;
    }
    #sketchup2025 .sketchup_detail_container .improve-card > img,
    #sketchup2025 .sketchup_detail_container .improve-card > video { -webkit-user-drag: none; pointer-events: none; }
    #sketchup2025 .sketchup_detail_container .improve-card > .card-video { height: 100%; }  /* fixed 560px cards here: cover by height */
  }
  #sketchup2025 .sketchup_detail_container .improve-text {
    position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
    padding: var(--pad-64, 40px) var(--p-32);
    background: linear-gradient(179.87deg, rgba(0, 48, 84, 0) 0.163%, rgba(0, 48, 84, 0.15) 23.165%, #003054 99.837%);
    color: #fff;
  }
  #sketchup2025 .sketchup_detail_container .improve-text { padding-top: 40px; padding-bottom: 40px; }
  #sketchup2025 .sketchup_detail_container .improve-text .chip { align-self: flex-start; background: #fff; color: var(--primary); border-radius: 50px; padding: 4px 12px; font-size: var(--fs-caption); font-weight: 600; line-height: var(--lh-ui); }
  #sketchup2025 .sketchup_detail_container .improve-text .t { letter-spacing: -0.8px; }
  #sketchup2025 .sketchup_detail_container .improve-text .d { font-weight: 500; letter-spacing: -0.48px; max-width: 344px; }
  #sketchup2025 .sketchup_detail_container .improve-text .chips { margin-top: 6px; }
  #sketchup2025 .sketchup_detail_container .improve-text .chips li { color: var(--primary-pale); }

  /* 5. Included products */
  #sketchup2025 .sketchup_detail_container .products { padding-top: var(--pad-80); display: flex; flex-direction: column; gap: var(--gap-32); }
  #sketchup2025 .sketchup_detail_container .products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }  /* rows size to content (Figma fixed 583px made "Extension Warehouse" overflow) */
  #sketchup2025 .sketchup_detail_container .product { background: var(--neutral); border-radius: var(--r24); padding: var(--card-24); display: flex; flex-direction: column; gap: 16px; }
  #sketchup2025 .sketchup_detail_container .product img { width: var(--eco-icon); height: var(--eco-icon); }
  #sketchup2025 .sketchup_detail_container .product .n { color: var(--dark-blue); }
  #sketchup2025 .sketchup_detail_container .product .d { font-weight: 500; line-height: var(--lh-subhead); color: var(--accent); margin-top: 4px; }

  /* 6. Plan comparison */
  #sketchup2025 .sketchup_detail_container .plans { padding-top: var(--pad-80); display: flex; flex-direction: column; gap: var(--gap-32); }
  /* the table is 16px wider than its box (border-spacing gutters); clip that empty strip so it can't overflow */
  #sketchup2025 .sketchup_detail_container .compare-scroll { overflow: hidden; }
  #sketchup2025 .sketchup_detail_container .compare-table { border-collapse: separate; border-spacing: 8px 0; margin: 0 -8px; width: calc(100% + 16px); }
  #sketchup2025 .sketchup_detail_container .compare-table th, #sketchup2025 .sketchup_detail_container .compare-table td { text-align: left; vertical-align: middle; }
  #sketchup2025 .sketchup_detail_container .compare-table thead th {
    position: relative; border-top: 1px solid var(--ink); padding: 8px 0; vertical-align: top;
    font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-subhead); letter-spacing: -0.5px; color: var(--accent); white-space: nowrap; min-width: 80px;
  }
  #sketchup2025 .sketchup_detail_container .compare-table thead th:not(:last-child)::after { content: ""; position: absolute; top: -1px; right: -8px; width: 8px; border-top: 1px solid var(--ink); }
  #sketchup2025 .sketchup_detail_container .compare-table thead th:first-child { color: var(--ink); line-height: normal; }
  #sketchup2025 .sketchup_detail_container .compare-table thead th small { display: block; font-size: var(--fs-caption); font-weight: 400; }
  #sketchup2025 .sketchup_detail_container .compare-table .col { width: 110px; text-align: center; }
  #sketchup2025 .sketchup_detail_container .compare-table .is-pro { background: var(--primary-pale); color: var(--primary); }
  #sketchup2025 .sketchup_detail_container .compare-table tbody td { border-top: 1px solid rgba(0, 0, 0, 0.2); padding: 8px 12px 8px 0; }
  #sketchup2025 .sketchup_detail_container .compare-table tbody td.col { padding: 8px 0; font-size: var(--fs-small); font-weight: 600; line-height: var(--lh-subhead); letter-spacing: -0.32px; color: var(--gray-50); }
  #sketchup2025 .sketchup_detail_container .compare-table tbody td.col.is-pro { color: var(--primary); }
  #sketchup2025 .sketchup_detail_container .feat { display: flex; align-items: center; gap: 10px; }
  #sketchup2025 .sketchup_detail_container .feat .txt b { display: block; font-size: var(--fs-h6); font-weight: 600; line-height: var(--lh-subhead); }
  #sketchup2025 .sketchup_detail_container .feat .txt span { display: block; font-size: var(--fs-caption); font-weight: 500; line-height: var(--lh-subhead); }
  #sketchup2025 .sketchup_detail_container .badge { flex: none; border: 1.556px solid var(--primary); border-radius: 38.889px; padding: 4px 10px; font-size: var(--fs-small); font-weight: 600; line-height: var(--lh-text); color: var(--primary); white-space: nowrap; }
  #sketchup2025 .sketchup_detail_container .dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--gray-50); vertical-align: middle; }
  #sketchup2025 .sketchup_detail_container .is-pro .dot { background: var(--primary); }
  #sketchup2025 .sketchup_detail_container .dash { display: inline-block; width: 16px; border-top: 1px solid var(--gray-50); vertical-align: middle; }
  #sketchup2025 .sketchup_detail_container .is-pro .dash { border-top-color: var(--primary); }
  #sketchup2025 .sketchup_detail_container .plans .note { font-weight: 400; color: var(--accent); }

  /* 7–8. Key/value tables (file formats, system requirements) */
  #sketchup2025 .sketchup_detail_container .kv { padding-top: var(--pad-80); display: flex; flex-direction: column; gap: var(--gap-32); }
  #sketchup2025 .sketchup_detail_container .kv.sysreq { padding-bottom: var(--pad-80); }
  #sketchup2025 .sketchup_detail_container .kv-row { display: flex; align-items: flex-start; border-top: 1px solid var(--gray-50); padding: 4px 0; }
  #sketchup2025 .sketchup_detail_container .kv-row p { font-size: var(--fs-h6); line-height: var(--lh-subhead); }
  #sketchup2025 .sketchup_detail_container .kv-row .k { flex: none; width: 176px; padding: 12px 0; font-weight: 600; color: var(--dark-blue); white-space: nowrap; }
  #sketchup2025 .sketchup_detail_container .kv-row .v { flex: 1 1 auto; min-width: 0; padding: 12px 0; color: var(--accent); font-weight: 400; }
  #sketchup2025 .sketchup_detail_container .kv-row .v.regular { font-weight: 400; }
  #sketchup2025 .sketchup_detail_container .export-line { display: grid; grid-template-columns: 2.4em 1fr; }
  #sketchup2025 .sketchup_detail_container .export-line + .export-line { margin-top: 12px; }
  #sketchup2025 .sketchup_detail_container .export-line b { font-weight: 600; }
  #sketchup2025 .sketchup_detail_container .export-line span { font-weight: 400; }
  #sketchup2025 .sketchup_detail_container .kv .note { font-weight: 400; color: var(--accent); }

  /* 9. Notice */
  #sketchup2025 .sketchup_detail_container .notice { background: var(--neutral); padding: var(--pad-64) var(--px-40); display: flex; flex-direction: column; align-items: center; gap: 32px; }
  #sketchup2025 .sketchup_detail_container .notice-cols { display: flex; gap: 40px; width: 100%; }
  #sketchup2025 .sketchup_detail_container .notice-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
  #sketchup2025 .sketchup_detail_container .notice-col .t { letter-spacing: -0.24px; color: var(--ink); }
  #sketchup2025 .sketchup_detail_container .notice-col .rule { width: 20px; border-top: 2px solid var(--accent); }
  #sketchup2025 .sketchup_detail_container .notice-col ol { list-style: decimal outside; padding-left: 0.87em; /* numbers ("1. " ≈ 0.87em wide) line up with the title */ font-size: var(--fs-body); line-height: var(--lh-text); letter-spacing: -0.18px; color: var(--ink); }
  #sketchup2025 .sketchup_detail_container .notice-col li { font-weight: 600; }
  #sketchup2025 .sketchup_detail_container .notice-col li + li { margin-top: 20px; }
  #sketchup2025 .sketchup_detail_container .notice-col li span { --lh-detail: 1.3; display: block; font-weight: 400; line-height: var(--lh-detail); color: var(--accent); }
  #sketchup2025 .sketchup_detail_container .notice-col a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }  /* e-mail link */
  /* several detail lines in one item: small bullets (none when there's only one line).
     Text stays on the item's text line; the bullet hangs outside, a little inside the item number. */
  #sketchup2025 .sketchup_detail_container .notice-col li > span:not(:only-of-type) { position: relative; }
  #sketchup2025 .sketchup_detail_container .notice-col li > span:first-of-type { margin-top: 8px; }  /* gap under the numbered title */
  #sketchup2025 .sketchup_detail_container .notice-col li > span:not(:only-of-type) + span { margin-top: 10px; }
  #sketchup2025 .sketchup_detail_container .notice-col li > span:not(:only-of-type)::before {
    /* right edge lines up with the right edge of the item number's digit (digit ends ≈ 0.44em before the text) */
    content: ""; position: absolute; left: calc(-0.44em - 0.22em);
    top: calc((var(--lh-detail) * 1em - 0.22em) / 2);  /* centred on the first text line */
    width: 0.22em; height: 0.22em; border-radius: 50%; background: currentColor;
  }
  #sketchup2025 .sketchup_detail_container .issue-box { width: 100%; background: var(--base-page); border-radius: 8px; padding: 17px 24px; letter-spacing: -0.19px; }
  #sketchup2025 .sketchup_detail_container .issue-box .t { margin-bottom: 6px; color: var(--ink); }
  #sketchup2025 .sketchup_detail_container .issue-box p:last-child { font-weight: 500; color: var(--accent); }
  #sketchup2025 .sketchup_detail_container .issue-box em { font-style: normal; font-weight: 500; color: var(--sky); }
  #sketchup2025 .sketchup_detail_container .btn {
    display: inline-flex; align-items: center; justify-content: center; width: 256px; max-width: 100%;
    height: auto; gap: 0; border: 0;  /* the host site's own .btn sets height 56px + a 1px border */
    padding: 13px 37px; border-radius: 50px; background: var(--primary); color: #fff;
    font-size: var(--fs-h6); font-weight: 600; line-height: var(--lh-ui); text-decoration: none;
    transition: opacity 0.3s ease;
  }
  #sketchup2025 .sketchup_detail_container .btn:hover,
  #sketchup2025 .sketchup_detail_container .btn:focus-visible { opacity: 0.5; }

  /* 10. Closing */
  #sketchup2025 .sketchup_detail_container .closing {
    min-height: var(--closing-h); padding: var(--pad-64) var(--px-30);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(89, 155, 199, 0.2) 100%);
  }
  #sketchup2025 .sketchup_detail_container .closing img { width: var(--logo-w); height: auto; }

  /* ---------- Mobile layout: container ≤ 764px ---------- */
  @container sketchup (max-width: 764px) {
    #sketchup2025 .sketchup_detail_container > * { --layout: mobile; --lh-text: 1.4; --lh-subhead: 1.25; }
    #sketchup2025 .sketchup_detail_container .flow br { display: none; }
    /* hero steps: 2 × 2 — arrows between 1→2 and 3→4, plus a diagonal 2→3 arrow in the middle.
       Grid: [step] [arrow] [step] / [diagonal arrow, centred] / [step] [arrow] [step] */
    #sketchup2025 .sketchup_detail_container .steps {
      display: grid; grid-template-columns: 1fr 24px 1fr; gap: 12px 8px; align-items: start;
      container-type: inline-size;  /* lets the arrows find the box centre (100cqw = list width) */
    }
    #sketchup2025 .sketchup_detail_container .steps .arrow {
      width: 24px; height: 30px; align-self: start;
      /* box = min(179px, column width); the arrow's tip sits 15px down the svg */
      margin-top: calc(min(179px, (100cqw - 40px) / 2) / 2 - 15px);
    }
    #sketchup2025 .sketchup_detail_container .steps .arrow img { width: 24px; height: 95px; max-width: none; }
    #sketchup2025 .sketchup_detail_container .steps .arrow:nth-child(4) { grid-column: 1 / -1; justify-self: center; margin-top: 0; }
    #sketchup2025 .sketchup_detail_container .steps .arrow:nth-child(4) img { transform: rotate(135deg); transform-origin: 12px 15px; }
    /* with subgrid each step's box and caption get their own rows (box / caption / box / caption),
       so the side arrows centre on their box row and the diagonal arrow on the middle of all four boxes */
    @supports (grid-template-rows: subgrid) {
      #sketchup2025 .sketchup_detail_container .steps { grid-template-rows: repeat(4, auto); row-gap: 0; }
      #sketchup2025 .sketchup_detail_container .steps .step { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 0; justify-items: center; align-items: start; }
      #sketchup2025 .sketchup_detail_container .steps .step > :last-child { padding-top: 16px; }
      #sketchup2025 .sketchup_detail_container .steps .step:nth-child(-n+3) > :last-child { padding-bottom: 40px; }
      #sketchup2025 .sketchup_detail_container .steps .arrow { grid-row: auto; align-self: center; margin-top: 0; }
      #sketchup2025 .sketchup_detail_container .steps .arrow:nth-child(2) { grid-area: 1 / 2; }
      #sketchup2025 .sketchup_detail_container .steps .arrow:nth-child(4) { grid-area: 1 / 2 / 4 / 3; justify-self: center; }
      #sketchup2025 .sketchup_detail_container .steps .arrow:nth-child(6) { grid-area: 3 / 2; }
      #sketchup2025 .sketchup_detail_container .steps .step:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
      #sketchup2025 .sketchup_detail_container .steps .step:nth-child(3) { grid-area: 1 / 3 / 3 / 4; }
      #sketchup2025 .sketchup_detail_container .steps .step:nth-child(5) { grid-area: 3 / 1 / 5 / 2; }
      #sketchup2025 .sketchup_detail_container .steps .step:nth-child(7) { grid-area: 3 / 3 / 5 / 4; }
    }
    /* pain points / why / notice: single column */
    #sketchup2025 .sketchup_detail_container .hooks { grid-template-columns: 1fr; }
    /* one column makes the hook cards wider, not narrower: keep the card text at its PC size */
    #sketchup2025 .sketchup_detail_container .hook-card { --fs-lead: 22px; --fs-caption: 14px; }
    #sketchup2025 .sketchup_detail_container .why-grid { grid-template-columns: 1fr; }
    #sketchup2025 .sketchup_detail_container .notice-cols { flex-direction: column; }
    #sketchup2025 .sketchup_detail_container .btn-row .btn { flex: 1 1 0; width: auto; min-width: 0; padding-left: 12px; padding-right: 12px; }
    /* improvement cards: all 16:9 (all open, like the lead card), no lead/size animation */
    #sketchup2025 .sketchup_detail_container .improve-text { padding-top: var(--card-30); padding-bottom: var(--card-30); }
    #sketchup2025 .sketchup_detail_container .improve-card,
    #sketchup2025 .sketchup_detail_container .improve-card.is-lead {
      aspect-ratio: auto; height: auto; transition: none;
      min-height: calc(100cqw * 9 / 16);  /* 16:9 (100cqw = list width), taller only if the text needs it */
    }
    /* products: 2 columns */
    #sketchup2025 .sketchup_detail_container .products-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    /* comparison table: scroll sideways, feature column stays put */
    #sketchup2025 .sketchup_detail_container .compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #sketchup2025 .sketchup_detail_container .compare-table { min-width: 0; }
    #sketchup2025 .sketchup_detail_container .compare-table th:first-child,
    #sketchup2025 .sketchup_detail_container .compare-table td:first-child { min-width: 180px; }
    #sketchup2025 .sketchup_detail_container .feat { flex-wrap: wrap; gap: 4px 10px; }
    #sketchup2025 .sketchup_detail_container .compare-table th:first-child,
    #sketchup2025 .sketchup_detail_container .compare-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
    /* key/value tables: label above value */
    #sketchup2025 .sketchup_detail_container .kv-row { flex-direction: column; }
    #sketchup2025 .sketchup_detail_container .kv-row .k { width: auto; padding-bottom: 0; }
    #sketchup2025 .sketchup_detail_container .export-line { grid-template-columns: 2.2em 1fr; }
  }

  /* Fallback for browsers without container queries (pre-2023): same rules on the browser width.
     KEEP IN SYNC with the @container block above. */
  @supports not (container-type: inline-size) {
  @media (max-width: 1200px) {
    #sketchup2025 .sketchup_detail_container > * { --layout: mobile; --lh-text: 1.4; --lh-subhead: 1.25; }
    #sketchup2025 .sketchup_detail_container .flow br { display: none; }
    /* hero steps: 2 × 2, no arrows (the arrow positions need container units) */
    #sketchup2025 .sketchup_detail_container .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 12px; }
    #sketchup2025 .sketchup_detail_container .steps .arrow { display: none; }
    /* pain points / why / notice: single column */
    #sketchup2025 .sketchup_detail_container .hooks { grid-template-columns: 1fr; }
    /* one column makes the hook cards wider, not narrower: keep the card text at its PC size */
    #sketchup2025 .sketchup_detail_container .hook-card { --fs-lead: 22px; --fs-caption: 14px; }
    #sketchup2025 .sketchup_detail_container .why-grid { grid-template-columns: 1fr; }
    #sketchup2025 .sketchup_detail_container .notice-cols { flex-direction: column; }
    #sketchup2025 .sketchup_detail_container .btn-row .btn { flex: 1 1 0; width: auto; min-width: 0; padding-left: 12px; padding-right: 12px; }
    /* improvement cards: all 16:9 (all open, like the lead card), no lead/size animation */
    #sketchup2025 .sketchup_detail_container .improve-text { padding-top: var(--card-30); padding-bottom: var(--card-30); }
    #sketchup2025 .sketchup_detail_container .improve-card,
    #sketchup2025 .sketchup_detail_container .improve-card.is-lead { aspect-ratio: 16 / 9; height: auto; transition: none; }
    /* products: 2 columns */
    #sketchup2025 .sketchup_detail_container .products-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    /* comparison table: scroll sideways, feature column stays put */
    #sketchup2025 .sketchup_detail_container .compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #sketchup2025 .sketchup_detail_container .compare-table { min-width: 0; }
    #sketchup2025 .sketchup_detail_container .compare-table th:first-child,
    #sketchup2025 .sketchup_detail_container .compare-table td:first-child { min-width: 180px; }
    #sketchup2025 .sketchup_detail_container .feat { flex-wrap: wrap; gap: 4px 10px; }
    #sketchup2025 .sketchup_detail_container .compare-table th:first-child,
    #sketchup2025 .sketchup_detail_container .compare-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
    /* key/value tables: label above value */
    #sketchup2025 .sketchup_detail_container .kv-row { flex-direction: column; }
    #sketchup2025 .sketchup_detail_container .kv-row .k { width: auto; padding-bottom: 0; }
    #sketchup2025 .sketchup_detail_container .export-line { grid-template-columns: 2.2em 1fr; }
  }
  }


/* =====================================================================
   NewSlate(Extra) 테마 연동 보정 — 이 사이트에서만 필요한 추가 규칙
   (테마가 h1~h6·p·a·button 등에 직접 지정한 값이 이 블록으로 새어 들어오는 것을 막는다)
   ===================================================================== */

/* 1) 상속 복원: 테마는 글꼴·자간·글자색·줄간격을 요소에 직접 지정해서, 컨테이너 값이 자식에게 내려가지 않는다 */
#sketchup2025 .sketchup_detail_container { line-height: normal; }
#sketchup2025 .sketchup_detail_container * { font-family: inherit; }
/* 자간은 테마가 직접 지정하는 요소에만 풀어준다 (그 안의 b·span 은 부모의 자간을 그대로 상속) */
#sketchup2025 .sketchup_detail_container :where(h1, h2, h3, h4, h5, h6, p, td, li, .btn) { letter-spacing: normal; }
#sketchup2025 .sketchup_detail_container :where(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* 2) 테마에 !important 로 걸린 제목 줄간격(body.product .et_pb_section h4 등)을 원래 값으로 되돌린다 */
#sketchup2025 .sketchup_detail_container h1, #sketchup2025 .sketchup_detail_container h2, #sketchup2025 .sketchup_detail_container h3, #sketchup2025 .sketchup_detail_container h4 { line-height: var(--lh-heading) !important; }
#sketchup2025 .sketchup_detail_container h5, #sketchup2025 .sketchup_detail_container h6 { line-height: var(--lh-subhead) !important; }

/* 3) 이미 방문한 링크(:visited)에 테마가 파란 글자색을 입혀서 버튼 글자가 배경에 묻히는 문제 */
#sketchup2025 .sketchup_detail_container a.btn,
#sketchup2025 .sketchup_detail_container a.btn:link,
#sketchup2025 .sketchup_detail_container a.btn:visited,
#sketchup2025 .sketchup_detail_container a.btn:hover,
#sketchup2025 .sketchup_detail_container a.btn:focus,
#sketchup2025 .sketchup_detail_container a.btn:active { color: #fff !important; text-decoration: none; }

/* 4) 영상 박스: 사이트의 FitVids 가 iframe 을 .fluid-width-video-wrapper 로 감싸는 경우의 안전장치
      (영상 박스에 fitvidsignore 클래스를 주어 보통은 감싸지지 않는다) */
#sketchup2025 .sketchup_detail_container .card-video .fluid-width-video-wrapper { padding-top: 0 !important; position: static; height: 100%; }
#sketchup2025 .sketchup_detail_container .card-video .fluid-width-video-wrapper iframe { position: static; }

/* 6) 글자 크기 조정 (요청: 너무 크다)
      - 카드 설명글(.d)과 버튼(.btn)은 화면 폭과 관계없이 16px 고정
      - 제목은 한 단계씩 축소: h1 → 기존 h2 크기(--fs-h2), h2 → 기존 h3 크기(--fs-h3) */
#sketchup2025 .sketchup_detail_container .news h1 { font-size: var(--fs-h2); }
#sketchup2025 .sketchup_detail_container .news h2 { font-size: var(--fs-h3); }
#sketchup2025 .sketchup_detail_container .btn { font-size: 16px; }
#sketchup2025 .sketchup_detail_container .news .improve-text .d { font-size: 16px; }

/* 5) Divi 섹션/행 래퍼: 이 블록이 자체 배경·여백을 가지고 있으므로 Divi 기본 여백을 없애고 전체 폭을 쓴다 */
#sketchup2025.sk-news2027 { padding: 0 !important; }
#sketchup2025.sk-news2027 .et_pb_row { width: 100% !important; max-width: none !important; padding: 0 !important; }