/* ===== component: 메인과 서브가 함께 쓰는 부품 (버튼·카드·가격·FAQ·CTA) ===== */

/* ===== 공통 ===== */
.eyebrow {display: inline-flex;align-items: center;gap: 1.2rem;font-size: 1.5rem;font-weight: 600;letter-spacing: .14rem;color: var(--color-primary);margin-bottom: 2rem;}
.eyebrow::before {content: "";width: 3.2rem;height: .2rem;background: currentColor;}
.eyebrow-light {color: var(--color-accent);}
.section-header {max-width: 80rem;margin-bottom: 6rem;}
.section-title {font-size: 5.3rem;font-weight: 600;line-height: 1.35;letter-spacing: -.15rem;text-wrap: balance;}
.section-desc {margin-top: 2.4rem;font-size: 2.2rem;line-height: 1.8;color: var(--color-muted);}
.btn {display: inline-flex;align-items: center;justify-content: center;gap: .8rem;min-height: 5.2rem;padding: 0 2.8rem;border-radius: 10rem;font-size: 1.9rem;font-weight: 700;border: .2rem solid transparent;transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;}
.btn:hover {transform: translateY(-.4rem);}
.btn-lg {min-height: 6.4rem;padding: 0 3.6rem;font-size: 2.1rem;}
.btn-block {width: 100%;}
.btn-primary {background: var(--color-primary);color: #fff;box-shadow: 0 1rem 2.4rem rgba(var(--primary-rgb), .3);}
.btn-primary:hover {background: var(--color-primary-dark);}
.btn-line {border-color: var(--color-ink);color: var(--color-ink);}
.btn-line:hover {background: var(--color-ink);color: #fff;}
.btn-dark {background: var(--color-ink);color: #fff;}
.btn-dark:hover {background: var(--color-primary);}
.btn-accent {background: var(--color-accent);color: var(--color-ink);}
.btn-accent:hover {background: #fff;}
.btn-ghost {border-color: rgba(255, 255, 255, .5);color: #fff;}
.btn-ghost:hover {background: #fff;color: var(--color-ink);}
.check-list li {position: relative;padding-left: 3rem;font-size: 1.9rem;}
.check-list li + li {margin-top: 1.2rem;}
.check-list li::before {content: "";position: absolute;left: 0;top: .5rem;width: 2rem;height: 2rem;border-radius: 50%;background: var(--color-soft);}
.check-list li::after {content: "";position: absolute;left: .4rem;top: .9rem;width: 1.2rem;height: 1.2rem;background: var(--color-primary);-webkit-mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;}
.note {margin-top: 3rem;font-size: 1.5rem;color: var(--color-muted);}

/* ===== 03 가격 ===== */
.price-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 3rem;align-items: stretch;}
.plan {position: relative;display: flex;flex-direction: column;padding: 4.4rem 3.8rem;border: .2rem solid var(--color-line);border-radius: var(--radius);background: var(--color-white);transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;}
.plan:hover {transform: translateY(-1rem);box-shadow: var(--shadow);border-color: var(--color-primary);}
.plan-best {border-color: var(--color-primary);background: var(--color-soft);}
.plan.is-in {transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;}
.badge {position: absolute;top: -1.6rem;right: 3rem;padding: .6rem 1.6rem;border-radius: 10rem;background: var(--color-accent);font-size: 1.5rem;font-weight: 800;letter-spacing: .1rem;}
.plan-name {font-size: 3.3rem;font-weight: 800;}
.plan-name small {margin-left: .6rem;font-size: 1.8rem;font-weight: 600;color: var(--color-muted);}
.plan-for {margin-top: .8rem;font-size: 1.8rem;color: var(--color-muted);}
.plan-price {margin: 3rem 0;padding-bottom: 3rem;border-bottom: .1rem solid var(--color-line);font-size: 2.2rem;font-weight: 700;}
.plan-price strong {font-size: 5.9rem;font-weight: 800;letter-spacing: -.2rem;}
.plan .check-list {flex: 1;margin-bottom: 4rem;}

/* ===== 05 제작 과정 ===== */
.process .section-desc {color: rgba(255, 255, 255, .7);}
.process .eyebrow {color: var(--color-accent);}

/* ===== 07 FAQ ===== */
.faq-inner {display: grid;grid-template-columns: 1fr 1.4fr;gap: 8rem;align-items: start;}
.faq .section-header {margin-bottom: 0;position: sticky;top: calc(var(--header-h) + 4rem);}
.faq-item {border-bottom: .1rem solid var(--color-line);}
.faq-item:first-child {border-top: .1rem solid var(--color-line);}
.faq-q {display: flex;align-items: center;justify-content: space-between;gap: 2rem;width: 100%;padding: 3rem 0;text-align: left;font-size: 2.4rem;font-weight: 700;transition: color .3s;}
.faq-q:hover {color: var(--color-primary);}
.faq-q i {position: relative;flex: none;width: 4rem;height: 4rem;border-radius: 50%;background: var(--color-soft);}
.faq-q i::before, .faq-q i::after {content: "";position: absolute;left: 50%;top: 50%;width: 1.6rem;height: .2rem;background: var(--color-primary);transform: translate(-50%, -50%);transition: transform .3s;}
.faq-q i::after {transform: translate(-50%, -50%) rotate(90deg);}
.faq-q[aria-expanded="true"] i::after {transform: translate(-50%, -50%) rotate(0);}
.faq-a {padding: 0 6rem 3rem 0;font-size: 2.0rem;color: var(--color-muted);}

/* ===== 08 문의 CTA ===== */
.cta {padding: 12rem 0;}
.cta-box {position: relative;padding: 9rem 8rem;border-radius: 4rem;background: var(--color-primary);color: #fff;overflow: hidden;}
.cta-box::before {content: "";position: absolute;right: -12rem;top: -12rem;width: 48rem;height: 48rem;border-radius: 50%;background: rgba(255, 255, 255, .1);}
.cta-box::after {content: "";position: absolute;right: 14rem;bottom: -14rem;width: 30rem;height: 30rem;border-radius: 50%;background: rgba(var(--accent-rgb), .25);}
.cta-box > * {position: relative;z-index: 1;}
.cta-title {font-size: 7.0rem;font-weight: 600;line-height: 1.35;letter-spacing: -.25rem;}
.cta-desc {margin-top: 2.8rem;max-width: 64rem;font-size: 2.2rem;opacity: .9;}
.cta-btns {display: flex;flex-wrap: wrap;gap: 1.6rem;margin-top: 5rem;}

/* ===== 랜딩페이지 50만원 ===== */
.land .eyebrow {color: var(--color-accent);}
.land .section-title {color: #fff;}
.land .section-title em {position: relative;z-index: 0;color: var(--color-ink);}
.land .section-title em::before {content: "";position: absolute;left: -.8rem;right: -.8rem;top: .6rem;bottom: .2rem;background: var(--color-accent);border-radius: 1rem;z-index: -1;transform: rotate(-1.5deg);}
.land .section-desc {color: rgba(255, 255, 255, .85);max-width: 62rem;}
.land .check-list li::before {background: rgba(255, 255, 255, .2);}
.land .check-list li::after {background: var(--color-accent);}
.land .note {color: rgba(255, 255, 255, .7);}
.land-mini .eyebrow {color: var(--color-accent);margin-bottom: .8rem;}

/* ===== 반응형 1280 ===== */
@media (max-width: 1280px) {
  .section-title {font-size: 4.4rem;}
  .cta-title {font-size: 5.7rem;}
}

/* ===== 반응형 1024 ===== */
@media (max-width: 1024px) {
  .price-grid {grid-template-columns: 1fr;max-width: 60rem;}
  .faq-inner {grid-template-columns: 1fr;gap: 4rem;}
  .faq .section-header {position: static;}
}

/* ===== 반응형 768 ===== */
@media (max-width: 768px) {
  .hero-btns .btn {width: 100%;}
  .section-title {font-size: 3.5rem;letter-spacing: -.1rem;}
  .section-desc {font-size: 1.9rem;}
  .section-header {margin-bottom: 4rem;}
  .cta {padding: 7rem 0;}
  .plan {padding: 3.4rem 2.6rem;}
  .plan-price strong {font-size: 4.8rem;}
  .faq-q {font-size: 2.0rem;padding: 2.4rem 0;}
  .faq-a {padding-right: 0;}
  .cta-box {padding: 5rem 2.6rem;border-radius: 2.8rem;}
  .cta-title {font-size: 4.0rem;letter-spacing: -.15rem;}
  .cta-btns .btn {width: 100%;}
}

/* ===== 랜딩 반응형 ===== */
@media (max-width: 768px) {
  .land-btns .btn {width: 100%;}
  .land-mini .btn {width: 100%;}
}

/* ===== 움직임 줄이기 ===== */
@media (prefers-reduced-motion: reduce) {
  .btn, .plan {transition: none;}
}

/* ===== 타이틀 단어 마스크 등장 ===== */
.hero .eyebrow {opacity: 0;transform: translateY(2rem);transition: opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s;}
.swiper-slide-active .eyebrow {opacity: 1;transform: none;}

/* ===== 카드: 마우스 따라오는 빛 ===== */
.plan {position: relative;}
.plan::after {content: "";position: absolute;inset: 0;border-radius: inherit;background: radial-gradient(32rem circle at var(--mx, 50%) var(--my, 50%), rgba(var(--primary-rgb), .1), transparent 60%);opacity: 0;transition: opacity .3s;pointer-events: none;}
.plan:hover::after {opacity: 1;}
.plan:hover {transform: none;translate: 0 -.8rem;}
.plan-best {box-shadow: 0 0 0 .2rem var(--color-primary), 0 2.4rem 6rem rgba(var(--primary-rgb), .2);}

/* ===== 프로세스 / CTA ===== */
.cta-box {background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2) 50%, var(--color-primary-3));}

/* ===== 움직임 줄이기 ===== */
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow {transform: none !important;opacity: 1 !important;transition: none !important;}
}

/* ===== 본문 공통 ===== */
.sub-sec.dark .section-desc {color: rgba(255, 255, 255, .7);}
.sub-sec.dark .eyebrow {color: var(--color-accent);}
.info-card .check-list {margin-top: 1.6rem;}
.info-card .check-list li {font-size: 1.8rem;color: var(--color-ink);}

/* ===== 반응형 ===== */
@media (max-width: 768px) {
  .callout .btn {width: 100%;}
}

/* ===== 포트폴리오 카드: 메인 슬라이드(latest/work_list)와 게시판 목록(board/portfolio)이 함께 쓴다 ===== */
.work-thumb {display: flex;align-items: center;justify-content: center;aspect-ratio: 4 / 3;border-radius: var(--radius);overflow: hidden;color: rgba(18, 19, 26, .5);font-size: 1.6rem;font-weight: 700;transition: transform .5s var(--ease);}
.work-card:hover .work-thumb {transform: scale(1.03);}
.t1 {background: linear-gradient(135deg, var(--tint-1), #eeedff);}
.t2 {background: linear-gradient(135deg, var(--tint-2), var(--accent-wash));}
.t3 {background: linear-gradient(135deg, #bfe9dc, #e6f7f1);}
.t4 {background: linear-gradient(135deg, #ffc9d4, #ffe9ee);}
.work-card h3 {margin-top: 2rem;font-size: 2.6rem;font-weight: 800;}
.work-card p {margin-top: .4rem;font-size: 1.6rem;color: var(--color-muted);}
.work-card a {display: block;}
.work-thumb img {width: 100%;height: 100%;object-fit: cover;}

/* Package details shared by home and pricing page. */
.plan-name small {display:block;margin:1rem 0 0;}
.plan-price {white-space:nowrap;}
.plan-price strong {font-size:clamp(3.8rem,3.5vw,5.9rem);}
.plan-price small {display:block;margin-top:.6rem;font-size:1.5rem;font-weight:400;color:var(--color-muted);}
.plan-duration {margin:0 0 2.4rem;font-size:1.7rem;color:var(--color-muted);}
.price-terms {margin-top:3rem;padding:2.8rem 3rem;border-radius:1.6rem;background:var(--color-soft);font-size:1.7rem;color:var(--color-muted);}
.price-terms p+p {margin-top:1rem;}
.custom-banner {display:flex;align-items:center;justify-content:space-between;gap:3rem;margin-top:2.4rem;padding:3rem;border:1px solid var(--color-line);border-radius:1.6rem;}
.custom-banner h3 {font-size:2.4rem;margin-bottom:.8rem;}
.custom-banner p {font-size:1.8rem;color:var(--color-muted);}
.custom-banner .btn {flex-shrink:0;}
.cta-price {margin-top:2.8rem;font-size:2rem;font-weight:700;}
.cta-fine {margin-top:.8rem;font-size:1.5rem;color:#e0ebff;}

.portfolio-empty {padding:4rem;border:1px solid var(--color-line);background:var(--color-soft);border-radius:2rem;}
.portfolio-empty h3 {font-size:3rem;line-height:1.4;}
.portfolio-empty p:not(.eyebrow) {font-size:1.9rem;margin:2rem 0;}
@media(max-width:1024px){.price-grid{max-width:none;}.custom-banner{flex-direction:column;align-items:flex-start;}.plan-price strong{font-size:5.4rem;}}
@media(max-width:768px){.price-terms,.custom-banner{padding:2.4rem;}.plan-price strong{font-size:4.8rem;}.cta-price{font-size:1.8rem;}}
@media(max-width:460px){:root{--page-gutter:2rem;}.section-title{font-size:3rem;}.sub-title{font-size:4rem;}.cta-title{font-size:3.5rem;}.btn-lg{padding:0 2.4rem;font-size:1.8rem;}.hero-title{word-break:keep-all;}.plan-name{font-size:2.8rem;}.plan{padding:3rem 2rem;}.save-tip{padding:3rem 2rem;}.work-swiper .work-card{width:calc(100vw - 6rem);}.portfolio-empty{padding:3rem 2rem;}.faq-q{font-size:1.8rem;}}