/* 안내 페이지 공통 서식(.pagedoc).
   참가신청안내(/page/application-guide)와 같은 결이다 - 전에는 워드가 박아 둔 글꼴·크기·여백이
   쪽마다 달라 페이지를 옮길 때마다 다른 사이트처럼 보였다.

   색은 사이트 변수를 받아 쓰되 없을 때를 대비해 기본값을 적는다. 모든 규칙이 .pagedoc 안으로
   묶여 있어 머리글·메뉴·꼬리글에는 닿지 않는다. */
.pagedoc {
    --pd-main: var(--color-primary, #c8102e);
    --pd-ink: var(--color-text, #222);
    --pd-mute: var(--color-text-muted, #777);
    --pd-line: var(--color-border, #e6e6e6);
    --pd-soft: var(--color-bg-soft, #f8f8f9);
    color: var(--pd-ink);
    font-size: 15px;
    line-height: 1.8;
    word-break: keep-all;
}

.pagedoc p { margin: 0 0 14px; }
.pagedoc p:last-child { margin-bottom: 0; }
.pagedoc a { color: var(--pd-main); text-decoration: underline; }
.pagedoc strong, .pagedoc b { font-weight: 700; }
.pagedoc img { max-width: 100%; height: auto; display: block; margin: 20px auto; border-radius: 10px; }

/* 머리말 - 페이지가 무엇인지 한눈에. */
.pd-hero { padding: 8px 0 28px; border-bottom: 2px solid var(--pd-line); margin-bottom: 8px; }
.pd-hero__eyebrow { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
    color: var(--pd-main); margin-bottom: 10px; }
.pd-hero h1 { font-size: 30px; font-weight: 800; line-height: 1.35; margin: 0 0 12px; letter-spacing: -.02em; }
.pd-hero p { font-size: 16px; color: var(--pd-mute); margin: 0; }

/* 번호 붙은 큰 제목. 번호는 차례를 뜻할 때만 쓴다. */
.pagedoc h2 { font-size: 22px; font-weight: 800; margin: 52px 0 18px; letter-spacing: -.01em; line-height: 1.4; }
.pagedoc h2:first-child { margin-top: 8px; }
.pd-num { display: inline-block; min-width: 28px; height: 28px; line-height: 28px; margin-right: 10px;
    border-radius: 50%; background: var(--pd-main); color: #fff; font-size: 14px; text-align: center;
    vertical-align: 2px; font-weight: 700; }
.pagedoc h2 small { font-size: 13px; font-weight: 600; color: var(--pd-mute); margin-left: 8px; letter-spacing: .06em; }
.pagedoc h3 { font-size: 17px; font-weight: 700; margin: 30px 0 10px; }

/* 이름-값 목록(행사개요·관람안내처럼 "무엇: 무엇"이 줄줄이 있는 것). */
.pd-dl { display: grid; grid-template-columns: 140px 1fr; gap: 0; margin: 0;
    border-top: 1px solid var(--pd-line); }
.pd-dl dt { padding: 14px 0; border-bottom: 1px solid var(--pd-line); font-weight: 700; font-size: 14px; }
.pd-dl dd { padding: 14px 0; border-bottom: 1px solid var(--pd-line); margin: 0; }

/* 표. 좁은 화면에서는 표만 가로로 민다(본문은 안 밀린다). */
.pd-tablebox { overflow-x: auto; margin: 0 0 8px; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.pd-table th, .pd-table td { border: 1px solid var(--pd-line); padding: 11px 13px; vertical-align: middle; }
.pd-table thead th { background: var(--pd-soft); font-weight: 700; white-space: nowrap; }
.pd-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-table tbody th { background: var(--pd-soft); font-weight: 700; text-align: left; white-space: nowrap; }

/* 카드 묶음(전시분야 10개처럼 나란한 것). */
.pagedoc .pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pagedoc .pd-card { border: 1px solid var(--pd-line); border-radius: 12px; padding: 18px 20px; background: #fff; }
.pd-card__no { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--pd-main); margin-bottom: 6px; }
.pd-card__title { font-size: 15.5px; font-weight: 700; margin: 0 0 4px; }
.pd-card__sub { font-size: 13px; color: var(--pd-mute); margin: 0; }

/* 차례가 있는 걸음(입장 절차). */
.pagedoc .pd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; }
.pagedoc .pd-step { position: relative; padding: 18px 16px; border: 1px solid var(--pd-line); border-radius: 12px;
    background: #fff; text-align: center; }
.pd-step__no { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--pd-main); margin-bottom: 6px; }
.pd-step__t { font-size: 14.5px; font-weight: 700; }

/* 눈에 띄어야 하는 한 줄(무료·마감일 같은 것). */
.pagedoc .pd-highlight { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
    padding: 20px 22px; border-radius: 14px; background: var(--pd-soft); border: 1px solid var(--pd-line); margin: 0 0 8px; }
.pagedoc .pd-highlight dt { font-size: 13px; color: var(--pd-mute); }
.pagedoc .pd-highlight dd { margin: 0 20px 0 0; font-size: 22px; font-weight: 800; color: var(--pd-main);
    font-variant-numeric: tabular-nums; }

.pd-note { margin: 20px 0 0; padding: 16px 18px; border-radius: 10px; background: var(--pd-soft);
    font-size: 13px; line-height: 1.8; color: var(--pd-mute); }
.pd-note p { margin: 0 0 6px; }
.pd-note p:last-child { margin: 0; }
.pd-note ol, .pd-note ul { margin: 0; padding-left: 18px; }
.pd-note li { margin: 4px 0; }

/* 버튼 */
.pagedoc .pd-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px 0 0; }
/* 선택자 앞에 .pagedoc 을 붙여 둔다. 위의 `.pagedoc a` 가 글자색을 주색으로 칠하는데,
   그쪽이 더 구체적(클래스+태그)이라 `.pd-btn--fill` 의 흰 글자를 이겨 버린다 -
   그러면 주색 배경에 주색 글자가 되어 버튼 글씨가 안 보인다(실제로 그랬다). */
.pagedoc .pd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
    padding: 0 24px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none;
    border: 1px solid var(--pd-main); color: var(--pd-main); background: #fff; }
.pagedoc .pd-btn--fill { background: var(--pd-main); color: #fff; }
.pagedoc .pd-btn:hover { opacity: .88; text-decoration: none; }

/* 포스터처럼 그 자체가 볼거리인 그림. */
.pagedoc .pd-poster { margin: 0 0 8px; text-align: center; }
.pagedoc .pd-poster img { width: 100%; max-width: 420px; margin: 0 auto; border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .10); }

/* 행사개요 - 포스터와 항목 표를 나란히. 포스터에 적힌 날짜·장소가 옆 표에 그대로 있어서
   둘이 붙어 있어야 서로를 설명한다. 좁아지면 포스터가 위로 간다. */
/* 포스터와 개요 표를 <같은 선에서> 끝나게 한다.
   칸 너비를 못 박고 높이를 맞추려 하면 반드시 한쪽이 남는다 - 포스터 아래를 비우거나
   (그래서 지난번에 틀어졌다) 포스터를 잘라 내야 한다. 그래서 반대로 한다:
   줄 높이는 글(표)이 정하고, 포스터는 그 높이에 맞춰 <폭이 따라 줄었다 늘었다> 한다.
   비율은 그대로라 포스터는 잘리지도, 늘어나지도 않는다. */
.pd-overview { display: flex; gap: 32px; align-items: stretch; }
.pd-overview .pd-poster { margin: 0; display: flex; flex: 0 1 auto; }
.pd-overview .pd-poster img {
    height: 100%;
    width: auto;
    /* 글이 아주 길어졌을 때 포스터가 본문을 밀어내지 않게 폭을 묶어 둔다. */
    max-width: 340px;
    object-fit: contain;
    object-position: top center;
}
.pd-overview .pd-dl { margin: 0; flex: 1 1 0; min-width: 0; }

@media (max-width: 760px) {
    .pd-overview { grid-template-columns: 1fr; gap: 24px; }
    .pd-overview .pd-poster img { max-width: 360px; }
}

/* 인용처럼 보여 줄 짧은 글(스토리). */
.pagedoc .pd-lead { font-size: 19px; line-height: 1.9; font-weight: 600; letter-spacing: -.01em; margin: 0 0 20px; }
.pagedoc .pd-quote { padding: 28px 30px; border-radius: 16px; background: var(--pd-soft); font-size: 17px;
    line-height: 1.9; text-align: center; }

/* 글을 맺는 자리의 로고. 본문 폭을 다 쓰지 않고 가운데에 작게 둔다 -
   여기서 더 볼 것이 없다는 표시이지, 또 하나의 볼거리가 아니다. */
.pagedoc .pd-signoff {
    /* 앞 내용(카드 묶음 같은 것)과 선이 붙어 보이면 맺음이 아니라 덤처럼 읽힌다 -
       선 위에 넉넉히 띄운다. */
    margin: 88px 0 8px;
    padding-top: 44px;
    /* 본문이 끝났다는 줄. 로고가 앞 문단에 딸린 그림처럼 보이지 않게 한 칸 끊어 준다. */
    border-top: 1px solid var(--pd-line);
    text-align: center;
}
.pagedoc .pd-signoff img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    border-radius: 0;
    opacity: .82;
}

/* 글자를 한 단계 크게 쓰는 페이지(사전등록처럼 누구나 빨리 읽고 눌러야 하는 곳).
   .pagedoc 위에 .pd-big 을 같이 붙이면 된다 - 쓰는 구성요소는 그대로다. */
.pd-big { font-size: 18px; line-height: 1.85; }
.pd-big .pd-hero h1 { font-size: 40px; }
.pd-big .pd-hero p { font-size: 19px; }
.pd-big .pd-hero__eyebrow { font-size: 14px; }
.pd-big h2 { font-size: 26px; }
.pd-big .pd-num { min-width: 32px; height: 32px; line-height: 32px; font-size: 15px; }
.pd-big .pd-dl { grid-template-columns: 170px 1fr; }
.pd-big .pd-dl dt, .pd-big .pd-dl dd { padding: 17px 0; font-size: 17px; }
.pd-big .pd-dl dt { font-size: 16px; }
.pd-big .pd-dl small { font-size: 15px; color: var(--pd-mute); }
.pd-big .pd-highlight { padding: 26px 28px; }
.pd-big .pd-highlight dt { font-size: 15px; }
.pd-big .pd-highlight dd { font-size: 27px; }
.pd-big .pd-step__t { font-size: 17px; }
.pd-big .pd-step__no { font-size: 13px; }
.pd-big .pd-note { font-size: 15.5px; }

/* 큰 버튼 - 이 페이지에서 사람들이 누르러 온 바로 그것이다. */
.pd-actions--big { gap: 14px; margin-top: 32px; }
.pagedoc .pd-btn--big { min-height: 64px; padding: 0 38px; font-size: 20px; border-radius: 14px; border-width: 2px; }

@media (max-width: 860px) {
    .pd-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .pagedoc { font-size: 14.5px; }
    .pd-hero h1 { font-size: 24px; }
    .pagedoc h2 { font-size: 19px; margin-top: 40px; }
    .pd-dl { grid-template-columns: 1fr; }
    .pd-dl dt { padding-bottom: 0; border-bottom: 0; }
    .pd-steps { grid-template-columns: 1fr; }
    .pd-highlight dd { font-size: 19px; }
    .pd-lead { font-size: 17px; }
    .pd-quote { padding: 22px 20px; font-size: 16px; }
}

/* ============================================================================
   HANDMADE FESTA 2027 브랜드 — 안내 페이지에 입히는 겉옷
   ---------------------------------------------------------------------------
   위의 규칙은 그대로 두고 색과 글자만 브랜드에 맞춘다.
   연분홍은 <면>으로만 쓰고, 그 위 글자는 늘 먹색이다(11.7:1).
   ========================================================================== */
.pagedoc {
    --pd-blush: var(--brand-blush, #fad8e7);
    --pd-ink2: var(--brand-ink, #231f20);
    --pd-soft: var(--brand-cream, #fbf6f8);
    --pd-main: var(--brand-ink, #231f20);
}

/* 제목은 라틴만 Poppins 가 받고 한글은 Pretendard 로 넘어간다. */
.pd-hero h1,
.pagedoc h2,
.pagedoc h3 {
    font-family: var(--font-display, "Poppins", "Pretendard", sans-serif);
    letter-spacing: -.025em;
}

/* 머리말 - 아래 줄을 연분홍으로 굵게. 페이지마다 같은 자리에 같은 색이 온다. */
.pd-hero { border-bottom: 3px solid var(--pd-blush); padding-bottom: 24px; }
.pd-hero__eyebrow { color: var(--pd-ink2); }
.pd-hero h1 { font-size: 34px; }

/* 번호는 연분홍 동그라미에 먹색 숫자. */
.pd-num { background: var(--pd-blush); color: var(--pd-ink2); }

/* 링크 - 연분홍 밑줄을 깔고 글자는 먹색 그대로. 분홍 글자는 흰 바탕에서 안 보인다. */
.pagedoc a {
    color: var(--pd-ink2);
    text-decoration: none;
    background: linear-gradient(transparent 82%, var(--pd-blush) 82%);
    padding-bottom: 1px;
}
.pagedoc a:hover { background: linear-gradient(transparent 0%, var(--pd-blush) 0%); }

/* 표 머리줄은 먹색 바탕에 흰 글자, 옆머리는 연한 분홍 바탕. */
.pd-table thead th { background: var(--pd-ink2); color: #fff; border-color: var(--pd-ink2); }
.pd-table tbody th { background: var(--pd-soft); }

/* 눈에 띄어야 하는 한 줄 - 연분홍 판. */
.pagedoc .pd-highlight {
    background: var(--pd-blush);
    border: 0;
    border-radius: 2px;
}
.pagedoc .pd-highlight dt { color: var(--pd-ink2); opacity: .7; }
.pagedoc .pd-highlight dd { color: var(--pd-ink2); }

/* 알림 상자 - 아주 연한 분홍 바탕에 먹색 글자. 회색 글자보다 훨씬 잘 읽힌다. */
.pd-note {
    background: var(--pd-soft);
    border-left: 3px solid var(--pd-blush);
    border-radius: 0 8px 8px 0;
    color: var(--pd-ink2);
    opacity: 1;
}
.pd-note b { font-weight: 800; }

/* 카드·걸음 - 각지게, 올리면 연분홍으로. */
.pagedoc .pd-card,
.pagedoc .pd-step {
    border-radius: 2px;
    border-color: var(--pd-line);
    transition: background-color .2s ease, border-color .2s ease;
}
.pagedoc .pd-card:hover,
.pagedoc .pd-step:hover { background: var(--pd-blush); border-color: var(--pd-blush); }
.pd-card__no, .pd-step__no { color: var(--pd-ink2); opacity: .55; }

/* 버튼 - 채운 것은 먹색+흰 글자, 테두리만 있는 것은 올리면 연분홍이 깔린다. */
.pagedoc .pd-btn { border-radius: 999px; border-color: var(--pd-ink2); color: var(--pd-ink2); background: #fff; }
.pagedoc .pd-btn--fill { background: var(--pd-ink2); color: #fff; }
.pagedoc .pd-btn:hover { opacity: 1; background: var(--pd-blush); color: var(--pd-ink2); }
.pagedoc .pd-btn--fill:hover { background: var(--pd-blush); color: var(--pd-ink2); }

/* 인용 - 연분홍 판 위에 먹색 글자. */
.pagedoc .pd-quote { background: var(--pd-blush); color: var(--pd-ink2); border-radius: 2px; }

/* 포스터·사진 모서리를 각지게 맞춘다. */
.pagedoc img { border-radius: 2px; }
.pagedoc .pd-poster img { border-radius: 2px; box-shadow: 0 14px 40px rgba(35,31,32,.14); }

/* 맺음 로고 */
.pagedoc .pd-signoff { border-top: 1px solid var(--pd-blush); }

/* ============================================================================
   안내 페이지의 머리말 — 화면 폭을 꽉 채우는 사진 띠
   글만 있는 문서처럼 보여서 사이트의 다른 화면과 따로 놀았다. 속지(.page-head)와
   같은 결로 맞춘다 - 사진 한 장, 왼쪽이 짙은 먹색 덮개, 연분홍 꼬리표, 큰 제목.
   띠는 글 상자 밖으로 나가 화면 끝까지 가되, 글자는 본문과 같은 세로줄에 선다.
   ============================================================================ */
.pagedoc .pd-hero {
    position: relative;
    /* .page-code 의 위 여백(80px)을 되돌려 머리글 바로 아래에 붙인다. */
    margin: -80px calc(50% - 50vw) 56px;
    width: 100vw;
    padding: clamp(58px, 7vw, 96px) 0 clamp(50px, 6vw, 80px);
    border-bottom: 0;
    color: #ffffff;
    background-color: #231f20;
    background-image:
        linear-gradient(100deg,
            rgba(35, 31, 32, .95) 0%,
            rgba(35, 31, 32, .86) 38%,
            rgba(35, 31, 32, .52) 72%,
            rgba(35, 31, 32, .34) 100%),
        url("/img/hero-general.jpg");
    background-size: cover;
    background-position: center;
}

.pagedoc .pd-hero > * {
    max-width: var(--main-content-width, 1100px);
    margin-inline: auto;
    padding-inline: 24px;
}

.pagedoc .pd-hero__eyebrow {
    color: var(--pd-blush, #fad8e7);
    font-size: 12.5px;
    letter-spacing: .16em;
    margin-bottom: 20px;
}

.pagedoc .pd-hero h1 {
    color: #ffffff;
    font-size: clamp(27px, 3.4vw, 44px);
    line-height: 1.22;
    letter-spacing: -.035em;
    /* 가운데 정렬(margin-inline:auto)은 위의 `.pd-hero > *` 가 걸어 둔 것인데,
       여기서 margin 을 한꺼번에 적으면 좌우 auto 까지 0 으로 지워진다 -
       제목만 띠 왼쪽 끝으로 붙어 본문과 세로줄이 어긋났다. */
    margin: 0 auto;
}

.pagedoc .pd-hero p {
    color: rgba(255, 255, 255, .8);
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.75;
}

/* 꼬리표가 없는 쪽에는 연분홍 짧은 줄을 대신 세운다 - 제목이 그냥 떠 있지 않게. */
.pagedoc .pd-hero:not(:has(.pd-hero__eyebrow)) h1::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 0 22px;
    background: var(--pd-blush, #fad8e7);
}

/* 쪽마다 사진을 달리 둔다 - 메인의 카드와 같은 사진을 써서 눌러 들어온 자리가 이어진다. */
#pagecode-5 .pagedoc .pd-hero { background-image:
    linear-gradient(100deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.86) 38%, rgba(35,31,32,.52) 72%, rgba(35,31,32,.34) 100%),
    url("/img/hero-story.jpg"); }

#pagecode-6 .pagedoc .pd-hero { background-image:
    linear-gradient(100deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.86) 38%, rgba(35,31,32,.52) 72%, rgba(35,31,32,.34) 100%),
    url("/img/hero-concept.jpg"); }

#pagecode-7 .pagedoc .pd-hero { background-image:
    linear-gradient(100deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.86) 38%, rgba(35,31,32,.52) 72%, rgba(35,31,32,.34) 100%),
    url("/img/hero-items.jpg"); }

#pagecode-9 .pagedoc .pd-hero, #pagecode-10 .pagedoc .pd-hero, #pagecode-35 .pagedoc .pd-hero { background-image:
    linear-gradient(100deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.86) 38%, rgba(35,31,32,.52) 72%, rgba(35,31,32,.34) 100%),
    url("/img/hero-apply.jpg"); }

/* 좁은 화면 - 가로 그라데이션은 폭이 좁으면 글자 뒤가 밝아진다. 세로로 바꾼다. */
@media (max-width: 640px) {
    .pagedoc .pd-hero {
        margin: -48px calc(50% - 50vw) 34px;
        padding: 44px 0 38px;
        background-image:
            linear-gradient(160deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.84) 55%, rgba(35,31,32,.6) 100%),
            url("/img/hero-general.jpg");
    }
    .pagedoc .pd-hero > * { padding-inline: 16px; }
    #pagecode-5 .pagedoc .pd-hero { background-image:
        linear-gradient(160deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.84) 55%, rgba(35,31,32,.6) 100%),
        url("/img/hero-story.jpg"); }
    #pagecode-6 .pagedoc .pd-hero { background-image:
        linear-gradient(160deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.84) 55%, rgba(35,31,32,.6) 100%),
        url("/img/hero-concept.jpg"); }
    #pagecode-7 .pagedoc .pd-hero { background-image:
        linear-gradient(160deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.84) 55%, rgba(35,31,32,.6) 100%),
        url("/img/hero-items.jpg"); }
}

/* ---- 띠 아래 본문도 같이 손본다 ------------------------------------------- */

/* 큰 제목 위에 연분홍 짧은 줄 - 쪽 어디를 봐도 같은 신호가 온다. */
.pagedoc h2::before {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin: 0 0 14px;
    background: var(--pd-blush, #fad8e7);
}

/* 번호가 붙은 제목은 번호가 이미 표시다 - 줄을 또 세우지 않는다. */
.pagedoc h2:has(.pd-num)::before { content: none; }

/* 인용 - 회색 판 대신 연분홍 바탕에 큰 글씨. 쪽에서 한 번만 쓰는 자리라 세게 가도 된다. */
.pagedoc .pd-quote {
    padding: 40px 42px;
    border-radius: 2px;
    background: var(--pd-blush, #fad8e7);
    color: var(--pd-ink2, #231f20);
    font-family: var(--font-display, 'Poppins', 'Pretendard', sans-serif);
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: -.02em;
    text-align: center;
    margin: 36px 0;
}

/* 카드 묶음 - 사이를 띄우고 올리면 살짝 떠오르게. */
.pagedoc .pd-grid { gap: 18px; }

.pagedoc .pd-card {
    padding: 24px 24px 26px;
    transition: background-color .22s ease, border-color .22s ease,
                transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
}

.pagedoc .pd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(35, 31, 32, .1);
}

/* 맺는 로고 - 위에 넉넉히 비우고 연분홍 실선 한 줄로 글을 닫는다. */
.pagedoc .pd-signoff {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--pd-blush, #fad8e7);
}

/* ============================================================================
   전시분야 칸 - 글자만 적힌 네모가 아니라 사진 타일로
   분야마다 맞는 사진을 깔고 글자는 그 위에 얹는다. 사진은 저마다 밝기가 달라서
   덮개 없이 흰 글자를 올리면 어떤 사진에서는 글자가 날아간다 - 아래쪽을 깊게 덮는다.
   마우스를 올리면 사진이 천천히 커지면서 덮개가 장미색으로 물들고, 칸 둘레에
   연분홍 테가 생긴다.
   사진 주소는 칸마다 인라인(--cat-img)으로 들어온다 - 분야를 바꾸면 그 줄만 고치면 된다.
   ============================================================================ */
.pagedoc .pd-card--img {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
    padding: 22px 22px 20px;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    background-color: #231f20;
    isolation: isolate;
}

/* 사진 - 따로 한 겹으로 둔다. 배경 그림은 크기를 부드럽게 못 키운다. */
.pagedoc .pd-card--img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--cat-img);
    background-size: cover;
    background-position: center;
    transition: transform .65s cubic-bezier(.2, .7, .3, 1), filter .4s ease;
}

/* 덮개 - 아래가 짙고 위로 갈수록 옅다. */
.pagedoc .pd-card--img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(35, 31, 32, .12) 0%,
        rgba(35, 31, 32, .34) 45%,
        rgba(35, 31, 32, .88) 100%);
    transition: background .35s ease;
}

.pagedoc .pd-card--img:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(35, 31, 32, .22),
                0 0 0 3px var(--pd-blush, #fad8e7);
    background-color: #231f20;
    border-color: transparent;
}

.pagedoc .pd-card--img:hover::before { transform: scale(1.07); }

.pagedoc .pd-card--img:hover::after {
    background: linear-gradient(180deg, rgba(194, 86, 131, .42) 0%, rgba(35, 31, 32, .92) 100%);
}

/* 번호·이름·우리말 이름 */
.pagedoc .pd-card--img .pd-card__no {
    color: var(--pd-blush, #fad8e7);
    opacity: 1;
    font-size: 12px;
    letter-spacing: .14em;
    margin-bottom: 10px;
}

.pagedoc .pd-card--img .pd-card__title {
    font-family: var(--font-display, 'Poppins', 'Pretendard', sans-serif);
    color: #ffffff;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* 이름 아래 짧은 연분홍 줄 - 올리면 길어진다. */
.pagedoc .pd-card--img .pd-card__title::after {
    content: "";
    display: block;
    width: 22px;
    height: 3px;
    margin-top: 10px;
    background: var(--pd-blush, #fad8e7);
    transition: width .35s ease;
}

.pagedoc .pd-card--img:hover .pd-card__title::after { width: 48px; }

.pagedoc .pd-card--img .pd-card__sub {
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    margin: 8px 0 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

/* 손가락으로 쓰는 화면에는 hover 가 없다 - 덮개를 처음부터 짙게 둔다. */
@media (hover: none) {
    .pagedoc .pd-card--img::after {
        background: linear-gradient(180deg, rgba(35, 31, 32, .3) 0%, rgba(35, 31, 32, .9) 100%);
    }
}

/* 사전등록 - 포스터 옆 칸에 개요 표와 단추를 세로로 쌓는다("홈페이지 수정 3차" 마지막 장). */
.pagedoc .pd-overview__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pagedoc .pd-overview__col .pd-dl { margin: 0; }

/* 단추는 가운데가 아니라 표와 같은 왼쪽 선에서 시작한다 - 표 아래에 붙은 한 덩어리로 읽힌다. */
.pagedoc .pd-actions--pair {
    justify-content: flex-start;
    margin: 0;
}

.pagedoc .pd-actions--pair .pd-btn { flex: 1 1 200px; }

@media (max-width: 760px) {
    .pagedoc .pd-overview__col { gap: 18px; }
    .pagedoc .pd-actions--pair .pd-btn { flex: 1 1 100%; }
}
/* ============================================================================
   좁은 화면 바로잡기

   포스터와 개요 표를 나란히 두는 .pd-overview 는 flex 다. 그런데 좁은 화면 규칙이
   `grid-template-columns: 1fr` 로 적혀 있었다 - grid 전용 속성이라 flex 에는 아무
   효력이 없다(예전에 grid 였던 흔적이다). 그래서 폰에서도 둘이 계속 나란히 서서
   표가 화면 밖으로 밀려났다. 세로로 쌓는 것은 flex-direction 으로 해야 한다.
   ============================================================================ */
@media (max-width: 760px) {
    .pagedoc .pd-overview {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .pagedoc .pd-overview .pd-poster { width: 100%; }
    .pagedoc .pd-overview .pd-poster img { max-width: 100%; height: auto; }
    .pagedoc .pd-overview__col { width: 100%; min-width: 0; }

    /* 이름 칸을 줄이고, 값이 길면 줄을 바꾼다. */
    .pagedoc .pd-dl { grid-template-columns: 92px 1fr; }
    .pagedoc .pd-steps { grid-template-columns: repeat(2, 1fr); }
}

/*  flex·grid 칸은 기본이 "내용보다 작아지지 않음" 이라, 긴 글 한 줄이 칸을 넓혀
    화면 밖으로 민다. 줄어들 수 있게 풀어 준다. */
.pagedoc .pd-overview__col,
.pagedoc .pd-overview .pd-dl,
.pagedoc .pd-dl dd,
.pagedoc .pd-dl dt {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    /*  이름과 값을 위아래로 - 92px 도 아까운 폭이다. */
    .pagedoc .pd-dl { grid-template-columns: 1fr; }
    .pagedoc .pd-dl dt { padding: 14px 0 0; border-bottom: 0; }
    .pagedoc .pd-dl dd { padding: 4px 0 14px; }
    .pagedoc .pd-steps { grid-template-columns: 1fr; }
    .pagedoc .pd-grid { grid-template-columns: 1fr; }
    .pagedoc .pd-quote { padding: 26px 20px; }
}

/* 전시분야 칸 - 설명 줄 수가 달라 제목 높이가 들쭉날쭉하던 것.
   칸 안의 글은 아래쪽에 붙여 두었다. 그래서 설명이 한 줄인 칸은 제목이 24px 내려앉고
   두 줄인 칸은 그만큼 올라가, 같은 줄에 선 칸끼리 제목이 어긋나 보였다.
   설명 자리를 두 줄만큼 미리 잡아 두면 한 줄짜리도 같은 높이에서 시작한다. */
.pagedoc .pd-card--img .pd-card__sub {
    line-height: 1.6;
    min-height: 3.2em;      /* 두 줄 */
}