/* 04. iOS packaging options and site diagnosis */
.agency-widget--packaging {
    --packaging-ink: #191f28;
    --packaging-soft: #4e5968;
    --packaging-line: #e3e8ed;
    --packaging-blue: var(--rb-main-color, #2167ff);
    width: 100%;
    padding: 140px 0 130px;
    background: #fff;
    color: var(--packaging-ink);
    font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.agency-widget--packaging *,
.agency-widget--packaging *::before,
.agency-widget--packaging *::after {box-sizing: border-box;}
.agency-widget--packaging h2,
.agency-widget--packaging h3,
.agency-widget--packaging p,
.agency-widget--packaging dl,
.agency-widget--packaging dd {margin: 0;}
.agency-widget--packaging .agency-packaging__shell {width: min(var(--rb-main-width, 1200px), calc(100% - 48px)); margin: 0 auto;}
.agency-widget--packaging .agency-packaging__heading {display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; gap: 64px;}
.agency-widget--packaging h2 {margin-top: 20px; font-size: clamp(36px, 4.1vw, 56px); font-weight: 800; letter-spacing: -.07em; line-height: 1.18; word-break: keep-all;}
.agency-widget--packaging .agency-packaging__intro {color: var(--packaging-soft); font-size: 15px; line-height: 1.75; word-break: keep-all;}
.agency-widget--packaging .agency-packaging__platform {display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; font-size: 12px;}
.agency-widget--packaging .agency-packaging__platform strong {color: var(--packaging-blue); font-size: 17px; font-weight: 800;}
.agency-widget--packaging .agency-packaging__comparison {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 64px; border-top: 2px solid var(--packaging-ink); border-bottom: 1px solid var(--packaging-line);}
.agency-widget--packaging .agency-packaging__option {min-width: 0; padding: 34px 46px 36px 0;}
.agency-widget--packaging .agency-packaging__option + .agency-packaging__option {padding-right: 0; padding-left: 46px; border-left: 1px solid var(--packaging-line);}
.agency-widget--packaging .agency-packaging__type {display: flex; gap: 18px; color: var(--packaging-blue); font-size: 11px; font-weight: 800; letter-spacing: .1em;}
.agency-widget--packaging .agency-packaging__type span {color: #6b7684; font-variant-numeric: tabular-nums;}
.agency-widget--packaging .agency-packaging__option h3 {margin-top: 28px; font-size: clamp(27px, 2.8vw, 36px); font-weight: 800; line-height: 1.3; letter-spacing: -.06em; word-break: keep-all;}
.agency-widget--packaging .agency-packaging__lead {margin-top: 14px; color: var(--packaging-soft); font-size: 17px; line-height: 1.7; word-break: keep-all;}
.agency-widget--packaging .agency-packaging__specs {margin-top: 32px;}
.agency-widget--packaging .agency-packaging__specs > div {display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 16px; min-height: 78px; padding: 18px 0; border-top: 1px solid var(--packaging-line); font-size: 14px; line-height: 1.65; word-break: keep-all;}
.agency-widget--packaging .agency-packaging__specs dt {font-weight: 700;}
.agency-widget--packaging .agency-packaging__specs dd {color: var(--packaging-soft);}
.agency-widget--packaging .agency-packaging__fit {margin-top: 20px; padding-left: 17px; border-left: 2px solid var(--packaging-blue); color: var(--packaging-soft); font-size: 14px; line-height: 1.7; word-break: keep-all;}
.agency-widget--packaging .agency-packaging__fit strong {display: block; margin-bottom: 5px; color: var(--packaging-ink); font-size: 12px;}
.agency-widget--packaging .agency-packaging__diagnosis {display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 48px; padding: 34px 36px; background: #f1f6fc;}
.agency-widget--packaging .agency-packaging__diagnosis > div {min-width: 0;}
.agency-widget--packaging .agency-packaging__diagnosis h3 {font-size: 24px; font-weight: 800; letter-spacing: -.05em; line-height: 1.4; word-break: keep-all;}
.agency-widget--packaging .agency-packaging__diagnosis p {margin-top: 10px; color: var(--packaging-soft); font-size: 14px; line-height: 1.75; word-break: keep-all;}
.agency-widget--packaging .agency-packaging__button {display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 18px; min-height: 56px; max-width: 100%; padding: 16px 21px; border: 1px solid transparent; border-radius: 12px; background: var(--packaging-blue); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; text-decoration: none; text-align: center; word-break: keep-all; transition: filter .18s ease;}
.agency-widget--packaging .agency-packaging__button span {font-size: 21px; line-height: 1;}
.agency-widget--packaging .agency-packaging__button:focus-visible {outline: 3px solid var(--packaging-blue); outline-offset: 4px;}
.agency-widget--packaging .agency-packaging__note {margin-top: 15px; color: #6b7684; font-size: 12px; line-height: 1.7; word-break: keep-all;}
@media (hover: hover) and (pointer: fine) {
    .agency-widget--packaging .agency-packaging__button:hover {filter: brightness(.9);}
}
@media (max-width: 1024px) {
    .agency-widget--packaging {padding: 104px 0 98px;}
    .agency-widget--packaging .agency-packaging__heading {grid-template-columns: 1fr; gap: 25px;}
    .agency-widget--packaging .agency-packaging__intro {max-width: 600px;}
    .agency-widget--packaging .agency-packaging__comparison {margin-top: 48px;}
    .agency-widget--packaging .agency-packaging__option {padding-right: 28px;}
    .agency-widget--packaging .agency-packaging__option + .agency-packaging__option {padding-left: 28px;}
    .agency-widget--packaging .agency-packaging__specs > div {grid-template-columns: 1fr; gap: 6px;}
    .agency-widget--packaging .agency-packaging__diagnosis {align-items: flex-start; flex-direction: column; gap: 24px;}
}
@media (max-width: 640px) {
    .agency-widget--packaging {padding: 78px 0 74px;}
    .agency-widget--packaging .agency-packaging__shell {width: min(calc(100% - 40px), 520px);}
    .agency-widget--packaging h2 {font-size: clamp(30px, 8.8vw, 38px);}
    .agency-widget--packaging .agency-packaging__comparison {grid-template-columns: 1fr; margin-top: 36px;}
    .agency-widget--packaging .agency-packaging__option {padding: 27px 0 30px;}
    .agency-widget--packaging .agency-packaging__option + .agency-packaging__option {padding: 27px 0 30px; border-left: 0; border-top: 1px solid var(--packaging-ink);}
    .agency-widget--packaging .agency-packaging__option h3 {margin-top: 20px; font-size: 28px;}
    .agency-widget--packaging .agency-packaging__lead {font-size: 16px;}
    .agency-widget--packaging .agency-packaging__specs {margin-top: 25px;}
    .agency-widget--packaging .agency-packaging__diagnosis {margin-top: 32px; padding: 27px 22px;}
    .agency-widget--packaging .agency-packaging__diagnosis h3 {font-size: 23px;}
    .agency-widget--packaging .agency-packaging__button {width: 100%; gap: 10px; padding: 15px 12px; font-size: 13px;}
}
@media (prefers-reduced-motion: reduce) {
    .agency-widget--packaging .agency-packaging__button {transition: none;}
}