html, body { min-height:100%; }
body { min-height:100vh; }
#container { min-height:calc(100vh - 14px - 76px); }

.inner { width:100%; max-width:1420px; margin:0 auto; padding:0 20px; word-break: keep-all; }

.agencyHeader { position:fixed; left:0; top:0; width:100%; border-bottom:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.82); backdrop-filter:blur(16px); z-index:100; }
.agencyHeader .inner { display:flex; align-items:center; justify-content:space-between; height:78px; }
.agencyHeader .inner a { width: 100px; }
.agencyHeader .inner a img { width: 100%; }
.agencyLogo { font-size:22px; font-weight:400; letter-spacing:-.04em; }
.agencyLogo span { color:#ff8eb5; }
.agencyNav { display:flex; align-items:center; gap:34px; color:#333; font-size:18px; font-weight:600; }
a.agencyContactBtn { display:flex; align-items:center; justify-content:center; height:30px; padding:0 22px; border-radius:999px; background:var(--colorText); color:var(--colorWhite); font-size:14px; font-weight:700; }

.mainVisual { padding:190px 0 120px; background:linear-gradient(180deg, #fff 0%, #fff7fa 100%); overflow:hidden; }
.mainVisual .inner { position:relative; }
.mainBadge { display:inline-flex; align-items:center; height:36px; padding:0 16px; border:1px solid rgba(255,143,181,.35); border-radius:999px; background:#fff; color:#ff79a9; font-size:14px; font-weight:700; }
.mainTitle { max-width:880px; margin:28px 0 26px; font-size:76px; font-weight:400; line-height:1.05; letter-spacing:-.06em; }
.mainTitle span { position:relative; z-index:1; }
.mainTitle span::before { content:""; position:absolute; left:-4px; right:-4px; bottom:8px; height:22px; background:var(--colorMain); z-index:-1; }
.mainDesc { max-width:620px; margin:0 0 44px; color:#555; font-size:20px; font-weight:400; line-height:1.7; letter-spacing:-.03em; }
.mainBtnBox { display:flex; align-items:center; gap:12px; }
.mainBtn { display:flex; align-items:center; justify-content:center; height:40px; padding:0 28px; border-radius:999px; font-size:16px; font-weight:400; }
.mainBtn.primary { background:var(--colorText); color:var(--colorWhite); }
.mainBtn.secondary { border:1px solid #ddd; background:#fff; color:var(--colorText); }
.mainObject {
    position:absolute;
    right:20px;
    top:10px;
    width:360px;
    height:360px;
    border-radius:47% 53% 58% 42% / 42% 48% 52% 58%;
    background:radial-gradient(circle at 35% 30%, #fff 0%, #ffc7d9 28%, rgba(255,199,217,.55) 58%, rgba(255,255,255,.2) 100%);
    opacity:.85;
    filter:blur(3px);
    animation:bubbleMove 10s ease-in-out infinite alternate;
}

@keyframes bubbleMove {
    0% {
        transform:translate(0, 0) scale(1) rotate(0deg);
        border-radius:47% 53% 58% 42% / 42% 48% 52% 58%;
    }

    25% {
        transform:translate(-60px, 20px) scale(1.06) rotate(8deg);
        border-radius:56% 44% 45% 55% / 52% 38% 62% 48%;
    }

    50% {
        transform:translate(-140px, -20px) scale(.96) rotate(-6deg);
        border-radius:42% 58% 54% 46% / 46% 59% 41% 54%;
    }

    75% {
        transform:translate(-220px, 30px) scale(1.08) rotate(4deg);
        border-radius:60% 40% 50% 50% / 44% 56% 44% 56%;
    }

    100% {
        transform:translate(-300px, 0) scale(1);
        border-radius:50% 50% 42% 58% / 58% 42% 58% 42%;
    }
}
.mainObject::before { content:""; position:absolute; right:-70px; top:70px; width:120px; height:120px; border-radius:50%; background:rgba(255,199,217,.45); filter:blur(2px); animation:bubbleSmall 5s ease-in-out infinite alternate; }

.mainObject::after { content:""; position:absolute; left:20px; bottom:-60px; width:90px; height:90px; border-radius:50%; background:rgba(255,199,217,.35); filter:blur(2px); animation:bubbleSmall 6.5s ease-in-out infinite alternate-reverse; }

@keyframes bubbleSmall {
    0% { transform:translate(0, 0) scale(1); opacity:.45; }
    100% { transform:translate(18px, -24px) scale(1.18); opacity:.75; }
}
.section { padding:130px 0; }
.section.gray { background:#fffbfb; }
.sectionTitleBox { margin-bottom:54px; }
.sectionLabel { margin-bottom:14px; color:#ff79a9; font-size:15px; font-weight:400; letter-spacing:.08em; }
.sectionTitle { margin:0; font-size:46px; font-weight:400; line-height:1.22; letter-spacing:-.05em; }
.sectionText { margin:18px 0 0; color:var(--colorSub); font-size:18px; line-height:1.7; letter-spacing:-.03em; }

.serviceList { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.serviceItem { min-height:280px; padding:34px; border:1px solid var(--colorLine); border-radius:28px; background:#fff; transition:.3s; }
.serviceItem:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,.08); }
.serviceNum { color:#ff8eb5; font-size:15px; font-weight:400; }
.serviceItem h3 { margin:28px 0 16px; font-size:25px; font-weight:400; line-height:1.35; letter-spacing:-.04em; }
.serviceItem p { margin:0; color:#666; font-size:16px; line-height:1.7; letter-spacing:-.03em; }

.skillWrap { display:grid; grid-template-columns:1fr 1.2fr; gap:70px; align-items:start; }
.skillSticky { position:sticky; top:120px; }
.skillList { display:grid; gap:14px; }
.skillItem { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-radius:20px; background:#fff; border:1px solid var(--colorLine); }
.skillItem strong { font-size:20px; font-weight:400; letter-spacing:-.04em; }
.skillItem span { color:#777; font-size:15px; }

.portfolioList { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.portfolioItem { overflow:hidden; border-radius:30px; background:#fff; border:1px solid var(--colorLine); }
.portfolioThumb { height:260px; background:linear-gradient(135deg, #fff1f6, #f5f5f5); }
.portfolioThumb img { width: 100%; height: 100%;object-fit: cover; }
.portfolioThumb.type2 { background:linear-gradient(135deg, #f3f8ff, #fff1f6); }
.portfolioThumb.type3 { background:linear-gradient(135deg, #f7f3ff, #f5f5f5); }
.portfolioThumb.type4 { background:linear-gradient(135deg, #fff9ec, #fff1f6); }
.portfolioThumb.type5 { background:linear-gradient(135deg, #effff8, #f7f7f7); }
.portfolioThumb.type6 { background:linear-gradient(135deg, #f4f4f4, #fff1f6); }
.portfolioText { padding:28px; }
.portfolioText em { display:block; margin-bottom:12px; color:#ff79a9; font-size:13px; font-style:normal; font-weight:400; }
.portfolioText h3 { margin:0 0 12px; font-size:22px; font-weight:400; letter-spacing:-.04em; }
.portfolioText p { margin:0; color:#666; font-size:15px; line-height:1.6; }

.processList { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.processItem { padding:30px 22px; border-radius:24px; background:#fff; border:1px solid var(--colorLine); }
.processItem strong { display:block; margin-bottom:28px; color:#ff79a9; font-size:15px; font-weight:900; }
.processItem h3 { margin:0 0 12px; font-size:20px; font-weight:400; }
.processItem p { margin:0; color:#777; font-size:14px; line-height:1.6; }

.contactSection { padding:130px 0; background:#171717; color:#fff; }
.contactBox { display:grid; grid-template-columns:1fr 460px; gap:70px; align-items:center; }
.contactTitle { margin:0; font-size:54px; font-weight:400; line-height:1.18; letter-spacing:-.05em; }
.contactDesc { margin:24px 0 40px; color:#bbb; font-size:18px; line-height:1.7; }
.contactInfoList { display:grid; gap:12px; }
.contactInfoList li { color:#ddd; font-size:16px; }
.contactForm { padding:34px; border-radius:28px; background:#fff; color:#171717; }
.contactForm h3 { margin:0 0 24px; font-size:26px; font-weight:400; }
.formItem { margin-bottom:12px; }
.formItem input, .formItem select, .formItem textarea { width:100%; border:1px solid #e5e5e5; border-radius:14px; padding:16px; color:#171717; font-size:15px; font-family:inherit; outline:none; }
.formItem textarea { height:130px; resize:none; }
.formSubmit { width:100%; height:54px; border:0; border-radius:999px; background:var(--colorMain); color:#171717; font-size:16px; font-weight:900; cursor:pointer; }

.footer { padding:80px 0; background:#111; color:#fff; }
.footer .inner { width:100%; max-width:1400px; margin:0 auto; padding:0 20px; }
.footerTop { margin-bottom:40px; width: 150px; }
.footerTop img { width: 100%; }
.footerTop p { margin:0; color:rgba(255,255,255,.6); font-size:15px; }
.footerBottom { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-top:30px; border-top:1px solid rgba(255,255,255,.1); }
.footerInfo { display:flex; flex-direction:column; gap:6px; }
.footerInfo strong { color:#fff; font-size:18px; font-weight:700; }
.footerInfo span { color:rgba(255,255,255,.55); font-size:14px; line-height:1.7; }
.footerInfo a { color:rgba(255,255,255,.75); }
.footerCopy { color:rgba(255,255,255,.35); font-size:13px; text-align:right; }
.footer a { color:inherit; }
@media (max-width:768px) { .footer { padding:60px 0; } .footerBottom { flex-direction:column; align-items:flex-start; gap:20px; } .footerTop h2 { font-size:34px; } .footerCopy { text-align:left; } }
a.channelTalkBtn { position:fixed; right:24px; bottom:24px; display:flex; align-items:center; gap: 10px; justify-content:center; height:58px; padding:0 24px; border-radius:999px; background:var(--colorMain); color:var(--colorWhite); font-size:16px; font-weight:900; box-shadow:0 12px 30px rgba(255,199,217,.55); z-index:200; }

.footer a { color:inherit; }
.faqSection { padding:130px 0; background:#fff; }
.faqSection .sectionTitleBox { margin-bottom:54px; }
.faqList { border-top:1px solid var(--colorText); }
.faqItem { border-bottom:1px solid #eee; }
.faqBtn { width:100%; padding:30px 10px; border:0; background:none; color:var(--colorText); text-align:left; cursor:pointer; font-family:inherit; }
.faqBtn span { position:relative; display:block; padding-right:54px; font-size:22px; font-weight:800; line-height:1.45; letter-spacing:-.04em; }
.faqBtn span::before { content:""; position:absolute; right:6px; top:50%; width:18px; height:2px; background:var(--colorText); transform:translateY(-50%); }
.faqBtn span::after { content:""; position:absolute; right:14px; top:50%; width:2px; height:18px; background:var(--colorText); transform:translateY(-50%); transition:.3s; }
.faqItem.on .faqBtn span::after { transform:translateY(-50%) rotate(90deg); opacity:0; }
.faqContent { max-height:0; overflow:hidden; padding:0 10px; opacity:0; transition:max-height .45s ease, opacity .35s ease, padding .35s ease; }
.faqItem.on .faqContent { max-height:300px; padding:0 10px 34px; opacity:1; }
.faqContent p { transform:translateY(-8px); transition:transform .35s ease; }
.faqItem.on .faqContent p { transform:translateY(0); }

.inquiryPopup { position:fixed; left:0; top:0; width:100%; height:100%; opacity:0; visibility:hidden; pointer-events:none; transition:.3s; z-index:99999; }
.inquiryPopup.on { opacity:1; visibility:visible; pointer-events:auto; }
.inquiryPopupDim { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); }
.inquiryPopupBox { position:absolute; left:50%; top:50%; width:calc(100% - 40px); max-width:420px; padding:42px 30px 34px; border-radius:28px; background:#fff; text-align:center; box-shadow:0 25px 70px rgba(0,0,0,.18); transform:translate(-50%, -45%) scale(.96); transition:.35s; }
.inquiryPopup.on .inquiryPopupBox { transform:translate(-50%, -50%) scale(1); }
.inquiryPopupIcon { display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin:0 auto 20px; border-radius:50%; background:var(--colorMain); color:var(--colorText); font-size:32px; font-weight:800; }
.inquiryPopupBox h3 { margin:0 0 10px; color:var(--colorText); font-size:24px; font-weight:800; letter-spacing:-.04em; }
.inquiryPopupBox p { margin:0 0 26px; color:var(--colorSub); font-size:15px; line-height:1.6; }
.inquiryPopupBox button { width:100%; height:52px; border:0; border-radius:16px; background:var(--colorText); color:#fff; font-size:15px; font-weight:800; cursor:pointer; }

@media (max-width:1024px) {
    .agencyNav { display:none; }
    .mainTitle { font-size:56px; }
    .mainObject { width:260px; height:260px; opacity:.45; }
    .serviceList { grid-template-columns:repeat(2,1fr); }
    .skillWrap { grid-template-columns:1fr; gap:40px; }
    .skillSticky { position:static; }
    .portfolioList { grid-template-columns:repeat(2,1fr); }
    .processList { grid-template-columns:repeat(2,1fr); }
    .contactBox { grid-template-columns:1fr; }
    .faqSection { padding:110px 0; }
    .faqBtn span { font-size:20px; }
}

@media (max-width:768px) {
    .inner { padding:0 16px; }
    .agencyHeader .inner { height:66px; }
    .agencyLogo { font-size:19px; }
    .agencyContactBtn { height:40px; padding:0 16px; font-size:13px; }
    .mainVisual { padding:140px 0 80px; }
    .mainTitle { font-size:42px; }
    .mainDesc { font-size:17px; }
    .mainBtnBox { flex-direction:column; align-items:stretch; }
    .mainBtn { width:100%; }
    .section { padding:90px 0; }
    .sectionTitle { font-size:34px; }
    .serviceList, .portfolioList, .processList { grid-template-columns:1fr; }
    .serviceItem { min-height:auto; padding:28px; }
    .portfolioThumb { height:220px; }
    .contactSection { padding:90px 0; }
    .contactTitle { font-size:36px; }
    .contactForm { padding:24px; }
    .footer .inner { flex-direction:column; }
    .channelTalkBtn { right:16px; bottom:16px; height:52px; padding:0 20px; font-size:14px; }
    .faqSection { padding:90px 0; }
    .faqSection .sectionTitleBox { margin-bottom:38px; }
    .faqBtn { padding:24px 0; }
    .faqBtn span { padding-right:44px; font-size:18px; }
    .faqBtn span::before { right:4px; width:16px; }
    .faqBtn span::after { right:11px; height:16px; }
    .faqContent { padding:0 0 28px; }
    .faqContent p { font-size:15px; line-height:1.75; }
}


/* #service { position:relative; overflow:hidden; }
#service .inner { position:relative; z-index:2; }

#service .aboutPlane { position:absolute; display:block; width:64px; height:46px; background:var(--colorMain); clip-path:polygon(0 50%, 100% 0, 72% 100%, 48% 62%, 24% 82%); pointer-events:none; filter:drop-shadow(0 14px 22px rgba(255,121,169,.25)); z-index:1; }

#service .plane1 { left:-100px; top:25%; opacity:.45; animation:planeMove1 12s linear infinite; }
#service .plane2 { left:-120px; bottom:18%; width:42px; height:30px; opacity:.28; animation:planeMove2 14s linear infinite 2s; }
#service .plane3 { right:8%; top:14%; width:34px; height:24px; opacity:.22; animation:aboutPlaneFloat 4s ease-in-out infinite alternate; }

@keyframes planeMove1 {
    0% { transform:translateX(0) translateY(0) rotate(12deg); opacity:0; }
    10% { opacity:.45; }
    25% { transform:translateX(25vw) translateY(130px) rotate(35deg); opacity:.45; }
    50% { transform:translateX(50vw) translateY(220px) rotate(85deg); opacity:.45; }
    75% { transform:translateX(78vw) translateY(20px) rotate(280deg); opacity:.45; }
    100% { transform:translateX(120vw) translateY(-80px) rotate(360deg); opacity:0; }
}

@keyframes planeMove2 {
    0% { transform:translateX(0) translateY(0) rotate(-10deg); opacity:0; }
    12% { opacity:.28; }
    35% { transform:translateX(35vw) translateY(-90px) rotate(20deg); opacity:.28; }
    65% { transform:translateX(65vw) translateY(90px) rotate(80deg); opacity:.28; }
    100% { transform:translateX(120vw) translateY(-40px) rotate(160deg); opacity:0; }
}

@keyframes aboutPlaneFloat {
    0% { transform:translate(0, 0) rotate(-12deg); }
    100% { transform:translate(-18px, -26px) rotate(8deg); }
} */

.priceSection { padding:130px 0; background:var(--colorBg); }
.priceList { display:grid; gap:16px; }

.priceList li { display:flex; align-items:center; gap:30px; padding:28px 34px; border:1px solid var(--colorLine); border-radius:24px; background:#fff; }

.priceList strong { min-width:180px; font-size:22px; font-weight:400; letter-spacing:-.04em; }

.priceList span { flex:1; color:#777; font-size:15px; }

.priceList em { color:#ff79a9; font-size:15px; font-style:normal; font-weight:700; }
@media (max-width:1024px) {
    .priceList { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
    .priceSection { padding:90px 0; }

    .priceList {
        grid-template-columns:1fr;
        gap:12px;
    }

    .priceList li {
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        padding:24px;
    }

    .priceList strong {
        min-width:auto;
        font-size:20px;
        line-height:1.3;
    }

    .priceList span {
        width:100%;
        font-size:14px;
        line-height:1.6;
        color:#888;
    }

    .priceList em {
        margin-top:4px;
        font-size:18px;
        font-weight:700;
    }
}

.insightVisual { padding:190px 0 110px; background:linear-gradient(180deg, #fff 0%, #fff7fa 100%); }
.insightVisual h1 { margin:24px 0 24px; font-size:64px; font-weight:400; line-height:1.12; letter-spacing:-.06em; }
.insightVisual p:not(.sectionLabel) { max-width:620px; color:#555; font-size:19px; line-height:1.7; letter-spacing:-.03em; }
.insightSection { padding:120px 0 130px; background:#fff; }
.insightList { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.insightItem { overflow:hidden; border:1px solid var(--colorLine); border-radius:10px; background:#fff; transition:.3s; }
.insightItem:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,.08); }
.insightItem a { display:block; height:100%; }
.insightThumb { height:250px; background:#fff1f6; }
.insightThumb img { width:100%; height:100%; object-fit:cover; }
.insightText { padding:28px; }
.insightText span { display:block; margin-bottom:14px; color:#ff79a9; font-size:13px; font-weight:400; }
.insightText h3 { margin:0 0 14px; color:var(--colorText); font-size:22px; font-weight:400; line-height:1.4; letter-spacing:-.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.insightText p { display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical; min-height:76px; margin:0; color:#666; font-size:15px; line-height:1.7; }
.insightEmpty { grid-column:1 / -1; padding:80px 20px; border:1px solid var(--colorLine); border-radius:10px; background:#fff; text-align:center; }
.insightEmpty p { color:#777; font-size:16px; }
.insightPaging { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:50px; }
.insightPaging a { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--colorLine); border-radius:50%; color:#777; font-size:14px; }
.insightPaging a.on { border-color:var(--colorMain); background:var(--colorMain); color:var(--colorText); font-weight:700; }

@media (max-width:1024px) {
    .insightVisual h1 { font-size:50px; }
    .insightList { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
    .insightVisual { padding:140px 0 80px; }
    .insightVisual h1 { font-size:38px; }
    .insightVisual p:not(.sectionLabel) { font-size:16px; }
    .insightSection { padding:90px 0; }
    .insightList { grid-template-columns:1fr; }
    .insightThumb { height:220px; }
    .insightText { padding:24px; }
}

.insightViewVisual { padding:190px 0 90px; background:linear-gradient(180deg, #fff 0%, #fff7fa 100%); }
.insightViewVisual h1 { max-width:1000px; margin-top:20px; font-size:68px; font-weight:400; line-height:1.2; letter-spacing:-.06em; }
.insightMeta { display:flex; align-items:center; gap:20px; margin-top:30px; color:#888; font-size:14px; }

.insightViewSection { padding:100px 0 140px; background:#fff; }
.insightContent { max-width:900px; margin:0 auto; color:#444; font-size:18px; line-height:2; word-break:keep-all; }
.insightContent h1, .insightContent h2, .insightContent h3, .insightContent h4 { margin:60px 0 25px; color:var(--colorText); line-height:1.4; }
.insightContent h2 { font-size:42px; font-weight:400; letter-spacing:-.05em; }
.insightContent h3 { font-size:30px; font-weight:400; letter-spacing:-.04em; }
.insightContent p { margin:25px 0; }
.insightContent img { display:block; max-width:100%; height:auto; margin:50px auto; }
.insightContent ul, .insightContent ol { margin:25px 0 25px 20px; }
.insightContent li { margin:10px 0;  list-style-type:disc;  }

.insightBtnBox { display:flex; justify-content:center; margin-top:80px; }
a.insightListBtn { display:inline-flex; align-items:center; justify-content:center; min-width:180px; height:58px; border-radius:999px; background:#111; color:#fff; font-size:15px; transition:.3s; }
.insightListBtn:hover { background:var(--colorMain); }

@media (max-width:1024px) {
    .insightViewVisual h1 { font-size:54px; }
}

@media (max-width:768px) {
    .insightViewVisual { padding:140px 0 70px; }
    .insightViewVisual h1 { font-size:38px; }
    .insightViewSection { padding:70px 0 100px; }
    .insightContent { font-size:16px; line-height:1.9; }
    .insightContent h2 { font-size:30px; }
    .insightContent h3 { font-size:24px; }
}