/**
 * 파일명: goin.css
 * 기능: 온라인 추모관(goin.co.kr) 코드 연동 - 상주 관리 화면의 카드와 공개 안내(/goin) 화면
 *
 * @version   1.1.1
 * @updated   2026-10-13
 * @shared    복제사이트 공용 파일 - 여기서 고치면 다른 사이트에도 이식해야 한다
 * @changelog
 *   1.1.1 (2026-10-13) 안내·혜택 띠 안 box-sizing 고정(코드 카드 모바일 넘침), 혜택 띠를 들어간 자리 폭으로 접기(7호 좁은 화면).
 *   1.1.0 (2026-10-13) /goin 안내 화면 다시 디자인, 첫 화면 혜택 안내(home-promo) 추가.
 *   1.0.0 (2026-10-13) 신설. 색은 테마 변수(--color-*)만 쓴다 - 9색 테마가 그대로 따라온다.
 */

/* ── 상주 관리 화면 카드 (.public-bugo-manage-panel 안) ───────────────────── */
.goin-card { margin-bottom: 16px; }
.goin-card__lead { margin: 0 0 14px; color: #555; font-size: 14px; line-height: 1.7; }
.goin-progress { margin: 0 0 14px; }
.goin-progress__bar { height: 10px; border-radius: 999px; background: var(--color-surface-soft); overflow: hidden; }
.goin-progress__bar span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.goin-progress__text { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: #666; font-size: 13px; font-weight: 700; }
.goin-code-box { display: grid; gap: 4px; justify-items: center; padding: 18px 12px; margin: 0 0 14px; border-radius: 16px; background: var(--color-surface-soft); text-align: center; }
.goin-code-box span { color: #666; font-size: 13px; font-weight: 700; }
.goin-code-box strong { color: var(--color-primary); font-size: 30px; font-weight: 900; letter-spacing: 6px; font-variant-numeric: tabular-nums; }
.goin-code-box small { color: #666; font-size: 13px; }
.goin-code-box.is-done strong { color: #999; text-decoration: line-through; }
.goin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.goin-actions form { display: contents; }
.goin-actions .goin-btn { width: 100%; }
.goin-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 10px 16px;
    border: 1px solid var(--color-primary); border-radius: 12px; background: #fff; color: var(--color-primary);
    font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
.goin-btn.is-primary { background: var(--color-primary); color: var(--color-on-primary, #fff); }
.goin-btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.goin-check { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; color: #555; font-size: 13px; line-height: 1.6; }
.goin-check input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; }
.goin-status { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--color-surface-soft); color: #555; font-size: 12px; font-weight: 800; }
.goin-flash { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--color-surface-soft); color: #333; font-size: 13px; line-height: 1.6; }
@media (max-width: 480px) {
    .goin-actions { grid-template-columns: 1fr; }
    .goin-code-box strong { font-size: 26px; letter-spacing: 4px; }
}

/* ── 공개 안내 화면 /goin · 첫 화면 혜택 안내(home-promo) ─────────────────────
   1.1.0 (2026-10-13) 다시 디자인. 흰색을 고정으로 쓰지 않고 테마 변수만 쓴다 - 다크 테마(e·i)에서도
   글자와 배경이 같이 바뀐다. 다크 테마에는 --color-primary-rgb 가 없어 쓰지 않는다. */
.goin-page { color: var(--color-text); }
/* 1.1.1: 테마마다 box-sizing 기본값이 달라(1·3·4호는 지정 없음) 코드 카드가 안쪽 여백만큼 넓어져 모바일에서 넘쳤다 */
.goin-page *, .goin-page *::before, .goin-page *::after,
.goin-promo, .goin-promo *, .goin-promo *::before, .goin-promo *::after { box-sizing: border-box; }
.goin-wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }
.goin-eyebrow { margin: 0 0 12px; color: var(--color-primary); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.goin-h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.4; letter-spacing: -.02em; }
.goin-sub { margin: 0 0 32px; color: var(--color-text-light); font-size: 15px; line-height: 1.7; }
.goin-section { padding: 72px 0; }
.goin-section--soft { background: var(--color-surface-soft); }

/* 첫 띠 */
.goin-hero { padding: 64px 0 72px; background: var(--color-primary-soft, var(--color-surface-soft)); border-bottom: 1px solid var(--color-border); }
.goin-hero__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.goin-hero h1 { margin: 0 0 18px; font-size: 40px; line-height: 1.32; letter-spacing: -.03em; }
.goin-lead { margin: 0 0 28px; color: var(--color-text-light); font-size: 17px; line-height: 1.8; }
.goin-lead b { color: var(--color-text); }
.goin-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.goin-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--color-text-light); font-size: 14px; }
.goin-hero__facts li { display: flex; align-items: center; gap: 6px; }
.goin-hero__facts svg { color: var(--color-primary); flex-shrink: 0; }

/* 코드 카드 모형(예시) */
.goin-ticket { position: relative; max-width: 380px; justify-self: center; width: 100%; padding: 30px 28px 26px; border-radius: 22px;
    background: var(--color-primary); color: var(--color-on-primary, #fff); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); overflow: hidden; }
.goin-ticket::before, .goin-ticket::after { content: ''; position: absolute; top: 58%; width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-primary-soft, var(--color-surface-soft)); }
.goin-ticket::before { left: -14px; }
.goin-ticket::after { right: -14px; }
.goin-ticket__tag { position: absolute; top: 16px; right: 18px; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; opacity: .8; }
.goin-ticket__label { display: block; font-size: 13px; font-weight: 700; opacity: .85; }
.goin-ticket__code { display: block; margin: 10px 0 14px; font-size: 40px; font-weight: 900; letter-spacing: 8px; font-variant-numeric: tabular-nums; }
.goin-ticket__meta { display: block; padding-top: 16px; border-top: 1px dashed currentColor; font-size: 13px; opacity: .85; }
.goin-ticket__brand { display: block; margin-top: 6px; font-size: 14px; font-weight: 800; }

/* 받는 순서 */
.goin-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: goinflow; }
.goin-flow li { position: relative; padding: 26px 22px 24px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-bg); }
.goin-flow li::before { counter-increment: goinflow; content: counter(goinflow); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px;
    border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary, #fff); font-weight: 900; }
.goin-flow h3 { margin: 0 0 8px; font-size: 17px; }
.goin-flow p { margin: 0; color: var(--color-text-light); font-size: 14px; line-height: 1.7; }

/* 할 수 있는 일 */
.goin-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.goin-features article { padding: 26px 22px; border-radius: 18px; background: var(--color-bg); border: 1px solid var(--color-border); }
.goin-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px;
    background: var(--color-primary-soft, var(--color-surface-soft)); color: var(--color-primary); }
.goin-features h3 { margin: 0 0 8px; font-size: 17px; }
.goin-features p { margin: 0; color: var(--color-text-light); font-size: 14px; line-height: 1.7; }

/* 꼭 알아 두세요 */
.goin-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.goin-notes article { display: flex; gap: 14px; padding: 22px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-bg); }
.goin-notes .goin-ico { width: 40px; height: 40px; margin: 0; flex-shrink: 0; }
.goin-notes h3 { margin: 0 0 6px; font-size: 16px; }
.goin-notes p { margin: 0; color: var(--color-text-light); font-size: 14px; line-height: 1.7; }

/* 자주 묻는 질문 */
.goin-faq { border-top: 1px solid var(--color-border); }
.goin-faq details { border-bottom: 1px solid var(--color-border); }
.goin-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer; font-weight: 700; list-style: none; }
.goin-faq summary::-webkit-details-marker { display: none; }
.goin-faq summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--color-primary); transition: transform .2s; }
.goin-faq details[open] summary::after { transform: rotate(45deg); }
.goin-faq p { margin: 0 0 18px; color: var(--color-text-light); font-size: 15px; line-height: 1.8; }

/* 마지막 안내 */
.goin-cta { padding: 64px 0; background: var(--color-primary); color: var(--color-on-primary, #fff); text-align: center; }
.goin-cta h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.4; }
.goin-cta p { margin: 0 0 26px; opacity: .88; font-size: 15px; }
.goin-cta .goin-hero__actions { justify-content: center; }
.goin-cta .goin-btn { border-color: var(--color-on-primary, #fff); }
.goin-cta .goin-btn.is-primary { background: var(--color-on-primary, #fff); color: var(--color-primary); }
.goin-cta .goin-btn:not(.is-primary) { background: transparent; color: var(--color-on-primary, #fff); }

/* 첫 화면 혜택 안내(views/goin/home-promo.php) */
.goin-promo { padding: 72px 0; background: var(--color-primary-soft, var(--color-surface-soft)); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.goin-promo__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.goin-promo h2 { margin: 0 0 14px; font-size: 30px; line-height: 1.38; letter-spacing: -.02em; color: var(--color-text); }
.goin-promo__copy > p:not(.goin-eyebrow) { margin: 0 0 20px; color: var(--color-text-light); font-size: 16px; line-height: 1.8; }
.goin-promo__points { display: grid; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; color: var(--color-text); font-size: 15px; }
.goin-promo__points li { display: flex; align-items: center; gap: 8px; }
.goin-promo__points svg { color: var(--color-primary); flex-shrink: 0; }
.goin-promo .goin-btn:not(.is-primary), .goin-hero .goin-btn:not(.is-primary) { background: var(--color-bg); }

@media (max-width: 991px) {
    .goin-hero__grid, .goin-promo__inner { grid-template-columns: 1fr; gap: 36px; }
    .goin-flow, .goin-features { grid-template-columns: repeat(2, 1fr); }
    .goin-notes { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .goin-hero { padding: 44px 0 52px; }
    .goin-hero h1 { font-size: 29px; }
    .goin-lead, .goin-promo__copy > p:not(.goin-eyebrow) { font-size: 15px; }
    .goin-section, .goin-promo { padding: 52px 0; }
    .goin-h2, .goin-cta h2 { font-size: 22px; }
    .goin-promo h2 { font-size: 24px; }
    .goin-flow, .goin-features { grid-template-columns: 1fr; }
    .goin-hero__actions .goin-btn { flex: 1 1 100%; }
    .goin-ticket__code { font-size: 34px; letter-spacing: 6px; }
}

/* 1.1.1: 첫 화면 혜택 안내는 화면 폭이 아니라 「들어간 자리의 폭」으로 접는다 -
   7호처럼 PC 에서도 폭 좁은 모바일형 화면 안에 들어가면 두 단이 끼어 보였다. */
.goin-promo { container-type: inline-size; }
@container (max-width: 760px) {
    .goin-promo__inner { grid-template-columns: 1fr; gap: 32px; }
    .goin-promo h2 { font-size: 24px; }
    .goin-promo__copy > p:not(.goin-eyebrow) { font-size: 15px; }
}
@container (max-width: 520px) {
    .goin-promo .goin-hero__actions .goin-btn { flex: 1 1 100%; }
    .goin-promo .goin-ticket__code { font-size: 34px; letter-spacing: 6px; }
}