/* =====================================================================
   Inquiry Brief — 사이트 하단 문의 3종 공용 디자인 (2026-09-30)

   프로젝트 문의(includes/contact-section.php), 프로그램 피드백
   (includes/program-inquiry-section.php), 서버 진단 신청(security.php #apply)이
   같은 틀을 쓴다.

   구조: .ib > .ib-grid > (.ib-stage | .ib-main)
   - 좌측 .ib-stage 는 GNB 바로 아래에 붙는 sticky 다크 무대다. 폼에 입력하는
     대로 채워지는 문서(.ib-doc)를 보여 주고, 접수되면 도장이 찍힌다.
   - 우측 .ib-main 은 흰 폼이다. 질문마다 번호 레일(.ib-q-rail)이 있고 답을
     채우면 노드와 선이 포인트색으로 바뀐다.
   - 포인트색은 --ib-accent 하나다. 섹션마다 기존 토큰(--contact-color-primary,
     --pgq-primary, security 의 --coral)을 연결하므로 페이지 브랜드색을 그대로 받는다.
   - 규칙은 모두 클래스 두 개 이상(0,2,0)으로 쓴다. 페이지 CSS 의 `.web2-page p`,
     `.aib-page a` 같은 (0,1,1) 규칙을 이기기 위해서다.
   - 섹션의 padding/background/overflow 만 !important 로 고정한다.
     `.bluepdf-page section { padding }`, `html[data-theme=light] .web-page .contact`
     같은 페이지 오버라이드가 풀블리드를 깨뜨리고, overflow 가 바뀌면 sticky 가 죽는다.
   - 좌측 무대에 overscroll-behavior: contain 을 쓰지 않는다. 넘치는 내용이 없어도
     휠이 문서로 넘어가지 않아 페이지 스크롤이 멈춘다(2026-09-10 사례).
   ===================================================================== */

.ib {
    --ib-accent: #245bc1;
    --ib-accent-strong: #1a47a0;
    --ib-accent-glow: var(--ib-accent);
    --ib-accent-lite: color-mix(in srgb, var(--ib-accent-glow) 56%, #ffffff);
    --ib-accent-soft: color-mix(in srgb, var(--ib-accent) 9%, #ffffff);
    --ib-accent-ring: color-mix(in srgb, var(--ib-accent) 16%, transparent);

    --ib-stage: #07090e;
    --ib-stage-ink: #f3f5f9;
    --ib-stage-body: #a7afbf;
    --ib-stage-muted: #737d91;
    --ib-stage-line: rgba(255, 255, 255, 0.12);

    --ib-paper: #fdfdfb;
    --ib-paper-ink: #0c1018;
    --ib-paper-body: #414a59;
    --ib-paper-muted: #858d9b;
    --ib-paper-line: #e6e8ec;

    --ib-surface: #ffffff;
    --ib-ink: #0c1018;
    --ib-body: #3b4453;
    --ib-muted: #626b7b;
    --ib-faint: #939cab;
    --ib-line: #e8ebf0;
    --ib-line-strong: #d8dde5;
    --ib-field: #f5f6f8;
    --ib-danger: #d92d20;
    --ib-ok: #13794a;

    --ib-top: 84px;
    --ib-pad-x: clamp(1.5rem, 4vw, 4rem);
    --ib-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    --ib-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    --ib-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --ib-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --ib-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --ib-i-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.2l-8.4 8.4a5.4 5.4 0 01-7.7-7.7l8.9-8.9a3.6 3.6 0 015.1 5.1l-8.9 8.9a1.8 1.8 0 01-2.6-2.6l8.2-8.2'/%3E%3C/svg%3E");
    --ib-i-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3.5'/%3E%3Ccircle cx='8.8' cy='8.8' r='1.8'/%3E%3Cpath d='M21 15.5l-5.2-5.2L5 21'/%3E%3C/svg%3E");
    --ib-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23626b7b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 섹션별 포인트색 연결 ----------
   프로젝트 문의: 페이지가 .contact 에 주는 --contact-color-primary(-strong).
   어두운 무대 위 글자는 --cta-accent(라이트 페이지에서 원색을 흰색과 섞은 값)를 쓰고,
   없으면 같은 방식으로 만든다. --contact-color-primary-readable 은 페이지와 따로 놀아서
   (bluezip 주황 페이지에도 기본 인디고가 남는다) 쓰지 않는다. */
.contact.ib {
    --ib-accent: var(--contact-color-primary, #245bc1);
    --ib-accent-strong: var(--contact-color-primary-strong, #1a47a0);
    --ib-accent-glow: var(--contact-color-primary, #245bc1);
    --ib-accent-lite: var(--cta-accent, color-mix(in srgb, var(--contact-color-primary, #245bc1) 58%, #ffffff));
}

/* 프로그램 피드백: 페이지 body 클래스별 --pgq-primary */
.pgq.ib {
    --pgq-primary: #2563eb;
    --pgq-primary-strong: #1d4ed8;
    --ib-accent: var(--pgq-primary);
    --ib-accent-strong: var(--pgq-primary-strong);
    --ib-accent-glow: var(--pgq-primary);
}

.bluecapture-page .pgq.ib    { --pgq-primary: #2563eb; --pgq-primary-strong: #1d4ed8; }
.bluepdf-page .pgq.ib        { --pgq-primary: #2f6be0; --pgq-primary-strong: #245ac2; }
.bluemedia-page .pgq.ib      { --pgq-primary: #5b52e0; --pgq-primary-strong: #4c40d8; }
.bluemusic-page .pgq.ib      { --pgq-primary: #6d4bf0; --pgq-primary-strong: #5a38e0; }
.blueresponsive-page .pgq.ib { --pgq-primary: #159c8d; --pgq-primary-strong: #0e7c70; }
.imgview-page .pgq.ib        { --pgq-primary: #1fa6ae; --pgq-primary-strong: #158089; }
.sns-share-page .pgq.ib      { --pgq-primary: #3a4cb5; --pgq-primary-strong: #2f3d99; }
.shutdown-page .pgq.ib       { --pgq-primary: #e85d3d; --pgq-primary-strong: #c4451f; }
.bluezip-page .pgq.ib        { --pgq-primary: #ff6f4d; --pgq-primary-strong: #df5b40; }
.imgmap-page .pgq.ib         { --pgq-primary: #4f46e5; --pgq-primary-strong: #3730a3; }

/* 서버 진단 신청(security.php): 페이지 코랄. 흰 바탕 글자용은 대비를 위해 한 단계 어둡게 */
.sec-form-section.ib {
    --ib-accent: var(--coral, #ff5236);
    --ib-accent-strong: #c93a1f;
    --ib-accent-glow: var(--coral, #ff5236);
}

/* ---------- 섹션 리셋 ---------- */

section.ib {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 !important;
    background: var(--ib-surface) !important;
    color: var(--ib-ink);
    overflow: visible !important;
    text-align: left;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
    scroll-margin-top: var(--ib-top);
}

section.ib::before,
section.ib::after { display: none !important; }

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

.ib .ib-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
}

/* =====================================================================
   좌: 다크 무대
   ===================================================================== */

.ib .ib-stage {
    position: sticky;
    top: var(--ib-top);
    z-index: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--ib-top));
    height: calc(100dvh - var(--ib-top));
    min-height: 32rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(1.5rem, 4.5vh, 3.25rem) var(--ib-pad-x);
    background:
        radial-gradient(58% 42% at 100% 0%, color-mix(in srgb, var(--ib-accent-glow) 22%, transparent), transparent 72%),
        var(--ib-stage);
    color: var(--ib-stage-ink);
    isolation: isolate;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.ib .ib-stage-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    /* 아주 옅은 필름 그레인 — 평평한 단색 대신 인쇄물 같은 결만 남긴다(알파 6%) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* 아래에서 번지는 포인트색 빛 — 천천히 움직인다 */
.ib .ib-stage-fx::before {
    content: "";
    position: absolute;
    left: -38%;
    bottom: -46%;
    width: 110%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ib-accent-glow) 62%, transparent), color-mix(in srgb, var(--ib-accent-glow) 18%, transparent) 55%, transparent);
    opacity: 0.62;
    animation: ib-drift 19s ease-in-out infinite alternate;
}

/* 가는 격자 — 설계 도면 느낌. 가장자리는 마스크로 지운다 */
.ib .ib-stage-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(90% 70% at 30% 62%, #000 18%, transparent 78%);
    mask-image: radial-gradient(90% 70% at 30% 62%, #000 18%, transparent 78%);
}

.ib .ib-stage-inner {
    position: relative;
    width: 100%;
    max-width: 29rem;
    margin: auto 0 auto auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3.4vh, 2.4rem);
}

.ib .ib-intro {
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.8vh, 1.1rem);
}

.ib .ib-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ib-accent-lite);
}

.ib .ib-eyebrow-dot {
    position: relative;
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ib-accent-lite);
}

.ib .ib-eyebrow-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--ib-accent-lite);
    opacity: 0;
    animation: ib-ping 2.6s ease-out infinite;
}

.ib .ib-title {
    margin: 0;
    font-size: clamp(1.85rem, 1.2vw + 1.2rem, 2.6rem);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--ib-stage-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* 일본어는 전역 규칙(:lang(ja) { word-break: normal !important })이 keep-all 을 풀어
   "アイ/デア"처럼 단어 중간에서 끊긴다. 제목만 구문 단위로 끊는다(미지원 브라우저는 normal). */
.ib .ib-title:lang(ja),
.ib .ib-q-title:lang(ja),
.ib .ib-done-title:lang(ja) { word-break: auto-phrase !important; }

/* 강조구는 자기 줄에서 시작한다. 이어 붙이면 balance 가 긴 블록에서 포기해
   "…정리해 / 보세요" 같은 꼬리 줄이 남는다. */
.ib .ib-title-accent {
    display: block;
    color: var(--ib-accent-lite);
}

.ib .ib-lead {
    margin: 0;
    max-width: 27rem;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ib-stage-body);
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

/* ---------- 라이브 문서 ---------- */

.ib .ib-doc-slot { position: relative; }

.ib .ib-doc {
    position: relative;
    width: 100%;
    max-width: 27rem;
    border-radius: 1.1rem;
    background:
        linear-gradient(180deg, #ffffff 0%, var(--ib-paper) 30%),
        var(--ib-paper);
    color: var(--ib-paper-ink);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 34px 70px -28px rgba(0, 0, 0, 0.78),
        0 20px 50px -26px color-mix(in srgb, var(--ib-accent-glow) 55%, transparent);
    transform: rotate(-1.6deg) translateY(6px);
    transform-origin: 28% 90%;
    transition: transform 0.8s var(--ib-ease), box-shadow 0.8s var(--ib-ease);
    word-break: keep-all;
}

/* 폼을 만지기 시작하면 비스듬히 놓여 있던 문서가 바로 선다 */
.ib.is-engaged .ib-doc { transform: none; }

.ib .ib-doc-bar {
    position: absolute;
    top: 0;
    left: 1.1rem;
    right: 1.1rem;
    height: 3px;
    overflow: hidden;
    border-radius: 0 0 3px 3px;
    background: var(--ib-paper-line);
}

.ib .ib-doc-bar > span {
    display: block;
    height: 100%;
    width: calc(var(--ib-progress, 0) * 100%);
    background: var(--ib-accent);
    transition: width 0.55s var(--ib-ease);
}

.ib .ib-doc-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.15rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--ib-paper-line);
}

.ib .ib-doc-kind {
    font-family: var(--ib-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ib-paper-ink);
    white-space: nowrap;
}

.ib .ib-doc-meta {
    font-family: var(--ib-mono);
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    color: var(--ib-paper-muted);
    white-space: nowrap;
}

.ib .ib-doc-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem 0.3rem 0.55rem;
    border-radius: 999px;
    background: #fff4d8;
    color: #8a5800;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.ib .ib-doc-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: ib-blink 1.6s ease-in-out infinite;
}

.ib .ib-doc-status[data-state="ready"] {
    background: var(--ib-accent-soft);
    color: var(--ib-accent-strong);
}

.ib .ib-doc-status[data-state="sent"] {
    background: #e5f5ec;
    color: var(--ib-ok);
}

.ib .ib-doc-status[data-state="ready"] i,
.ib .ib-doc-status[data-state="sent"] i { animation: none; }

.ib .ib-doc-rows {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0;
}

.ib .ib-doc-row {
    position: relative;
    display: grid;
    grid-template-columns: 6.2rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding: 0.78rem 1.25rem;
}

.ib .ib-doc-row + .ib-doc-row { border-top: 1px dashed var(--ib-paper-line); }

.ib .ib-doc-row.is-updated { animation: ib-flash 1s ease; }

.ib .ib-doc-key {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ib-paper-muted);
}

.ib .ib-doc-key > b {
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid var(--ib-paper-line);
    border-radius: 50%;
    font-family: var(--ib-mono);
    font-size: 0.56rem;
    font-weight: 700;
    color: var(--ib-paper-muted);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

.ib .ib-doc-key > b::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.7rem;
    height: 0.7rem;
    background: #ffffff;
    -webkit-mask: var(--ib-i-check) center / contain no-repeat;
    mask: var(--ib-i-check) center / contain no-repeat;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.ib .ib-doc-row.is-filled .ib-doc-key { color: var(--ib-paper-body); }

.ib .ib-doc-row.is-filled .ib-doc-key > b {
    border-color: var(--ib-accent);
    background: var(--ib-accent);
    color: transparent;
}

.ib .ib-doc-row.is-filled .ib-doc-key > b::after { opacity: 1; transform: none; }

.ib .ib-doc-val {
    display: block;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ib-paper-ink);
    overflow-wrap: anywhere;
}

/* 비어 있는 값은 회색 막대(빈칸)로 보여 준다 */
.ib .ib-doc-val:empty::before {
    content: "";
    display: block;
    width: var(--ib-skel, 64%);
    height: 0.5rem;
    margin-top: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #eceef2, #f5f6f8);
}

.ib .ib-doc-row:nth-child(2) .ib-doc-val { --ib-skel: 46%; }
.ib .ib-doc-row:nth-child(3) .ib-doc-val { --ib-skel: 82%; }
.ib .ib-doc-row:nth-child(4) .ib-doc-val { --ib-skel: 58%; }

.ib .ib-doc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.ib .ib-doc-tag {
    display: inline-block;
    padding: 0.14rem 0.45rem;
    border-radius: 0.35rem;
    background: var(--ib-accent-soft);
    color: var(--ib-accent-strong);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
}

.ib .ib-doc-quote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ib-paper-body);
    white-space: pre-line;
}

.ib .ib-doc-sub {
    display: block;
    margin-top: 0.1rem;
    font-family: var(--ib-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ib-paper-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ib .ib-doc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem 1rem;
    border-top: 1px solid var(--ib-paper-line);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ib-paper-muted);
}

.ib .ib-doc-count {
    font-family: var(--ib-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ib-paper-ink);
    white-space: nowrap;
}

/* 접수 도장 */
.ib .ib-stamp {
    position: absolute;
    right: 1.15rem;
    bottom: 2.85rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    padding: 0.55rem 0.95rem 0.5rem;
    border: 2.5px solid var(--ib-accent-strong);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--ib-paper) 72%, transparent);
    box-shadow: inset 0 0 0 2px var(--ib-paper), inset 0 0 0 3.5px var(--ib-accent-strong);
    color: var(--ib-accent-strong);
    line-height: 1.1;
    white-space: nowrap;
    /* 대기 상태는 원래 크기로 둔다. 확대해 두면 투명해도 페이지 가로 폭을 밀어낸다. */
    opacity: 0;
    visibility: hidden;
    transform: rotate(-11deg);
    pointer-events: none;
}

.ib .ib-stamp-main {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.ib .ib-stamp-sub {
    font-family: var(--ib-mono);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.ib.is-received .ib-stamp {
    visibility: visible;
    animation: ib-stamp 0.6s cubic-bezier(0.3, 1.45, 0.5, 1) forwards;
}
.ib.is-received .ib-doc { animation: ib-thud 0.45s 0.22s ease-out; }

/* ---------- 이슈 티켓(프로그램 피드백) ---------- */

.ib .ib-ticket-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.05rem 1.25rem 1.15rem;
}

.ib .ib-ticket-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ib .ib-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: 0.4rem;
    background: #eef0f3;
    color: var(--ib-paper-body);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

.ib .ib-tag--program {
    background: var(--ib-paper-ink);
    color: #ffffff;
    font-family: var(--ib-mono);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
}

.ib .ib-tag--sev::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ib .ib-tag--sev[data-sev="blocker"] { background: #fdecea; color: #b42318; }
.ib .ib-tag--sev[data-sev="major"] { background: #fff1e0; color: #b54708; }
.ib .ib-tag--sev[data-sev="minor"] { background: #fbf5d6; color: #7a5c00; }
.ib .ib-tag--sev[data-sev="none"] { background: #eef0f3; color: #5d6676; }

.ib .ib-ticket-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--ib-paper-ink);
    overflow-wrap: anywhere;
}

.ib .ib-ticket-title > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.ib .ib-ticket-env {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ib-paper-muted);
    overflow-wrap: anywhere;
}

.ib .ib-ticket-title > span:empty::before,
.ib .ib-ticket-env > span:empty::before {
    content: attr(data-empty);
    color: #aab1bc;
    font-weight: 600;
}

.ib .ib-ticket-cut {
    position: relative;
    height: 0;
    margin: 0 1.25rem;
    border-top: 1.5px dashed var(--ib-paper-line);
}

/* 절취선 양 끝의 반원 홈 — 무대 배경색으로 뚫어 보이게 한다 */
.ib .ib-ticket-cut::before,
.ib .ib-ticket-cut::after {
    content: "";
    position: absolute;
    top: -0.62rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--ib-stage);
}

.ib .ib-ticket-cut::before { left: -1.87rem; }
.ib .ib-ticket-cut::after { right: -1.87rem; }
.ib .ib-review .ib-ticket-cut::before,
.ib .ib-review .ib-ticket-cut::after { display: none; }

.ib .ib-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.9rem 1.25rem 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ib-paper-body);
}

.ib .ib-ticket-files {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.ib .ib-ticket-files::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    background: currentColor;
    -webkit-mask: var(--ib-i-clip) center / contain no-repeat;
    mask: var(--ib-i-clip) center / contain no-repeat;
}

.ib .ib-ticket-who {
    flex: 1 1 6rem;
    min-width: 0;
    overflow: hidden;
    color: var(--ib-paper-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ib .ib-ticket-meta .ib-doc-count { margin-left: auto; }

.ib .ib-ticket-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
    padding: 0.65rem 1.25rem 1.2rem;
    list-style: none;
}

.ib .ib-ticket-flow li {
    position: relative;
    margin: 0;
    padding-top: 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ib-paper-muted);
    word-break: keep-all;
}

.ib .ib-ticket-flow li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--ib-paper-line);
}

.ib.is-received .ib-ticket-flow li:first-child { color: var(--ib-accent-strong); }
.ib.is-received .ib-ticket-flow li:first-child::before { background: var(--ib-accent); }

/* ---------- 진단 의뢰서(서버 진단 신청) ---------- */

.ib .ib-order-head {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.05rem 1.25rem 1rem;
    border-bottom: 1px dashed var(--ib-paper-line);
}

.ib .ib-order-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ib-paper-body);
}

.ib .ib-order-plan > b { color: var(--ib-paper-ink); }

.ib .ib-order-flag {
    display: inline-flex;
    padding: 0.12rem 0.45rem;
    border-radius: 0.35rem;
    background: var(--ib-accent-soft);
    color: var(--ib-accent-strong);
    font-size: 0.68rem;
    font-weight: 700;
}

.ib .ib-order-flag:empty { display: none; }

.ib .ib-order-price {
    display: block;
    font-size: clamp(1.9rem, 1.1vw + 1.35rem, 2.35rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--ib-paper-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ib .ib-order-price small {
    margin-left: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ib-paper-muted);
}

.ib .ib-order-note {
    font-size: 0.7rem;
    color: var(--ib-paper-muted);
}

/* ---------- 바로 연락 ---------- */

.ib .ib-direct {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ib .ib-direct-label {
    margin: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ib-stage-muted);
}

/* 한국어 문장형 라벨(예: 급한 문의)은 대문자 자간을 풀어 글자가 벌어지지 않게 한다 */
.ib .ib-direct-label--text {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.ib .ib-direct-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ib .ib-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--ib-stage-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: #e7ebf3;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ib .ib-pill:hover,
.ib .ib-pill:focus-visible {
    border-color: var(--ib-accent-lite);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.ib .ib-pill:focus-visible { outline: 2px solid var(--ib-accent-lite); outline-offset: 2px; }

.ib .ib-pill-mark {
    font-size: 0.8em;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.ib .ib-pill:hover .ib-pill-mark { transform: translate(2px, -2px); }

/* =====================================================================
   우: 폼
   ===================================================================== */

.ib .ib-main {
    min-width: 0;
    /* clip 은 스크롤 컨테이너를 만들지 않아 전송 도크의 sticky 가 그대로 산다 */
    overflow-x: clip;
    padding: clamp(2.75rem, 7vh, 4.5rem) var(--ib-pad-x) 0;
    background: var(--ib-surface);
    color: var(--ib-ink);
}

.ib .ib-form,
.ib .ib-done {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto 0 0;
}

.ib .ib-form {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
}

.ib .ib-form[hidden],
.ib .ib-done[hidden],
.ib .ib-review[hidden] { display: none !important; }

.ib .ib-form-meta {
    margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ib-muted);
}

.ib .ib-form-meta::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* ---------- 질문 + 번호 레일 ---------- */

.ib .ib-q {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: clamp(1rem, 2vw, 1.4rem);
    margin: 0;
    padding: 0 0 clamp(2.4rem, 5vh, 3.1rem);
    border: 0;
}

.ib .ib-q-rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.ib .ib-q-rail::before,
.ib .ib-q-rail::after {
    content: "";
    position: absolute;
    top: 2.95rem;
    bottom: 0.45rem;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--ib-line);
}

.ib .ib-q-rail::after {
    background: var(--ib-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.7s var(--ib-ease);
}

.ib .ib-q.is-done .ib-q-rail::after { transform: scaleY(1); }

.ib .ib-q--last .ib-q-rail::before,
.ib .ib-q--last .ib-q-rail::after { display: none; }

.ib .ib-q-node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1.5px solid var(--ib-line-strong);
    border-radius: 50%;
    background: var(--ib-surface);
    font-family: var(--ib-mono);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ib-muted);
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

.ib .ib-q-node::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    -webkit-mask: var(--ib-i-check) center / contain no-repeat;
    mask: var(--ib-i-check) center / contain no-repeat;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.ib .ib-q:focus-within .ib-q-node {
    border-color: var(--ib-accent);
    color: var(--ib-accent-strong);
    box-shadow: 0 0 0 5px var(--ib-accent-ring);
}

.ib .ib-q.is-done .ib-q-node {
    border-color: var(--ib-accent);
    background: var(--ib-accent);
    color: transparent;
}

.ib .ib-q.is-done .ib-q-node::after { opacity: 1; transform: none; }

.ib .ib-q.is-invalid .ib-q-node {
    border-color: var(--ib-danger);
    background: var(--ib-surface);
    color: var(--ib-danger);
    box-shadow: 0 0 0 5px rgba(217, 45, 32, 0.12);
}

.ib .ib-q.is-invalid .ib-q-node::after { opacity: 0; }

.ib .ib-q-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    container-type: inline-size;
}

.ib .ib-q-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.15rem;
}

.ib .ib-q-label {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.03em;
    color: var(--ib-accent-strong);
}

.ib .ib-q-title {
    margin: 0;
    padding: 0;
    font-size: clamp(1.28rem, 0.55vw + 1.05rem, 1.62rem);
    line-height: 1.36;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ib-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.ib .ib-q-help {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ib-muted);
    word-break: keep-all;
    text-wrap: pretty;
}

/* ---------- 칩(다중·단일 선택) ---------- */

.ib .ib-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ib .ib-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.5rem 1rem 0.5rem 0.65rem;
    border: 1px solid var(--ib-line-strong);
    border-radius: 999px;
    background: var(--ib-surface);
    color: var(--ib-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    user-select: none;
    word-break: keep-all;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.ib .ib-chip > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ib .ib-chip-mark {
    position: relative;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--ib-field);
    color: var(--ib-faint);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ib .ib-chip-mark::before,
.ib .ib-chip-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.72rem;
    height: 0.72rem;
    background: currentColor;
    -webkit-mask: var(--ib-i-plus) center / contain no-repeat;
    mask: var(--ib-i-plus) center / contain no-repeat;
    transition: opacity 0.2s ease, transform 0.35s var(--ib-ease);
}

.ib .ib-chip-mark::after {
    -webkit-mask-image: var(--ib-i-check);
    mask-image: var(--ib-i-check);
    width: 0.78rem;
    height: 0.78rem;
    opacity: 0;
    transform: rotate(-60deg) scale(0.4);
}

.ib .ib-chip:hover {
    border-color: color-mix(in srgb, var(--ib-accent) 50%, var(--ib-line-strong));
    color: var(--ib-ink);
}

.ib .ib-chip:hover .ib-chip-mark { color: var(--ib-accent); }
.ib .ib-chip:active { transform: scale(0.97); }

.ib .ib-chip:has(input:focus-visible) {
    outline: 2px solid var(--ib-accent);
    outline-offset: 2px;
}

.ib .ib-chip.is-on,
.ib .ib-chip:has(input:checked) {
    border-color: var(--ib-accent);
    background: var(--ib-accent);
    color: #ffffff;
    box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--ib-accent) 85%, transparent);
}

.ib .ib-chip.is-on .ib-chip-mark,
.ib .ib-chip:has(input:checked) .ib-chip-mark {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.ib .ib-chip.is-on .ib-chip-mark::before,
.ib .ib-chip:has(input:checked) .ib-chip-mark::before {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
}

.ib .ib-chip.is-on .ib-chip-mark::after,
.ib .ib-chip:has(input:checked) .ib-chip-mark::after {
    opacity: 1;
    transform: none;
}

/* ---------- 예산 스케일 ---------- */

.ib .ib-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.ib .ib-scale-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    margin: 0;
    padding: 0.95rem 0.85rem 1rem;
    border: 1px solid var(--ib-line-strong);
    border-radius: 0.95rem;
    background: var(--ib-surface);
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.ib .ib-scale-opt > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ib .ib-scale-sig {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 1.35rem;
}

.ib .ib-scale-sig > i {
    display: block;
    width: 5px;
    border-radius: 2px;
    background: var(--ib-line);
    transition: background-color 0.25s ease;
}

.ib .ib-scale-sig > i:nth-child(1) { height: 30%; }
.ib .ib-scale-sig > i:nth-child(2) { height: 47%; }
.ib .ib-scale-sig > i:nth-child(3) { height: 64%; }
.ib .ib-scale-sig > i:nth-child(4) { height: 82%; }
.ib .ib-scale-sig > i:nth-child(5) { height: 100%; }
.ib .ib-scale-sig > i.on { background: #a9b2bf; }

.ib .ib-scale-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ib .ib-scale-label {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ib-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.ib .ib-scale-note {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--ib-muted);
    word-break: keep-all;
    text-wrap: balance;
}

.ib .ib-scale-opt:hover { border-color: color-mix(in srgb, var(--ib-accent) 50%, var(--ib-line-strong)); }
.ib .ib-scale-opt:hover .ib-scale-sig > i.on { background: color-mix(in srgb, var(--ib-accent) 70%, #ffffff); }

.ib .ib-scale-opt:has(input:focus-visible) {
    outline: 2px solid var(--ib-accent);
    outline-offset: 2px;
}

.ib .ib-scale-opt.is-on,
.ib .ib-scale-opt:has(input:checked) {
    border-color: var(--ib-accent);
    background: color-mix(in srgb, var(--ib-accent) 6%, #ffffff);
    box-shadow: inset 0 0 0 1px var(--ib-accent), 0 14px 28px -20px color-mix(in srgb, var(--ib-accent) 80%, transparent);
}

.ib .ib-scale-opt.is-on .ib-scale-sig > i.on,
.ib .ib-scale-opt:has(input:checked) .ib-scale-sig > i.on { background: var(--ib-accent); }

.ib .ib-scale-opt.is-on .ib-scale-label,
.ib .ib-scale-opt:has(input:checked) .ib-scale-label { color: var(--ib-accent-strong); }

/* 일본어·중국어 예산 문구는 띄어쓰기 없이 길어 5열에서 "500万ウ/ォン"처럼 쪼개진다. 항상 한 줄 목록으로 둔다. */
.ib .ib-scale:is(:lang(ja), :lang(zh)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
}

.ib .ib-scale:is(:lang(ja), :lang(zh)) .ib-scale-opt {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
}

.ib .ib-scale:is(:lang(ja), :lang(zh)) .ib-scale-sig { flex: none; }

.ib .ib-scale:is(:lang(ja), :lang(zh)) .ib-scale-text {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2rem 1rem;
}

/* 좁은 칸에서는 한 줄 목록으로 바꾼다 */
@container (max-width: 34rem) {
    .ib .ib-scale {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
    }

    .ib .ib-scale-opt {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 0.85rem 1rem;
    }

    .ib .ib-scale-sig { flex: none; }

    .ib .ib-scale-text {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.2rem 1rem;
    }
}

/* ---------- 옵션 카드(설명이 붙는 단일 선택) ---------- */

.ib .ib-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

@container (max-width: 30rem) {
    .ib .ib-cards { grid-template-columns: minmax(0, 1fr); }
}

.ib .ib-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    padding: 0.95rem 1rem;
    border: 1px solid var(--ib-line-strong);
    border-radius: 0.95rem;
    background: var(--ib-surface);
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.ib .ib-card > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ib .ib-card-dot {
    position: relative;
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
    border: 1.5px solid #b8c0cc;
    border-radius: 50%;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.ib .ib-card-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--ib-accent);
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.ib .ib-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ib .ib-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ib-ink);
    word-break: keep-all;
}

.ib .ib-card-desc {
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--ib-muted);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ib .ib-card-price {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ib-accent-strong);
    font-variant-numeric: tabular-nums;
}

.ib .ib-card:hover { border-color: color-mix(in srgb, var(--ib-accent) 50%, var(--ib-line-strong)); }

.ib .ib-card:has(input:focus-visible) {
    outline: 2px solid var(--ib-accent);
    outline-offset: 2px;
}

.ib .ib-card:has(input:checked) {
    border-color: var(--ib-accent);
    background: color-mix(in srgb, var(--ib-accent) 6%, #ffffff);
    box-shadow: inset 0 0 0 1px var(--ib-accent);
}

.ib .ib-card:has(input:checked) .ib-card-dot { border-color: var(--ib-accent); }
.ib .ib-card:has(input:checked) .ib-card-dot::after { transform: scale(1); }

.ib .ib-cards--plans { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }

@container (max-width: 30rem) {
    .ib .ib-cards--plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ib .ib-card--plan { padding: 0.9rem 0.85rem; }
.ib .ib-card--plan .ib-card-text { gap: 0.2rem; }

.ib .req { color: var(--ib-accent-strong); font-weight: 700; }

/* ---------- 입력 칸 ---------- */

.ib .ib-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1rem;
}

@container (max-width: 30rem) {
    .ib .ib-fields { grid-template-columns: minmax(0, 1fr); }
}

.ib .ib-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.ib .ib-field--full { grid-column: 1 / -1; }

.ib .ib-field > label,
.ib .ib-field-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ib-body);
}

.ib .ib-opt {
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ib-faint);
}

.ib .ib-field input,
.ib .ib-field select,
.ib .ib-field textarea {
    display: block;
    width: 100%;
    min-height: 3.15rem;
    margin: 0;
    padding: 0.8rem 1rem;
    border: 1px solid var(--ib-line);
    border-radius: 0.8rem;
    background: var(--ib-field);
    color: var(--ib-ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ib .ib-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

.ib .ib-field textarea {
    min-height: 9rem;
    line-height: 1.7;
    resize: vertical;
}

.ib .ib-field select {
    padding-right: 2.6rem;
    background-image: var(--ib-i-chevron);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.75rem;
    cursor: pointer;
}

.ib .ib-field input::placeholder,
.ib .ib-field textarea::placeholder { color: #9ea6b3; opacity: 1; }

.ib .ib-field input:hover,
.ib .ib-field select:hover,
.ib .ib-field textarea:hover { border-color: var(--ib-line-strong); }

.ib .ib-field input:focus,
.ib .ib-field select:focus,
.ib .ib-field textarea:focus {
    border-color: var(--ib-accent);
    background-color: var(--ib-surface);
    box-shadow: 0 0 0 4px var(--ib-accent-ring);
}

.ib .ib-field input.error,
.ib .ib-field textarea.error,
.ib .ib-composer textarea.error {
    border-color: var(--ib-danger);
    box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.1);
}

.ib .ib-hint {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--ib-muted);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ib .ib-hint--warn { color: #b54708; }

/* contact.js · program-inquiry.js 가 필드 옆에 붙이는 오류 문구 */
.ib .field-error {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ib-danger);
}

.ib .ib-error {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ib-danger);
    word-break: keep-all;
}

.ib .ib-error:empty { display: none; }

/* ---------- 설명 작성기 ---------- */

.ib .ib-composer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ib-line-strong);
    border-radius: 1rem;
    background: var(--ib-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ib .ib-composer:focus-within {
    border-color: var(--ib-accent);
    box-shadow: 0 0 0 4px var(--ib-accent-ring);
}

.ib .ib-composer.is-dragover {
    border-color: var(--ib-accent);
    border-style: dashed;
    background: color-mix(in srgb, var(--ib-accent) 4%, #ffffff);
}

.ib .ib-composer-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 0.8rem 0;
}

.ib .ib-guide {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.38rem 0.65rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--ib-field);
    color: var(--ib-body);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ib .ib-guide::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    background: var(--ib-accent);
    -webkit-mask: var(--ib-i-plus) center / contain no-repeat;
    mask: var(--ib-i-plus) center / contain no-repeat;
}

.ib .ib-guide:hover,
.ib .ib-guide:focus-visible {
    background: var(--ib-accent-soft);
    color: var(--ib-accent-strong);
}

.ib .ib-guide:focus-visible { outline: 2px solid var(--ib-accent); outline-offset: 1px; }

.ib .ib-composer textarea {
    display: block;
    width: 100%;
    min-height: 9.5rem;
    margin: 0;
    padding: 0.85rem 1.05rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ib-ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0;
    resize: vertical;
    outline: none;
    box-shadow: none;
}

.ib .ib-composer textarea::placeholder { color: #9ea6b3; opacity: 1; }
.ib .ib-composer textarea.error { box-shadow: none; }
.ib .ib-composer:has(textarea.error) { border-color: var(--ib-danger); }

.ib .ib-composer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem 0.5rem 0.5rem;
    border-top: 1px dashed var(--ib-line);
    background: #fbfbfc;
}

.ib .ib-attach {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0.42rem 0.65rem;
    border-radius: 0.5rem;
    color: var(--ib-body);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ib .ib-attach:hover,
.ib .ib-attach:focus-within {
    background: var(--ib-field);
    color: var(--ib-accent-strong);
}

.ib .ib-attach:has(input:focus-visible) { outline: 2px solid var(--ib-accent); outline-offset: 1px; }

.ib .ib-attach-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: var(--ib-i-clip) center / contain no-repeat;
    mask: var(--ib-i-clip) center / contain no-repeat;
}

.ib .ib-attach-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ib .ib-attach input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.ib .ib-count {
    flex: none;
    font-family: var(--ib-mono);
    font-size: 0.72rem;
    color: var(--ib-faint);
    white-space: nowrap;
}

/* ---------- 첨부 드롭존(프로그램 피드백) ---------- */

.ib .ib-drop {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1.5px dashed var(--ib-line-strong);
    border-radius: 1rem;
    background: #fbfbfc;
    color: var(--ib-body);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ib .ib-drop:hover,
.ib .ib-drop:focus-visible {
    border-color: var(--ib-accent);
    background: color-mix(in srgb, var(--ib-accent) 4%, #ffffff);
    outline: none;
}

.ib .ib-drop.is-dragover {
    border-style: solid;
    border-color: var(--ib-accent);
    background: color-mix(in srgb, var(--ib-accent) 8%, #ffffff);
}

.ib .ib-drop-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    background: var(--ib-surface);
    box-shadow: 0 0 0 1px var(--ib-line), 0 6px 14px -8px rgba(12, 16, 24, 0.25);
}

.ib .ib-drop-icon::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: var(--ib-accent);
    -webkit-mask: var(--ib-i-image) center / contain no-repeat;
    mask: var(--ib-i-image) center / contain no-repeat;
}

.ib .ib-drop-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ib .ib-drop-main {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ib-ink);
    word-break: keep-all;
}

.ib .ib-drop-main b { color: var(--ib-accent-strong); }

.ib .ib-drop-sub {
    font-size: 0.76rem;
    color: var(--ib-muted);
    word-break: keep-all;
}

.ib .pgq-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ib .pgq-thumbs[hidden] { display: none; }

.ib .pgq-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 1 / 1;
    padding: 8px 6px;
    overflow: hidden;
    border: 1px solid var(--ib-line);
    border-radius: 0.75rem;
    background: var(--ib-field);
}

.ib .pgq-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ib .pgq-thumb-ext {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ib-accent-soft);
    color: var(--ib-accent-strong);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.ib .pgq-thumb-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--ib-body);
    font-size: 0.66rem;
    line-height: 1.3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ib .pgq-thumb-size { color: var(--ib-faint); font-size: 0.64rem; }

.ib .pgq-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(12, 16, 24, 0.72);
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.ib .pgq-thumb-remove:hover { background: var(--ib-ink); }

/* ---------- 동의 · 법적 고지 ---------- */

.ib .ib-consent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.1rem;
    border-radius: 0.95rem;
    background: var(--ib-field);
}

.ib .ib-consent--stack {
    flex-direction: column;
    align-items: stretch;
}

.ib .ib-check {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ib-body);
    cursor: pointer;
    word-break: keep-all;
}

.ib .ib-check > input {
    position: absolute;
    top: 0.15rem;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ib .ib-check-box {
    position: relative;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.08rem;
    border: 1.5px solid #b3bbc7;
    border-radius: 0.38rem;
    background: #ffffff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ib .ib-check-box::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.8rem;
    height: 0.8rem;
    background: #ffffff;
    -webkit-mask: var(--ib-i-check) center / contain no-repeat;
    mask: var(--ib-i-check) center / contain no-repeat;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.ib .ib-check > input:checked + .ib-check-box {
    border-color: var(--ib-accent);
    background: var(--ib-accent);
}

.ib .ib-check > input:checked + .ib-check-box::after { opacity: 1; transform: none; }

.ib .ib-check > input:focus-visible + .ib-check-box {
    outline: 2px solid var(--ib-accent);
    outline-offset: 2px;
}

.ib .ib-check strong { color: var(--ib-ink); font-weight: 700; }

.ib .ib-textlink {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ib-accent-strong);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ib .ib-textlink:hover { color: var(--ib-ink); }

.ib .ib-privacy {
    margin: 0;
    font-size: 0.8rem;
}

.ib .ib-privacy > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ib-accent-strong);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.ib .ib-privacy > summary::-webkit-details-marker { display: none; }

.ib .ib-privacy > summary::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    background: currentColor;
    -webkit-mask: var(--ib-i-plus) center / contain no-repeat;
    mask: var(--ib-i-plus) center / contain no-repeat;
    transition: transform 0.25s ease;
}

.ib .ib-privacy[open] > summary::before { transform: rotate(45deg); }

.ib .ib-privacy-body {
    margin-top: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ib-line);
    border-radius: 0.75rem;
    background: var(--ib-surface);
    color: var(--ib-muted);
    font-size: 0.8rem;
    line-height: 1.7;
    word-break: keep-all;
}

.ib .ib-privacy-body ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

.ib .ib-legal {
    margin: 0.85rem 0 0;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--ib-faint);
    word-break: keep-all;
}

.ib .ib-legal a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 서버 응답 알림(contact.js .form-message, program-inquiry.js .pgq-message) */
.ib .form-message,
.ib .pgq-message {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.85rem;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.6;
}

.ib .form-message__content,
.ib .pgq-message__content { display: flex; align-items: flex-start; gap: 0.6rem; }

.ib .form-message__icon { display: none; }

.ib .form-message__text,
.ib .pgq-message__text { flex: 1; white-space: pre-line; word-break: break-word; }

.ib .form-message__close,
.ib .pgq-message__close {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.ib .form-message--success,
.ib .pgq-message--success { border-color: #b7e3cd; background: #eefaf3; color: #10794f; }

.ib .form-message--error,
.ib .pgq-message--error { border-color: #f3c7c3; background: #fdf0ef; color: #b42318; }

/* security.php 인라인 스크립트가 쓰는 알림 상자 */
.ib .form-msg {
    display: none;
    margin: 1rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.85rem;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.6;
    word-break: keep-all;
}

.ib .form-msg.show { display: block; }
.ib .form-msg.success { border-color: #b7e3cd; background: #eefaf3; color: #10794f; }
.ib .form-msg.error { border-color: #f3c7c3; background: #fdf0ef; color: #b42318; }

.ib .ib-done-ref {
    margin: -0.6rem 0 0;
    font-family: var(--ib-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ib-accent-strong);
}

/* ---------- 모바일 검토 카드(무대의 문서를 폼 안에 복제) ---------- */

.ib .ib-review { display: none; }

/* 무대 스크립트가 붙으면 완료 화면의 요약표 대신 도장 찍힌 브리프를 쓴다.
   요약표는 스크립트가 없을 때를 위한 대비로만 남긴다. */
.ib.has-brief .ib-summary { display: none; }

.ib .ib-review-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ib-body);
}

/* ---------- 하단 전송 도크 ---------- */

.ib .ib-foot {
    position: sticky;
    bottom: max(0.9rem, env(safe-area-inset-bottom));
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-top: 1.5rem;
    margin-bottom: clamp(2.5rem, 6vh, 4rem);
    padding: 0.6rem 0.6rem 0.6rem 1.1rem;
    border: 1px solid var(--ib-line);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 20px 44px -22px rgba(12, 16, 24, 0.32), 0 2px 6px rgba(12, 16, 24, 0.04);
}

.ib .ib-foot-status {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.ib .ib-meter {
    flex: none;
    display: inline-flex;
    gap: 3px;
}

.ib .ib-meter > i {
    display: block;
    width: 1.05rem;
    height: 0.3rem;
    border-radius: 999px;
    background: var(--ib-line-strong);
    transition: background-color 0.3s ease;
}

.ib .ib-meter > i.on { background: var(--ib-accent); }

.ib .ib-foot-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ib .ib-foot-hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ib-muted);
    word-break: keep-all;
    text-wrap: pretty;
}

.ib .ib-foot-hint.is-ready {
    color: var(--ib-accent-strong);
    font-weight: 600;
}

.ib .ib-foot-price {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ib-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ib .ib-foot-price small {
    margin-left: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ib-muted);
}

.ib .ib-submit {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3.1rem;
    margin: 0;
    padding: 0 1.2rem 0 1.45rem;
    overflow: hidden;
    border: 0;
    border-radius: 0.85rem;
    background: var(--ib-accent);
    color: #ffffff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ib-accent) 80%, transparent);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

/* contact.js 가 전송 중 textContent 를 바꾸므로 화살표는 자식 요소가 아니라 ::after 로 둔다 */
.ib .ib-submit::after {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: var(--ib-i-arrow) center / contain no-repeat;
    mask: var(--ib-i-arrow) center / contain no-repeat;
    transition: transform 0.25s var(--ib-ease);
}

.ib .ib-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: ib-shine 3.2s ease-in-out 1s infinite;
    pointer-events: none;
}

.ib .ib-submit:hover { background: var(--ib-accent-strong); }
.ib .ib-submit:hover::after { transform: translateX(3px); }
.ib .ib-submit:active { transform: scale(0.98); }
.ib .ib-submit:focus-visible { outline: 2px solid var(--ib-accent); outline-offset: 3px; }

.ib .ib-submit.is-idle {
    background: #eceef2;
    color: var(--ib-body);
    box-shadow: none;
}

.ib .ib-submit.is-idle::before { display: none; }
.ib .ib-submit.is-idle:hover { background: #e2e5ea; }

.ib .ib-submit:disabled {
    cursor: progress;
    opacity: 0.72;
}

/* ---------- 접수 완료 ---------- */

.ib .ib-done {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding-bottom: clamp(3rem, 8vh, 5rem);
    outline: none;
}

.ib .ib-done-mark {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
}

.ib .ib-done-mark svg { display: block; width: 100%; height: 100%; }

.ib .ib-done-mark circle {
    fill: none;
    stroke: var(--ib-accent);
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: ib-draw 0.6s ease forwards;
}

.ib .ib-done-mark path {
    fill: none;
    stroke: var(--ib-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: ib-draw 0.45s 0.45s ease forwards;
}

.ib .ib-done-title {
    margin: 0;
    font-size: clamp(1.6rem, 1vw + 1.2rem, 2.2rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ib-ink);
    word-break: keep-all;
    text-wrap: balance;
}

.ib .ib-done-body {
    margin: 0;
    max-width: 36rem;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ib-muted);
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.ib .ib-next {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ib .ib-next-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ib-muted);
}

.ib .ib-next-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ib .ib-next-list li {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0.95rem 1rem;
    border-radius: 0.85rem;
    background: var(--ib-field);
    color: var(--ib-body);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
    word-break: keep-all;
}

.ib .ib-next-list li > span {
    font-family: var(--ib-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--ib-faint);
}

.ib .ib-next-list li.is-now {
    background: var(--ib-accent-soft);
    color: var(--ib-accent-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ib-accent) 30%, transparent);
}

.ib .ib-next-list li.is-now > span { color: var(--ib-accent); }

.ib .ib-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ib-line);
    border-radius: 1rem;
    background: var(--ib-line);
}

.ib .ib-summary-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.05rem 1.2rem;
    background: var(--ib-surface);
}

.ib .ib-summary-row dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ib-faint);
}

.ib .ib-summary-row dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 600;
    color: var(--ib-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ib .ib-done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ib .ib-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.35rem;
    border: 1px solid var(--ib-line-strong);
    border-radius: 999px;
    background: var(--ib-surface);
    color: var(--ib-body);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.ib .ib-ghost:hover { border-color: var(--ib-ink); color: var(--ib-ink); }

.ib .ib-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 들어올 때 한 번 ---------- */

.ib.is-armed .ib-stage-inner > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s var(--ib-ease), transform 1s var(--ib-ease);
}

.ib.is-armed.is-in .ib-stage-inner > * {
    opacity: 1;
    transform: none;
}

.ib.is-armed.is-in .ib-stage-inner > :nth-child(2) { transition-delay: 0.14s; }
.ib.is-armed.is-in .ib-stage-inner > :nth-child(3) { transition-delay: 0.28s; }

/* 섹션이 화면에 있는 동안 공용 하단 상담 바와 맨 위로 버튼을 숨긴다.
   둘 다 이 섹션으로 오게 하는 장치라, 여기서는 전송 도크와 겹치기만 한다. */
html.ib-in-view .site-consult-bar { display: none !important; }

html.ib-in-view .back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =====================================================================
   애니메이션
   ===================================================================== */

@keyframes ib-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(7%, -6%, 0) scale(1.08); }
    100% { transform: translate3d(-3%, -12%, 0) scale(0.96); }
}

@keyframes ib-ping {
    0% { opacity: 0.8; transform: scale(0.4); }
    80%, 100% { opacity: 0; transform: scale(1.4); }
}

@keyframes ib-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes ib-flash {
    0% { background-color: color-mix(in srgb, var(--ib-accent) 11%, transparent); }
    100% { background-color: transparent; }
}

@keyframes ib-stamp {
    0% { opacity: 0; transform: rotate(-3deg) scale(1.9); }
    55% { opacity: 1; transform: rotate(-12deg) scale(0.93); }
    100% { opacity: 0.94; transform: rotate(-11deg) scale(1); }
}

@keyframes ib-thud {
    0%, 100% { transform: none; }
    30% { transform: translateY(3px) scale(0.992); }
    60% { transform: translateY(-1px); }
}

@keyframes ib-shine {
    0% { transform: translateX(-120%); }
    38%, 100% { transform: translateX(120%); }
}

@keyframes ib-draw {
    to { stroke-dashoffset: 0; }
}

/* =====================================================================
   화면 크기
   ===================================================================== */

/* 노트북처럼 세로가 낮은 화면: 무대가 넘치지 않게 세로 리듬만 줄인다.
   무대가 넘쳐 스스로 스크롤하면 휠 한 번이 페이지 대신 무대에 먹힌다. */
@media (min-width: 881px) and (max-height: 860px) {
    .ib .ib-stage { padding-block: clamp(1.1rem, 3vh, 2rem); }
    .ib .ib-stage-inner { gap: clamp(1.1rem, 2.8vh, 1.8rem); }
    .ib .ib-title { font-size: clamp(1.7rem, 1vw + 1.15rem, 2.25rem); }
    .ib .ib-lead { font-size: 0.9rem; line-height: 1.65; }
    .ib .ib-doc-row { padding-block: 0.62rem; }
    .ib .ib-doc-head { padding-block: 1rem 0.75rem; }
}

@media (min-width: 881px) and (max-height: 760px) {
    .ib .ib-lead { display: none; }
    .ib .ib-title { font-size: clamp(1.6rem, 0.9vw + 1.1rem, 2rem); }
    .ib .ib-doc-foot { padding-block: 0.7rem 0.8rem; }
}

@media (min-width: 881px) and (max-height: 660px) {
    .ib .ib-direct-label { display: none; }
    .ib .ib-doc-row { padding-block: 0.5rem; }
    .ib .ib-pill { padding: 0.45rem 0.8rem; }
}

@media (max-width: 1180px) {
    .ib .ib-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .ib .ib-doc-row { grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0.7rem; }
}

@media (max-width: 880px) {
    .ib .ib-grid { grid-template-columns: minmax(0, 1fr); }

    .ib .ib-stage {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: clamp(2.75rem, 9vw, 3.5rem) var(--ib-pad-x) clamp(2.5rem, 8vw, 3.25rem);
    }

    .ib .ib-stage-inner {
        max-width: 36rem;
        margin: 0 auto;
        gap: 1.6rem;
    }

    /* 모바일은 무대 문서 대신 폼 안의 검토 카드를 쓴다 */
    .ib .ib-stage .ib-doc-slot { display: none; }

    .ib .ib-main { padding: clamp(2.25rem, 7vw, 3rem) var(--ib-pad-x) 0; }

    .ib .ib-form,
    .ib .ib-done {
        max-width: 36rem;
        margin-inline: auto;
    }

    .ib .ib-review {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin: 0 0 1.4rem;
    }

    .ib .ib-review .ib-doc {
        max-width: none;
        transform: none;
        box-shadow: 0 0 0 1px var(--ib-line), 0 20px 44px -30px rgba(12, 16, 24, 0.45);
    }
}

@media (max-width: 560px) {
    .ib .ib-q {
        grid-template-columns: 2rem minmax(0, 1fr);
        column-gap: 0.85rem;
    }

    .ib .ib-q-node {
        width: 2rem;
        height: 2rem;
        font-size: 0.66rem;
    }

    .ib .ib-q-node::after { width: 0.85rem; height: 0.85rem; }
    .ib .ib-q-rail::before,
    .ib .ib-q-rail::after { top: 2.4rem; }

    .ib .ib-q-title { font-size: 1.22rem; }
    .ib .ib-chip { font-size: 0.86rem; min-height: 2.6rem; }

    .ib .ib-foot {
        gap: 0.7rem;
        padding: 0.5rem 0.5rem 0.5rem 0.85rem;
    }

    .ib .ib-foot-hint { display: none; }
    .ib .ib-submit { flex: 1 1 auto; padding-inline: 1.1rem 0.95rem; }

    /* 견적 금액을 함께 보여 주는 도크(서버 진단 신청)는 금액이 더 중요하므로 진행 막대를 뺀다 */
    .ib .ib-foot:has(.ib-foot-price) .ib-meter { display: none; }
    .ib .ib-foot-price { font-size: 1rem; }

    .ib .ib-next-list,
    .ib .ib-summary { grid-template-columns: minmax(0, 1fr); }

    .ib .ib-doc-row { grid-template-columns: 5rem minmax(0, 1fr); padding-inline: 1rem; }
    .ib .ib-doc-head,
    .ib .ib-doc-foot { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ib *,
    .ib *::before,
    .ib *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ib .ib-stage-fx::before { animation: none !important; }
    .ib .ib-submit::before { display: none; }
    .ib .ib-doc { transform: none; }
}