:root {
      --bg: #faf7f2;
      --ink: #1a1a1a;
      --ink-2: #4a4a4a;
      --line: #e6e0d6;
      --accent: #8a6b3f;
      --accent-deep: #5a4222;
      --accent-hover: #3f2d14;
      --accent-active: #2d2010;
      --card: #ffffff;
      --shadow: 0 1px 2px rgba(20, 15, 5, .04), 0 8px 24px rgba(20, 15, 5, .06);
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      color-scheme: light;
      accent-color: var(--accent-deep)
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto }
    }

    html,
    body {
      margin: 0;
      padding: 0
    }

    body {
      font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      word-break: keep-all;
      overflow-wrap: break-word;
      -moz-osx-font-smoothing: grayscale;
      -webkit-tap-highlight-color: transparent;
    }

    .container {
      max-width: 36rem;
      margin: 0 auto;
      padding: 0 24px
    }

    @media (min-width: 768px) {
      .container { max-width: 720px; padding: 0 24px }
    }

    .serif {
      font-family: 'Noto Serif KR', serif;
      letter-spacing: -.01em
    }

    a {
      color: var(--accent-deep);
      text-decoration: none
    }

    a:hover {
      color: #3f2d14;
    }

    /* nav */
    .nav {
      padding: 16px 0;
      border-bottom: 1px solid var(--line)
    }

    .nav .inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px 12px;
      max-width: 960px;
      margin: 0 auto;
      padding: 0 24px
    }

    @media (min-width: 768px) {
      .nav { padding: 24px 0 }
      .nav .inner { padding: 0 24px; flex-wrap: nowrap }
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      color: inherit;
      text-decoration: none
    }

    .brand-mark {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20800%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22bg%22%20cx%3D%2250%25%22%20cy%3D%2242%25%22%20r%3D%2280%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%239a7848%22%2F%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%236b5230%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%234a3719%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22800%22%20height%3D%22800%22%20fill%3D%22url%28%23bg%29%22%2F%3E%3Cg%20stroke%3D%22%23F4EEDF%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%3Cline%20x1%3D%22180%22%20y1%3D%22340%22%20x2%3D%22620%22%20y2%3D%22340%22%20stroke-width%3D%2238%22%20opacity%3D%220.96%22%2F%3E%3Cline%20x1%3D%22205%22%20y1%3D%22400%22%20x2%3D%22595%22%20y2%3D%22400%22%20stroke-width%3D%2238%22%20opacity%3D%220.72%22%2F%3E%3Cline%20x1%3D%22250%22%20y1%3D%22460%22%20x2%3D%22550%22%20y2%3D%22460%22%20stroke-width%3D%2238%22%20opacity%3D%220.48%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/cover no-repeat, linear-gradient(135deg, var(--accent), var(--accent-deep));
      display: inline-block
    }

    .nav .meta {
      font-size: 14.5px;
      color: var(--ink-2)
    }

    .nav .meta a[aria-current="page"] {
      font-weight: 600;
      color: var(--ink)
    }

    /* hero */
    .hero {
      padding: 38px 0;
      text-align: center
    }

    .eyebrow {
      display: inline-block;
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent-deep);
      padding: 6px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff
    }

    h1.hero-title {
      font-size: clamp(34px, 5vw, 52px);
      line-height: 1.2;
      margin: 18px 0 14px;
      font-weight: 600;
      word-break: keep-all;
      overflow-wrap: break-word
    }

    .hero-sub {
      font-size: 18px;
      color: var(--ink-2);
      max-width: 640px;
      margin: 0 auto;
      word-break: keep-all;
      overflow-wrap: break-word
    }

    .hero-cta {
      margin: 32px auto 0;
      max-width: 560px;
      font-size: 14px;
      color: var(--ink-2);
      word-break: keep-all
    }

    .hero-cta strong {
      color: var(--ink)
    }

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin: 20px auto 0;
      max-width: 640px
    }

    .hero-points span {
      font-size: 13px;
      color: var(--accent-deep);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 13px
    }

    /* lead magnet card */
    .lead-card {
      margin: 28px auto 0;
      max-width: 680px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 22px 40px;
      box-shadow: var(--shadow);
      text-align: left
    }

    .lead-card .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--accent-deep);
      background: #f3ecdf;
      border-radius: 999px;
      padding: 4px 10px;
      font-weight: 600;
      letter-spacing: .04em
    }

    .lead-card h2 {
      font-size: 24px;
      line-height: 1.32;
      margin: 10px 0 5px;
      font-weight: 600
    }

    .lead-card .desc {
      color: var(--ink-2);
      font-size: 15px;
      margin: 0 0 14px;
      word-break: keep-all;
      overflow-wrap: break-word
    }

    .lead-list {
      margin: 0 0 16px;
      padding: 0;
      list-style: none;
      font-size: 14.5px;
      color: var(--ink)
    }

    .lead-list li {
      padding: 2px 0;
      display: flex;
      gap: 10px;
      line-height: 1.45
    }

    .lead-list li::before {
      content: "";
      flex: 0 0 auto;
      width: 6px;
      height: 6px;
      margin-top: 8px;
      border-radius: 50%;
      background: var(--accent)
    }

    /* form area */
    .form-wrap {
      border-top: 1px dashed var(--line);
      padding-top: 16px
    }

    .form-wrap .label {
      font-size: 13px;
      color: var(--ink-2);
      margin-bottom: 10px;
      word-break: keep-all;
      overflow-wrap: break-word
    }

    /* 스티비 폼이 들어갈 자리 */
    #stibee-embed {
      min-height: 120px
    }

    /* 폴백(스티비 코드 붙이기 전) 안내 박스 */
    .placeholder {
      border: 1px dashed var(--accent);
      background: #fbf6ec;
      color: var(--accent-deep);
      border-radius: 10px;
      padding: 16px;
      font-size: 14px
    }

    .placeholder code {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 2px 6px;
      font-size: 13px
    }

    .privacy {
      font-size: 12px;
      color: var(--ink-2);
      margin-top: 14px;
      text-align: center
    }

    /* 구독 완료 후 즉시 PDF 제공 패널 */
    .deliver {
      display: none;
      margin-top: 18px;
      border: 1px solid var(--accent);
      background: #fbf6ec;
      border-radius: 12px;
      padding: 22px 20px;
      text-align: center
    }

    .deliver.show {
      display: block;
      animation: deliverIn .35s ease both
    }

    @keyframes deliverIn {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .deliver .ok {
      font-size: 13px;
      color: var(--accent-deep);
      font-weight: 600;
      letter-spacing: .04em;
      margin-bottom: 8px
    }

    .deliver h3 {
      font-size: 19px;
      margin: 0 0 6px;
      font-weight: 600;
      color: var(--ink)
    }

    .deliver p {
      margin: 0 0 16px;
      font-size: 14px;
      color: var(--ink-2)
    }

    .deliver .dl {
      display: inline-block;
      background: var(--accent-deep);
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      padding: 13px 28px;
      border-radius: 10px;
      text-decoration: none
    }

    .deliver .dl:hover {
      background: var(--accent);
      text-decoration: none
    }

    .deliver .mini {
      display: block;
      margin-top: 12px;
      font-size: 12px;
      color: var(--ink-2)
    }

    .deliver .mini a {
      text-decoration: underline
    }

    .deliver .confirm-note {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px dashed var(--line);
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.65;
      text-align: left
    }

    .deliver .confirm-note strong {
      color: var(--accent-deep)
    }

    .deliver .confirm-note b {
      color: var(--ink);
      font-weight: 600
    }

    /* value props */
    .value {
      padding: 38px 0;
      border-top: 1px solid var(--line)
    }

    .value h3 {
      font-size: 14px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent-deep);
      text-align: center;
      margin: 0 0 28px;
      font-weight: 600
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px
    }

    .cell {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 24px;
      word-break: keep-all;
      overflow-wrap: break-word
    }

    .cell .num {
      font-family: 'Noto Serif KR', serif;
      font-size: 14px;
      color: var(--accent-deep);
      letter-spacing: .1em
    }

    .cell h4 {
      font-size: 18px;
      margin: 8px 0 8px;
      font-weight: 600;
      line-height: 1.4
    }

    .cell p {
      margin: 0;
      font-size: 14.5px;
      color: var(--ink-2);
      line-height: 1.65
    }

    @media (max-width:720px) {
      .grid {
        grid-template-columns: 1fr
      }

      .hero {
        padding: 44px 0 28px
      }

      .lead-card {
        padding: 20px 28px
      }
    }

    /* sample / proof */
    .sample {
      padding: 38px 0;
      border-top: 1px solid var(--line)
    }

    .sample .inner {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 32px;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 32px;
      align-items: center
    }

    .sample .label {
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent-deep)
    }

    .sample h3 {
      font-size: 24px;
      margin: 10px 0 10px;
      font-weight: 600
    }

    .sample p {
      margin: 0;
      color: var(--ink-2)
    }

    .sample .mock {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 20px;
      background: #fbf9f4;
      font-size: 14px;
      color: var(--ink-2)
    }

    .sample .mock .h {
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 6px
    }

    .sample .mock hr {
      border: 0;
      border-top: 1px dashed var(--line);
      margin: 12px 0
    }

    @media (max-width:720px) {
      .sample .inner {
        grid-template-columns: 1fr
      }
    }

    /* 최신 뉴스레터 */
    .latest-head {
      text-align: center;
      margin-bottom: 28px
    }

    .latest-head p {
      max-width: 480px;
      margin: 8px auto 0;
      word-break: keep-all
    }

    /* 뉴스레터 목록 카드 — 홈(최근 발행)·/letters/ 아카이브 공통 단일 소스.
       크림 배경 위 흰 카드 + 카드 전체 링크 + hover 시 테두리·그림자·제목 골드.
       (사이트 전체 카드 언어: 연구 티어·상품·lead-card와 동일 계열) */
    .arc-list {
      list-style: none;
      padding: 0;
      margin: 32px 0;
      display: grid;
      gap: 12px;
      text-align: left
    }

    .arc-item {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      transition: border-color .15s ease, box-shadow .15s ease
    }

    .arc-item:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 12px rgba(20, 15, 5, .06)
    }

    .arc-link {
      display: block;
      padding: 18px 20px;
      text-decoration: none;
      color: inherit
    }

    .arc-item .d {
      font-size: 13px;
      color: var(--ink-2)
    }

    .arc-title {
      font-size: 19px;
      margin: 5px 0 6px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
      transition: color .15s
    }

    .arc-link:hover .arc-title {
      color: var(--accent-deep)
    }

    .arc-item p {
      margin: 0;
      color: var(--ink-2);
      font-size: 15.5px;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .latest-more {
      text-align: center;
      margin-top: 22px;
      font-size: 14px
    }

    /* faq */
    .faq {
      padding: 38px 0;
      border-top: 1px solid var(--line)
    }

    .faq h3 {
      font-size: 14px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin: 0 0 14px;
      font-weight: 600
    }

    /* FAQ 아코디언 — 홈(.faq 섹션)·/faq 페이지 공통 단일 소스.
       항목 마크업: <details class="faq-item"><summary>Q</summary><div class="a">A</div></details> */
    .faq-item {
      border-bottom: 1px solid var(--line);
      padding: 0
    }

    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 11px 0;
      font-size: 15.5px;
      font-weight: 600;
      color: var(--ink);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px
    }

    .faq-item summary::-webkit-details-marker {
      display: none
    }

    .faq-item summary::after {
      content: "+";
      color: var(--accent);
      font-weight: 400;
      font-size: 20px;
      line-height: 1
    }

    .faq-item[open] summary::after {
      content: "−"
    }

    .faq-item .a {
      padding: 0 0 13px;
      font-size: 14.5px;
      color: var(--ink-2);
      line-height: 1.7
    }

    .faq-item .a a {
      color: var(--accent-deep);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: var(--line)
    }

    .faq-item .a strong {
      color: var(--ink)
    }

    /* closing cta */
    .cta {
      padding: 38px 0;
      border-top: 1px solid var(--line);
      text-align: center
    }

    .cta h3 {
      font-size: clamp(22px, 3.2vw, 28px);
      margin: 0 0 10px;
      font-weight: 600;
      line-height: 1.3
    }

    .cta p {
      margin: 0 auto 18px;
      max-width: 560px;
      color: var(--ink-2);
      font-size: 16.5px;
      line-height: 1.5;
      word-break: keep-all
    }

    .cta .btn {
      display: inline-block;
      background: var(--accent-deep);
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      padding: 14px 34px;
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(90,66,34,.16), 0 4px 12px rgba(90,66,34,.12)
    }

    .cta .btn:hover {
      background: var(--accent-hover);
      text-decoration: none;
      box-shadow: 0 3px 8px rgba(90,66,34,.22), 0 8px 20px rgba(90,66,34,.16);
      transform: translateY(-1px)
    }

    /* footer */
    footer {
      margin-top: 0;
      padding: 28px 0 32px;
      border-top: 1px solid var(--line);
      text-align: center;
      color: var(--ink-2);
      font-size: 13px
    }

    footer .brand {
      justify-content: center;
      color: var(--ink);
      margin-bottom: 10px
    }

    footer .foot-tag { color: var(--ink-2); margin-bottom: 10px }
    footer .foot-nav { margin-bottom: 10px }
    footer .foot-copy { font-size: 12px; color: var(--ink-2) }

    /* ===== 스티비 동의 모달 보정: 오버레이 + 카드 화면 정중앙 고정 ===== */
    /* 닫힘 상태에선 스티비가 컨테이너를 display:none 처리 → 자식(오버레이·카드)도 함께 숨겨짐 */
    #stb_form_policy_modal #stb_form_modal_bg {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(20, 15, 5, .5) !important;
      z-index: 1001 !important;
    }
    #stb_form_policy_modal .stb_form_modal_body {
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
      right: auto !important;
      bottom: auto !important;
      transform: translate(-50%, -50%) !important;
      z-index: 1002 !important;
      width: calc(100% - 48px) !important;
      max-width: 460px !important;
      max-height: 85vh !important;
      overflow-y: auto !important;
      margin: 0 !important;
      padding: 24px !important;
      background: #fff !important;
      border: 1px solid var(--line) !important;
      border-radius: 16px !important;
      box-shadow: 0 16px 48px rgba(20, 15, 5, .22) !important;
      text-align: left !important;
    }
    #stb_form_policy_modal .stb_form_modal_title {
      font-family: 'Noto Serif KR', serif !important;
      font-size: 18px !important;
      font-weight: 600 !important;
      letter-spacing: -.01em !important;
      margin: 0 0 10px !important;
      padding: 0 !important;
      color: var(--ink) !important;
    }
    #stb_form_policy_modal .stb_form_modal_text {
      font-size: 14px !important;
      line-height: 1.65 !important;
      margin: 0 !important;
      padding: 0 !important;
      color: var(--ink-2) !important;
    }
    #stb_form_policy_modal .stb_form_modal_text a {
      font-size: 14px !important;
      color: var(--accent-deep) !important;
      text-decoration: underline !important;
    }
    #stb_form_policy_modal .stb_form_modal_btn {
      margin-top: 16px !important;
      text-align: center !important;
    }
    /* 닫기 버튼 · 회색 비활성처럼 보이던 것 → 브랜드 활성 버튼, 글자 중앙 정렬 */
    #stb_form_modal_close, .stb_form_modal_close_btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1 !important;
      background: #fff !important;
      color: var(--accent-deep) !important;
      border: 1px solid var(--accent-deep) !important;
      opacity: 1 !important;
      cursor: pointer !important;
      padding: 10px 22px !important;
      border-radius: 10px !important;
      font-weight: 600 !important;
    }
    #stb_form_modal_close:hover, .stb_form_modal_close_btn:hover {
      background: var(--accent-deep) !important;
      color: #fff !important;
    }
    /* ===== 스티비 구독 폼 필드 · 브랜드 정합(Pretendard·골드·라운드) ===== */
    #stb_subscribe { padding: 10px 20px !important; }
    #stb_subscribe .stb_form_title { display: none !important; }            /* 카드 제목과 중복 → 숨김 */
    #stb_subscribe .stb_form { margin: 0 !important; }
    #stb_subscribe .stb_form_set { margin: 0 0 14px !important; padding: 0 !important; }
    #stb_subscribe .stb_form_set .stb_form_set_label {
      font-size: 13px !important; color: var(--ink-2) !important;
      font-weight: 500 !important; margin: 0 0 7px !important; padding: 0 !important;
    }
    #stb_subscribe .stb_asterisk { color: var(--accent) !important; }
    #stb_subscribe .stb_form_set_input {
      width: 100% !important; height: 44px !important; padding: 0 14px !important;
      border: 1px solid var(--line) !important; border-radius: 10px !important;
      background: #fff !important; color: var(--ink) !important;
      font-size: 15px !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s;
    }
    #stb_subscribe .stb_form_set_input:focus {
      border-color: var(--accent) !important; outline: none !important;
      box-shadow: 0 0 0 3px rgba(138,107,63,.13) !important;
    }
    #stb_subscribe .stb_form_policy { font-size: 13px !important; color: var(--ink-2) !important; margin: 0 0 8px !important; padding: 0 !important; }
    #stb_subscribe .stb_form_policy a,
    #stb_subscribe .stb_form_modal_open_btn {
      color: var(--accent-deep) !important; text-decoration: underline !important;
      font-size: 13px !important; padding: 0 !important; background: none !important; border: 0 !important;
    }
    #stb_subscribe .stb_form_set_submit { margin: 0 0 10px !important; padding: 0 !important; }
    #stb_form_submit_button, .stb_form_submit_button {
      width: 100% !important; height: 48px !important; border: 0 !important; cursor: pointer;
      border-radius: 10px !important; font-size: 16px !important; font-weight: 600 !important;
      background: var(--accent-deep) !important; color: #fff !important;
      box-shadow: 0 1px 3px rgba(90,66,34,.16), 0 4px 12px rgba(90,66,34,.12) !important;
      transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease !important;
    }
    #stb_form_submit_button:hover, .stb_form_submit_button:hover { background: var(--accent-hover) !important; box-shadow: 0 3px 8px rgba(90,66,34,.22), 0 8px 20px rgba(90,66,34,.16) !important; transform: translateY(-1px) !important; }
    #stb_form_submit_button:active, .stb_form_submit_button:active { background: var(--accent-active) !important; transform: translateY(0) !important; box-shadow: 0 1px 3px rgba(90,66,34,.16) !important; }

/* ── 상품 페이지 트러스트 시그널 (research/*) ──────────────────────── */
.trust-signal{margin:24px 0 16px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.trust-signal .trust-list{list-style:none;padding:0;margin:0 0 8px;font-size:14px;color:var(--ink);line-height:1.75}
.trust-signal .trust-list li{margin:0 0 4px}
.trust-signal .trust-list li strong{color:var(--accent-deep);font-weight:600}
.trust-signal .trust-link{font-size:13px;color:var(--accent);font-weight:500}
.trust-signal .trust-link:hover{color:var(--accent-deep)}
/* /research/ 인덱스 환불 안내 — 카드 아닌 산문 텍스트 */
.refund-note{margin:22px auto 0;max-width:560px;font-size:13px;color:var(--ink-2);line-height:1.7;text-align:center}
.refund-note strong{color:var(--ink);font-weight:600}
.refund-note a{color:var(--accent-deep);font-weight:500;white-space:nowrap}
.refund-note a:hover{color:var(--accent-hover)}

/* ── 가치사다리: 글 끝 "다음 단계" CTA ──────────────────────────── */
.next-step{margin:36px 0 8px;padding:24px;background:linear-gradient(180deg,#fff,#faf7f2);border:1px solid var(--line);border-radius:12px}
.next-step .ns-label{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:8px}
.next-step h3{font-size:18px;margin:0 0 8px;font-weight:600}
.next-step p{margin:0 0 14px;color:var(--ink-2);font-size:15px;line-height:1.6}
.next-step .ns-cta{display:inline-block;padding:10px 18px;background:var(--accent-deep);color:#fff;border-radius:8px;font-size:14px;font-weight:500}
.next-step .ns-cta:hover{background:var(--accent-hover);text-decoration:none}

/* ── research/index 3-tier 비교표 ─────────────────────────────── */
.tier-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0}
@media(min-width:768px){.tier-grid{grid-template-columns:1fr 1.1fr 1fr;gap:18px;align-items:stretch}}
.tier-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.tier-card--featured{border:2px solid var(--accent);transform:translateY(-2px)}
@media(min-width:768px){.tier-card--featured{transform:scale(1.02)}}
.tier-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent-deep);color:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.tier-name{font-family:'Noto Serif KR',serif;font-size:18px;font-weight:600;margin:0 0 4px}
.tier-tagline{font-size:13px;color:var(--ink-2);margin:0 0 14px;line-height:1.5;min-height:2.6em}
.tier-price{font-size:22px;font-weight:600;color:var(--ink);margin:0 0 4px}
.tier-price-note{font-size:12px;color:var(--ink-2);margin:0 0 16px}
.tier-features{list-style:none;padding:0;margin:0 0 18px;font-size:14px;line-height:1.75;flex:1}
.tier-features li{padding-left:18px;position:relative;margin-bottom:6px}
.tier-features li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:600}
.tier-cta{display:block;text-align:center;padding:11px 16px;border-radius:8px;font-size:14px;font-weight:500;text-decoration:none}
.tier-card .tier-cta{background:#fff;color:var(--accent-deep);border:1px solid var(--accent-deep)}
.tier-card .tier-cta:hover{background:var(--accent-active);color:#fff;border-color:var(--accent-active);text-decoration:none}
.tier-card--featured .tier-cta{background:var(--accent-deep);color:#fff;border:1px solid var(--accent-deep)}
.tier-card--featured .tier-cta:hover{background:var(--accent);text-decoration:none}
.tier-aside{margin-top:24px;padding:8px 20px 6px;background:#fff;border:1px solid var(--line);border-radius:12px}
.tier-aside-label{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin:12px 0 2px}
.tier-aside-item{display:block;padding:13px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:padding-left .15s ease}
.tier-aside-item:first-of-type{border-top:0}
.tier-aside-item:hover{text-decoration:none;padding-left:4px}
.ta-name{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.tier-aside-item:hover .ta-name{color:var(--accent-deep)}
.ta-name::after{content:" →";color:var(--accent-deep);font-weight:600;opacity:0;transition:opacity .15s ease}
.tier-aside-item:hover .ta-name::after{opacity:1}
.ta-price{font-weight:500;color:var(--ink-2);font-size:13px}
.ta-desc{display:block;font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:3px}

/* ── 상세 페이지: 상품명 아래 result promise 부제 ────────────────────── */
.post .result-promise{font-family:'Noto Serif KR',serif;font-size:clamp(15px,2.4vw,18px);color:var(--accent-deep);margin:6px 0 14px;line-height:1.5;font-weight:500;letter-spacing:-.01em}

/* ── 상세 페이지: 가치사다리 다음 단계 안내 (next-product) ──────────── */
.next-product{margin:40px 0 8px;padding:24px 22px;background:linear-gradient(180deg,#fff,#faf7f2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.next-product .np-label{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-bottom:8px}
.next-product .np-title{font-family:'Noto Serif KR',serif;font-size:18px;font-weight:600;margin:0 0 14px;line-height:1.45;color:var(--ink)}
.next-product .np-card{display:block;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease}
.next-product .np-card:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(20,15,5,.08);text-decoration:none}
.next-product .np-name{font-weight:600;font-size:15px;color:var(--ink);margin-bottom:6px}
.next-product .np-price{font-weight:400;color:var(--ink-2);font-size:14px}
.next-product .np-promise{font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:10px}
.next-product .np-cta{display:inline-block;font-size:13px;color:var(--accent-deep);font-weight:500}

/* ── 상세 페이지: 미니 FAQ (자주 묻는 질문) ─────────────────────────── */
.mini-faq{margin:32px 0 8px;padding:24px 22px;background:#fff;border:1px solid var(--line);border-radius:14px}
.mini-faq .faq-title{font-family:'Noto Serif KR',serif;font-size:18px;font-weight:600;margin:0 0 16px;color:var(--ink)}
.mini-faq .faq-item{border-bottom:1px solid var(--line);padding:0}
.mini-faq .faq-item:last-child{border-bottom:none}
.mini-faq .faq-q{display:block;font-size:15px;font-weight:500;color:var(--ink);padding:14px 0;cursor:pointer;list-style:none;position:relative;padding-right:28px;line-height:1.5}
.mini-faq .faq-q::-webkit-details-marker{display:none}
.mini-faq .faq-q::after{content:"+";position:absolute;right:4px;top:14px;font-size:18px;color:var(--accent);font-weight:300;transition:transform .2s ease}
.mini-faq .faq-item[open] .faq-q::after{content:"−"}
.mini-faq .faq-a{padding:0 0 16px;font-size:14.5px;color:var(--ink-2);line-height:1.7}
.mini-faq .faq-a p{margin:0}
.mini-faq .faq-a a{color:var(--accent-deep);font-weight:500}

/* ── /research/ 인덱스: 가치사다리 stepper (자가진단 단서 포함) ────── */
.ladder{margin:8px 0 32px;padding:24px 0 0}
.ladder-head{margin-bottom:18px}
.ladder-label{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-bottom:8px}
.ladder-title{font-family:'Noto Serif KR',serif;font-size:22px;font-weight:600;margin:0 0 8px;color:var(--ink);line-height:1.4}
.ladder-sub{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.6}
.ladder-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:768px){.ladder-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(min-width:980px){.ladder-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
.ladder-step{display:flex;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.ladder-step:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(20,15,5,.08);text-decoration:none;transform:translateY(-2px)}
@media(min-width:980px){.ladder-step{flex-direction:column;gap:10px;padding:20px 18px}}
.ls-stage{flex-shrink:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-deep);color:#fff;font-family:'Noto Serif KR',serif;font-size:15px;font-weight:600;line-height:1;transition:background-color .15s ease}
.ladder-step:hover .ls-stage,.ladder-step:focus-visible .ls-stage{background:var(--accent-active)}
.ls-body{flex:1;min-width:0}
.ls-label{font-size:12px;letter-spacing:.05em;color:var(--accent-deep);font-weight:600;margin-bottom:6px;text-transform:uppercase}
.ls-situation{font-family:'Noto Serif KR',serif;font-size:15px;color:var(--ink);line-height:1.45;margin-bottom:8px;font-weight:500}
.ls-product{font-size:13px;color:var(--ink-2);line-height:1.4}
.ls-price{color:var(--ink);font-weight:500}

/* ── /research/ 인덱스: stepper와 tier-grid 사이 시각 분리 ────────── */
.tier-divider{margin:32px 0 18px;text-align:center;position:relative}
.tier-divider::before{content:"";display:block;height:1px;background:var(--line);position:absolute;left:0;right:0;top:50%}
.tier-divider span{position:relative;display:inline-block;padding:0 16px;background:var(--bg);font-size:13px;color:var(--ink-2);letter-spacing:.05em}

/* ── 3-tier 카드 가운데 강조 미세 보강 (center-stage 효과 ↑) ────── */
.tier-card--featured{box-shadow:0 4px 14px rgba(20,15,5,.10),0 12px 28px rgba(138,107,63,.12)}
.tier-card--featured .tier-badge{box-shadow:0 2px 6px rgba(90,66,34,.25)}
.tier-card--featured .tier-name{color:var(--accent-deep)}

/* ── consulting 상품: 사전 진단 1순위 + 보조 mailto ────────────── */
.shop-secondary{margin-top:10px;text-align:center}
.shop-secondary .text-link{font-size:13.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(74,74,74,.3)}
.shop-secondary .text-link:hover{color:var(--accent-deep);text-decoration-color:var(--accent-deep)}

/* ── letters 글 페이지: 카테고리 배지 (kicker 옆) ─────────────────── */
.kicker--cat{background:#fff;color:var(--ink-2);border-color:var(--line);margin-left:6px;font-weight:500}

/* ──────────────────────────────────────────────────────────────────
   research 상세 페이지 — 모던·타이트 디자인
   ─────────────────────────────────────────────────────────────── */

/* article.post 컨테이너 폭 절제 (가독성) */
.post .container{max-width:680px}

/* 헤더 블록 — kicker 제거, eyebrow·h1·promise·meta 통합 */
.shop-hero{margin:0 0 36px;padding:0 0 24px;border-bottom:1px solid var(--line)}
.shop-eyebrow{display:inline-block;font-size:11px;letter-spacing:.2em;color:var(--ink-2);font-weight:600;margin-bottom:14px}
.shop-name{font-family:'Noto Serif KR',serif;font-size:clamp(26px,4vw,34px);font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:0 0 12px;color:var(--ink)}
.shop-promise{font-family:'Noto Serif KR',serif;font-size:clamp(15px,2.2vw,17px);font-weight:500;color:var(--accent-deep);line-height:1.5;margin:0 0 20px;letter-spacing:-.005em}
.shop-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.shop-hero-cta{margin-top:20px}
@media(min-width:768px){.shop-hero-cta .btn{min-width:220px}}
.shop-price{font-size:clamp(20px,3vw,24px);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.shop-meta-sep{color:var(--line);display:none}
@media(min-width:560px){.shop-meta-sep{display:inline}}
.shop-tagline-inline{flex:1 1 100%;color:var(--ink-2);font-size:14.5px;line-height:1.6;word-break:keep-all}
@media(min-width:560px){.shop-tagline-inline{flex:1 1 auto}}

/* content 영역 — 라벨형 섹션 */
.shop-content{}
.shop-content > h2{display:none} /* 옛 h2 숨김(혹시 잔존 시) */
.shop-section{margin:0 0 28px;padding-top:24px;border-top:1px solid var(--line)}
.shop-section:first-of-type{border-top:none;padding-top:0;margin-top:0}
.shop-section-label{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-bottom:12px}
.shop-text{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink);word-break:keep-all}
.shop-feature-list{list-style:none;padding:0;margin:0}
.shop-feature-list li{position:relative;padding:0 0 0 22px;margin:0 0 10px;font-size:15px;color:var(--ink);line-height:1.65;word-break:keep-all}
.shop-feature-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border:1.5px solid var(--accent);border-right:none;border-top:none;transform:rotate(-45deg)}

/* 결제 카드 — trust + shop-buy 통합 */
.checkout-card{margin:36px 0 12px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(20,15,5,.04),0 6px 18px rgba(20,15,5,.06)}
@media(min-width:560px){.checkout-card{padding:20px 24px}}
.checkout-summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 0 12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.checkout-label{font-size:13px;letter-spacing:.05em;color:var(--ink-2);font-weight:500}
.checkout-price{font-size:clamp(20px,3vw,24px);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.checkout-action{text-align:center}
.checkout-action .btn,.checkout-action .shop-btn{display:block;width:100%;padding:14px 20px;font-size:15.5px;font-weight:600;background:var(--accent-deep);color:#fff;border-radius:10px;border:1px solid var(--accent-deep);transition:background-color .15s ease,border-color .15s ease}
.checkout-action .btn:hover,.checkout-action .shop-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none}
.checkout-action .btn:active,.checkout-action .shop-btn:active{background:var(--accent-active);border-color:var(--accent-active)}
.checkout-action .buy-btn--pending{background:#faf7f2;color:var(--ink-2);border-color:var(--line);cursor:not-allowed}
.checkout-action .buy-btn--pending:hover{background:#faf7f2;color:var(--ink-2);border-color:var(--line)}
.checkout-card .shop-note{margin:14px 0 0;font-size:13px;color:var(--ink-2);line-height:1.6;text-align:center}
.checkout-card .shop-secondary{margin:10px 0 0}
.checkout-trust{margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.checkout-trust .trust-list{list-style:none;padding:0;margin:0 0 8px;font-size:13.5px;line-height:1.65;color:var(--ink)}
.checkout-trust .trust-list li{padding:3px 0;color:var(--ink-2)}
.checkout-trust .trust-list li strong{color:var(--ink);font-weight:600}
.checkout-trust .trust-link{font-size:12.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.checkout-trust .trust-link:hover{color:var(--accent-deep);text-decoration-color:var(--accent-deep)}

/* 옛 클래스 시각 잔존 차단 (마크업 변경 누락 안전망) */
.shop-tagline,.shop-buy,.shop-price-headline{display:none !important}

/* backlink — 페이지 끝, 모던 미세 */
.post .backlink{margin:32px 0 0;font-size:13.5px;color:var(--ink-2);text-align:center}
.post .backlink a{color:var(--ink-2);text-decoration:none}
.post .backlink a:hover{color:var(--accent-deep)}

/* 옛 result-promise (마크업에서 빠짐, CSS 잔존 차단) */
.post .result-promise{display:none}

/* ── /research/ 3-tier 카드: 전체 영역 링크 + 호버 애니메이션 ────── */
.tier-card{
  color: inherit;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease;
  cursor: pointer;
  will-change: transform;
}
.tier-card:hover{
  color: inherit;
  text-decoration: none;
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(20,15,5,.08), 0 20px 48px rgba(20,15,5,.10);
  border-color: var(--accent);
}
.tier-card--featured:hover{
  transform: translateY(-8px);
  box-shadow: 0 14px 30px rgba(138,107,63,.18), 0 24px 56px rgba(20,15,5,.12);
  border-color: var(--accent-deep);
}
.tier-card:focus-visible{
  outline: 2px solid var(--accent-deep);
  outline-offset: 4px;
}
/* tier-cta는 이제 span — 부모 :hover로 색 전환 */
.tier-cta{
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* 보조 카드(자세히 보기·1:1 문의): hover 시 솔리드 채움이 아니라
   외곽선 강조(연한 톤 배경 + 진한 테두리·글자) → featured 풀 패키지의 솔리드 버튼과 구분 유지 */
.tier-card:hover .tier-cta{
  background: var(--accent-active);
  color: #fff;
  border-color: var(--accent-active);
}
/* featured(풀 패키지): 기본부터 솔리드 → hover 시 한 단계 더 진한 솔리드 유지 */
.tier-card--featured:hover .tier-cta{
  background: var(--accent-active);
  color: #fff;
  border-color: var(--accent-active);
}
/* 화살표 슬라이드 */
.tier-cta-arrow{
  display: inline-block;
  margin-left: 4px;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.tier-card:hover .tier-cta-arrow{
  transform: translateX(5px);
}
/* 접근성: 모션 줄이기 선호 */
@media (prefers-reduced-motion: reduce){
  .tier-card, .tier-cta, .tier-cta-arrow{ transition: none; }
  .tier-card:hover, .tier-card--featured:hover{ transform: none; }
  .tier-card:hover .tier-cta-arrow{ transform: none; }
}

.wordmark .wm-strong{font-weight:700;color:var(--ink)}
.wordmark .wm-soft{font-weight:400;color:var(--ink-2)}

/* ── 인터랙티브 요소 상태 색 단일화 (버튼·라디오·체크박스) ──────────── */
/* 기본 #5a4222(accent-deep) → hover #3f2d14 → active #2d2010, 포커스 링 공통 */
.cta .btn,.next-step .ns-cta{transition:background-color .15s ease,box-shadow .15s ease,transform .12s ease}
.cta .btn:active,.next-step .ns-cta:active{background:var(--accent-active);transform:translateY(0);box-shadow:0 1px 3px rgba(90,66,34,.16)}
.cta .btn:focus-visible,
.next-step .ns-cta:focus-visible,
.checkout-action .btn:focus-visible,
.checkout-action .shop-btn:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
/* 라디오·체크박스: 채움색 + 키보드 포커스 링 통일 */
input[type="radio"],input[type="checkbox"]{accent-color:var(--accent-deep)}
input[type="radio"]:focus-visible,input[type="checkbox"]:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
/* 약관·방침 상단 안내 콜아웃 (Phase1 무료·결제 미가동 고지) */
.doc .notice{margin:0 0 28px;padding:14px 18px;border-left:3px solid var(--accent);background:#faf8f4;border-radius:8px;color:var(--ink-2);font-size:15px;line-height:1.7}