/* ============================================================
   BETWEEN FORMS — 민병헌 개인전 (Particle × House of Photography)
   wrapper 클래스: .between-forms  /  S3: assets/css/promotion/between-forms.css
   index.html 인라인 <style> 추출 + 네임스페이스 적용
   ============================================================ */

/* ---------- wrapper: breakout + 본문 기본값 강제 ---------- */
.between-forms{
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  background: #ffffff;
  text-align: left;
}

@media (min-width: 60em){
  .between-forms{
    width: 100vw !important;
    max-width: 1360px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

.between-forms,
.between-forms *{ box-sizing: border-box; }

/* ---------- 폰트 로딩 (admin 본문에도 반영) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ---------- 네임스페이스 적용된 index.html <style> ---------- */
.between-forms{
    --bg: #ffffff;
    --bg-2: #f3f3f3;
    --beige: #f3f3f3;
    --ink: #171717;
    --ink-2: #4a4a4a;
    --muted: #909090;
    --line: #d8d8d8;
    --line-soft: #ececec;
    --rust: #9a9a9a;
    --rust-deep: #1a1a1a;
    --paper: #f7f7f7;
    --max: 1130px;

    --venue-a: #1a1a1a;   /* Particle · Landscape */
    --venue-b: #2c2c2c;   /* House of Photography · Figure */
  }

  .between-forms, .between-forms *{box-sizing:border-box;}
  .between-forms, .between-forms{margin:0;padding:0;}
  .between-forms{
    background: var(--bg);
    color: var(--ink);
    font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .between-forms img{display:block;max-width:100%;}
  .between-forms a{color:inherit;}

  /* ---------- hero (video) ---------- */
  .between-forms .hero{
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #1a1a1a;
    line-height: 0;
  }
  .between-forms .hero-video{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* ---------- section frame ---------- */
  .between-forms .wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 24px;
  }

  .between-forms .eyebrow{
    font-family: "Jost", sans-serif;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--rust);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .between-forms .eyebrow::before{
    content:""; width: 28px; height: 1px; background: var(--rust);
    display:inline-block;
  }

  /* ---------- about (merged intro + statement) ---------- */
  .between-forms .about{
    padding: 112px 0 104px;
    background: var(--beige);
  }
  .between-forms .about-head{
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .between-forms .about-head .eyebrow{
    justify-content: center;
  }
  .between-forms .about-head .eyebrow::after{
    content:""; width: 28px; height: 1px; background: var(--rust);
    display:inline-block;
  }
  .between-forms .about-head h1{
    margin: 8px 0 0;
    font-family: "Jost", sans-serif;
    font-weight: 300;
    font-size: 68px;
    line-height: 1.02;
    letter-spacing: 0.03em;
    color: var(--ink);
  }
  .between-forms .about-head .sub-kr{
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.005em;
    color: var(--ink-2);
  }
  .between-forms .about-head .lead{
    margin: 12px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-family: inherit;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.6;
    color: var(--ink);
    letter-spacing: -0.005em;
    text-wrap: pretty;
    max-width: 560px;
  }

  .between-forms .about-body{
    max-width: 980px;
    margin: 0 auto;
    columns: 2;
    column-gap: 64px;
    column-rule: 1px solid var(--line);
  }
  .between-forms .about-body p{
    margin: 0 0 22px;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.9;
    text-wrap: pretty;
    break-inside: avoid;
  }
  .between-forms .about-body p:last-child{margin-bottom:0;}

  /* ---------- concept row (shared imagery) ---------- */
  .between-forms .concept-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    margin-top: 72px;
  }
  .between-forms .concept-row figure{
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.25);
  }
  .between-forms .concept-row figure img{
    width:100%; height:100%; object-fit: cover; display:block;
  }

  /* ---------- two exhibitions (split) ---------- */
  .between-forms .exhibitions{
    padding: 96px 0 112px;
    background: var(--beige);
  }
  .between-forms .venue-name{
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.005em;
    color: var(--ink-2);
    margin-bottom: -14px;
  }

  .between-forms .split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--ink);
  }
  .between-forms .venue{
    padding: 56px 40px 72px;
    border-right: 1px solid var(--line);
    display:flex;
    flex-direction: column;
    gap: 24px;
    background: transparent;
  }
  .between-forms .venue:last-child{border-right: none;}

  .between-forms .venue .venue-eyebrow{
    font-family: "Jost", sans-serif;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-size: 10.5px;
    color: var(--rust);
    display:flex; align-items:center; gap:10px;
  }
  .between-forms .venue .venue-eyebrow i{
    display:inline-block; width: 24px; height: 1px; background: var(--rust);
  }
  .between-forms .venue h3{
    margin: 4px 0 0;
    font-family: "Jost", sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--ink);
  }
  .between-forms .venue h3 .kr-tag{
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-left: 6px;
    white-space: nowrap;
  }
  .between-forms .venue .venue-hero{
    margin: 8px 0 4px;
    aspect-ratio: 4 / 3;
    background: #1a1a1a;
    overflow:hidden;
  }
  .between-forms .venue .venue-hero img{
    width:100%; height:100%; object-fit: cover; display:block;
  }
  .between-forms .venue p{
    margin: 0 0 14px;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.85;
    text-wrap: pretty;
  }
  .between-forms .venue p:last-of-type{margin-bottom: 0;}

  .between-forms .venue-meta{
    margin-top: 4px;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--line);
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
  }
  .between-forms .venue-meta .m-cell{
    background: var(--bg);
    padding: 20px 22px 22px;
    display:flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
  }
  .between-forms .venue-meta .m-cell.full{
    grid-column: span 2;
    min-height: 110px;
  }
  .between-forms .venue-meta .m-label{
    font-family: "Jost", sans-serif;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 10px;
    color: var(--rust);
  }
  .between-forms .venue-meta .m-value{
    font-family: inherit;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .between-forms .venue-meta .m-sub{
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
  }
  .between-forms .venue-body{
    margin-top: 8px;
  }

  /* ---------- shared info bar ---------- */
  .between-forms .shared-info{
    padding: 96px 0 88px;
    background: var(--bg);
  }
  .between-forms .info-cell.feature{background: var(--beige);}
  .between-forms .info-grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .between-forms .info-cell{
    background: var(--bg);
    padding: 28px 28px 32px;
    display:flex;
    flex-direction: column;
    gap: 12px;
    min-height: 132px;
  }
  .between-forms .info-cell .label{
    font-family: "Jost", sans-serif;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 10.5px;
    color: var(--rust);
  }
  .between-forms .info-cell .value{
    font-family: inherit;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.45;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .between-forms .info-cell .sub{
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.6;
  }
  .between-forms .info-cell.span-4{grid-column: span 4;}
  .between-forms .info-cell.span-6{grid-column: span 6;}
  .between-forms .info-cell.span-12{grid-column: span 12;}
  .between-forms .info-cell.feature .value{font-size: 24px;}
  .between-forms .info-cell .value .ex-en{
    font-family: "Jost", sans-serif;
    font-weight: 400;
    letter-spacing: 0.03em;
  }
  .between-forms .info-cell .value .ex-kr{
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin-left: 4px;
    white-space: nowrap;
  }
  .between-forms .info-cell .value.with-cta{
    display:flex;
    align-items:center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .between-forms .cta-book{
    display:inline-flex;
    align-items:center;
    gap: 4px;
    padding: 9px 20px 10px;
    background: #029570;
    color: #fff;
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.2s ease;
    white-space: nowrap;
  }
  .between-forms .cta-book:hover, .between-forms .cta-book:focus{
    background: #017a5c;
    outline: none;
  }
  .between-forms .cta-book::after{
    content: "→";
    font-family: "Jost", sans-serif;
    font-size: 14px;
    margin-left: 3px;
    line-height: 1;
  }
  .between-forms .info-cell .sub-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display:flex;
    flex-direction: column;
    gap: 8px;
  }
  .between-forms .info-cell .sub-list li{
    position: relative;
    padding-left: 14px;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.65;
    text-wrap: pretty;
  }
  .between-forms .info-cell .sub-list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    background: var(--rust);
    border-radius: 50%;
  }

  /* ---------- notice ---------- */
  .between-forms .notice{
    padding: 96px 0 112px;
    background: var(--bg);
  }
  .between-forms .notice-head{
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .between-forms .notice-head .eyebrow{
    justify-content: center;
  }
  .between-forms .notice-head .eyebrow::after{
    content:""; width: 28px; height: 1px; background: var(--rust);
    display:inline-block;
  }
  .between-forms .notice-head h2{
    margin: 6px 0 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .between-forms .notice-content{
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
  }
  .between-forms .notice ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display:flex;
    flex-direction: column;
    gap: 14px;
  }
  .between-forms .notice li{
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
    text-wrap: pretty;
  }
  .between-forms .notice li::before{
    content:"—";
    position:absolute;
    left: 0;
    color: var(--rust);
  }

  .between-forms .donation{
    margin-top: 32px;
    padding: 24px 28px;
    background: var(--beige);
    border-left: 3px solid #029570;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--ink-2);
  }
  .between-forms .donation strong{
    display:block;
    color: #029570;
    font-weight: 500;
    margin-bottom: 4px;
    letter-spacing: -0.005em;
  }

  /* ---------- responsive ---------- */
  @media (max-width: 960px){
    .between-forms .about-body{
      columns: 1;
      column-rule: none;
    }
    .between-forms .about-head h1{font-size: 54px;}
    .between-forms .split{
      grid-template-columns: 1fr;
      border-top: 1px solid var(--ink);
    }
    .between-forms .venue{
      border-right: none;
      border-bottom: 1px solid var(--line);
      padding: 48px 24px 56px;
    }
    .between-forms .venue:last-child{border-bottom: none;}
    .between-forms .info-cell.span-4, .between-forms .info-cell.span-6{grid-column: span 6;}
    .between-forms .concept-row{gap: 12px;}
  }

  @media (max-width: 560px){
    .between-forms{font-size: 15px;}
    .between-forms .wrap{padding: 0 18px;}

    .between-forms .about{padding: 72px 0 64px;}
    .between-forms .about-head h1{font-size: 40px;}
    .between-forms .about-head .sub-kr{font-size: 15px;}
    .between-forms .about-head .lead{font-size: 17px; padding-top: 20px;}
    .between-forms .about-body p{font-size: 14.5px;}

    .between-forms .exhibitions{padding: 56px 0 72px;}
    .between-forms .venue{padding: 40px 18px 48px; gap: 18px;}
    .between-forms .venue-name{font-size: 14px;}
    .between-forms .venue h3{font-size: 24px;}

    .between-forms .shared-info{padding: 56px 0;}
    .between-forms .info-cell{padding: 22px 20px 24px; min-height: 0;}
    .between-forms .info-cell.span-4, .between-forms .info-cell.span-6, .between-forms .info-cell.span-12{grid-column: span 12;}
    .between-forms .info-cell .value{font-size: 17px;}
    .between-forms .info-cell.feature .value{font-size: 20px;}

    .between-forms .notice{padding: 64px 0 80px;}
    .between-forms .notice-head h2{font-size: 24px;}
    .between-forms .notice-head{margin-bottom: 32px;}
    .between-forms .concept-row{grid-template-columns: 1fr; gap: 12px; margin-top: 40px;}
  }