:root { --navy:#17375e; --teal:#078b87; --teal-dark:#056b68; --sun:#f5bd32; --coral:#f06445; --line:#dce7e7; --muted:#66778a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f7faf9; color:#18334d; font-family:"Pretendard","Noto Sans KR",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.ad-guide-header { position:sticky; z-index:30; top:0; display:flex; align-items:center; justify-content:space-between; min-height:70px; border-bottom:1px solid rgba(217,229,229,.85); padding:0 max(20px,calc((100% - 1180px)/2)); background:rgba(255,255,255,.95); backdrop-filter:blur(12px); }
.ad-guide-brand { display:flex; align-items:center; gap:9px; color:var(--navy); font-size:21px; }
.ad-guide-brand span { display:grid; width:40px; height:40px; place-items:center; border-radius:13px 13px 13px 5px; background:linear-gradient(145deg,var(--teal),#09a59f); color:#fff; font-size:12px; font-weight:950; }
.ad-guide-header nav { display:flex; align-items:center; gap:22px; font-size:13px; font-weight:850; }
.ad-guide-header button,.header-contact { border:0; border-radius:10px; padding:10px 13px; background:#e9f6f5; color:var(--teal-dark); font-weight:900; cursor:pointer; }
.header-contact { background:var(--navy); color:#fff; }
main { overflow:hidden; }
.ad-guide-hero { display:grid; width:min(1180px,calc(100% - 40px)); min-height:500px; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; margin:auto; padding:70px 0; }
.eyebrow { margin:0 0 10px; color:var(--teal); font-size:11px; font-weight:950; letter-spacing:2px; }
.ad-guide-hero h1 { margin:0; color:var(--navy); font-size:clamp(36px,5vw,62px); line-height:1.12; letter-spacing:-3px; }
.ad-guide-hero p:not(.eyebrow) { max-width:620px; margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.8; }
.hero-actions { display:flex; gap:10px; margin-top:30px; }
.hero-actions a { border-radius:12px; padding:14px 22px; background:var(--teal); color:#fff; font-size:14px; font-weight:900; }
.hero-actions .secondary { border:1px solid #bddbd8; background:#fff; color:var(--teal-dark); }
.placement-preview { position:relative; min-height:330px; border:10px solid #17375e; border-radius:28px; padding:48px 22px 24px; background:#fff; box-shadow:0 30px 70px rgba(23,55,94,.18); }
.placement-preview::before { content:"PODOKO PH"; position:absolute; top:15px; left:22px; color:var(--navy); font-size:12px; font-weight:950; }
.placement-preview span,.placement-preview strong,.preview-inline { display:grid; place-items:center; border:2px dashed #8fc9c5; border-radius:10px; background:#eef9f7; color:var(--teal-dark); font-size:12px; }
.preview-top { height:58px; }
.preview-columns { display:grid; grid-template-columns:.75fr 1.5fr .75fr; gap:9px; height:150px; margin-top:10px; }
.preview-columns strong { background:#fff7dc; border-color:#edc65d; color:#936b00; }
.preview-inline { height:38px; margin-top:10px; border-color:#efb2a4; background:#fff3ef; color:#ad472f; }
.ad-guide-benefits { display:grid; width:min(1180px,calc(100% - 40px)); grid-template-columns:repeat(4,1fr); gap:10px; margin:0 auto 60px; }
.ad-guide-benefits article { display:grid; min-height:150px; align-content:center; gap:7px; border:1px solid var(--line); border-radius:16px; padding:22px; background:#fff; }
.ad-guide-benefits b { color:var(--coral); font-size:11px; }.ad-guide-benefits strong { color:var(--navy); font-size:15px; }.ad-guide-benefits span { color:var(--muted); font-size:12px; line-height:1.6; }
.ad-guide-section { padding:85px max(20px,calc((100% - 1180px)/2)); background:#fff; }
.section-heading { max-width:680px; margin-bottom:32px; }.section-heading h2,.ad-guide-inquiry h2 { margin:0; color:var(--navy); font-size:clamp(28px,4vw,42px); letter-spacing:-1.8px; }.section-heading p:not(.eyebrow) { color:var(--muted); line-height:1.7; }
.placement-filter { display:flex; gap:7px; overflow:auto; margin-bottom:20px; padding-bottom:3px; }
.placement-filter button { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:9px 15px; background:#fff; color:#536579; font-weight:850; cursor:pointer; }
.placement-filter button.active { border-color:var(--teal); background:var(--teal); color:#fff; }
.placement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.placement-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(23,55,94,.06); }
.placement-visual { position:relative; display:grid; height:205px; place-items:center; padding:15px 15px 31px; background:linear-gradient(135deg,#eaf4f3,#fffaf0); }
.placement-visual > b { position:absolute; right:11px; top:7px; color:rgba(23,55,94,.12); font-size:24px; }
.placement-position-label { position:absolute; right:12px; bottom:8px; border-radius:999px; padding:4px 8px; background:rgba(255,255,255,.92); color:#a8402b; font-size:9px; font-weight:900; box-shadow:0 2px 8px rgba(23,55,94,.08); }
.mock-device { position:relative; overflow:hidden; width:100%; height:100%; border:4px solid #29445f; border-radius:10px; padding:7px; background:#fff; box-shadow:0 7px 18px rgba(23,55,94,.13); }
.mock-mobile { width:104px; border-width:5px; border-radius:17px; }
.mock-mobile::before { content:""; position:absolute; top:3px; left:50%; width:28px; height:3px; border-radius:4px; background:#29445f; transform:translateX(-50%); }
.mock-header { display:flex; justify-content:space-between; margin-top:4px; }.mock-header i { display:block; width:18px; height:6px; border-radius:3px; background:#bdd0d8; }
.mock-search,.mock-board-search { height:10px; margin:6px 0; border-radius:3px; background:#dce7eb; }
.mock-shortcuts { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin:5px 0; }.mock-shortcuts i { height:14px; border-radius:4px; background:#d8efeb; }
.mock-content-lines,.mock-list-column,.mock-detail-content { display:grid; gap:4px; }.mock-content-lines i,.mock-list-column i,.mock-detail-content i { display:block; height:8px; border-radius:3px; background:#e5ecef; }
.mock-desktop { border-radius:8px; }
.mock-site-top { height:11px; border-radius:3px; background:#c8d9df; }.mock-nav-line { height:6px; margin:5px 0; border-radius:2px; background:#dce6e9; }
.mock-slot { display:grid; min-width:0; min-height:20px; place-items:center; border:1px dashed #a9c0c8; border-radius:3px; background:#eef3f5; color:#81949d; font-size:7px; font-weight:900; box-shadow:none; }
.mock-slot.is-target { z-index:2; border:2px solid #ed523a; background:#fff0ec; color:#c13c28; box-shadow:0 0 0 2px rgba(240,100,69,.14); animation:targetPulse 1.8s ease-in-out infinite; }
@keyframes targetPulse { 50% { box-shadow:0 0 0 5px rgba(240,100,69,.17); } }
.mock-mobile > .mock-slot { min-height:25px; }
.mock-header-banner-row { display:grid; grid-template-columns:90px 1fr 65px; gap:6px; align-items:center; }.mock-header-banner-row > div:first-child { display:grid; grid-template-columns:1fr 1fr; gap:3px; }.mock-header-banner-row .mock-slot { min-height:42px; }
.mock-logo-line { height:18px; border-radius:4px; background:#b9ddd9; }.mock-header-info { height:25px; border-radius:4px; background:#e5ecef; }.mock-page-body { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:5px; margin-top:7px; }.mock-page-body i { height:61px; border-radius:4px; background:#e8eef0; }
.mock-three-columns { display:grid; height:calc(100% - 21px); grid-template-columns:.8fr 1.5fr .8fr; gap:5px; margin-top:5px; }.mock-map-column { border-radius:4px; background:linear-gradient(135deg,#d9ead4,#cce5dd); }.mock-right-column { display:grid; align-content:start; gap:4px; }.mock-right-column .mock-slot { min-height:35px; }.mock-right-column > i { height:25px; border-radius:3px; background:#e6ecee; }
.placement-map .mock-device { display:grid; grid-template-rows:auto auto 1fr auto; gap:4px; }.mock-map-area { display:grid; min-height:57px; place-items:center; border-radius:4px; background:linear-gradient(135deg,#d9ead4,#cce5dd); color:#679079; font-size:9px; font-weight:950; }.mock-map-bottom,.mock-board-top { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }.mock-board-top { grid-template-columns:repeat(2,1fr); }.mock-map-bottom .mock-slot { min-height:19px; }
.placement-board .mock-device { display:block; }.mock-board-top .mock-slot { min-height:26px; }.mock-board-posts { display:grid; gap:3px; margin-top:5px; }.mock-board-posts > i { height:8px; border-radius:2px; background:#e4eaed; }.mock-board-posts .mock-slot { min-height:13px; }
.mock-detail-columns { display:grid; height:calc(100% - 17px); grid-template-columns:55px 1fr 55px; gap:5px; margin-top:6px; }.mock-detail-side { display:grid; align-content:start; gap:4px; }.mock-detail-side .mock-slot { min-height:50px; }.mock-detail-content i:first-child { height:27px; background:#cfdee3; }.mock-detail-content i { height:17px; }
.placement-board { background:linear-gradient(135deg,#e8f3ff,#eefaff); }.placement-detail { background:linear-gradient(135deg,#fff0ec,#fff9e9); }.placement-map { background:linear-gradient(135deg,#edf8e7,#e0f4ed); }
.placement-massage { background:linear-gradient(135deg,#f7ecff,#fff2ee); }
.mock-massage-page { display:grid; grid-template-rows:auto auto 1fr; gap:6px; }
.mock-massage-tabs { display:flex; gap:4px; overflow:hidden; }
.mock-massage-tabs i,.mock-massage-tabs b { display:block; flex:1 0 30px; height:13px; border-radius:999px; background:#e3eaed; }
.mock-massage-tabs b { display:grid; min-width:58px; place-items:center; background:#d9f0ec; color:#087f70; font-size:6px; }
.mock-massage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; min-height:0; }
.mock-massage-grid > i,.mock-massage-grid > .mock-slot { min-height:48px; border-radius:5px; }
.mock-massage-grid > i { background:linear-gradient(135deg,#d9c9e5,#efd8cd); }
.mock-massage-grid > .mock-slot { background:linear-gradient(135deg,#ead7f5,#ffe3d8); }
.placement-card-body { padding:19px; }.placement-group { color:var(--coral); font-size:10px; font-weight:950; }.placement-card h3 { margin:5px 0 7px; color:var(--navy); font-size:18px; }.placement-card p { min-height:38px; margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.placement-features { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 0; padding:0; list-style:none; }
.placement-features li { border-radius:999px; padding:5px 8px; background:#f2f7f7; color:#526b75; font-size:10px; font-weight:800; }
.placement-card dl { display:grid; gap:7px; margin:16px 0; }.placement-card dl div { display:flex; justify-content:space-between; border-top:1px solid #edf1f1; padding-top:7px; }.placement-card dt { color:var(--muted); font-size:11px; }.placement-card dd { margin:0; color:var(--navy); font-size:12px; font-weight:900; }
.placement-price { display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; }.placement-price small { color:#657789; font-size:10px; font-weight:700; }.placement-price .regular-price { color:#8a959f; }.placement-price .sale-price { color:#d94732; font-weight:900; }.placement-price .monthly-price { color:#0a806f; }
.placement-card button { width:100%; border:0; border-radius:10px; padding:11px; background:#eaf7f6; color:var(--teal-dark); font-weight:900; cursor:pointer; }
.massage-premium-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; padding:85px max(20px,calc((100% - 1100px)/2)); background:linear-gradient(135deg,#17375e,#0b6f70); color:#fff; }
.massage-premium-visual { border-radius:24px; padding:22px; background:rgba(255,255,255,.1); box-shadow:0 20px 50px rgba(0,0,0,.2); }
.massage-location-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }.massage-location-heading strong { font-size:15px; }.massage-location-heading span { color:#cfe5e7; font-size:10px; }
.massage-location-devices { display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:12px; align-items:stretch; }
.massage-desktop-mock,.massage-mobile-mock { position:relative; overflow:hidden; border:6px solid #fff; border-radius:16px; padding:10px; background:#f5f8f8; color:var(--navy); box-shadow:0 10px 28px rgba(0,0,0,.17); }
.massage-mock-header { display:flex; justify-content:space-between; }.massage-mock-header i { width:22%; height:8px; border-radius:4px; background:#c8d9df; }
.massage-mock-tabs,.massage-mobile-tabs { display:flex; gap:4px; margin:8px 0; overflow:hidden; }.massage-mock-tabs span,.massage-mock-tabs strong,.massage-mobile-tabs span,.massage-mobile-tabs strong { flex:0 0 auto; border-radius:999px; padding:4px 7px; background:#e4ecee; font-size:6px; font-style:normal; }.massage-mock-tabs strong,.massage-mobile-tabs strong { background:#dbf0ed; color:#087f70; }
.massage-mock-ad-grid,.massage-mobile-ad-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.massage-mock-ad-grid > i,.massage-mobile-ad-grid > i { min-height:70px; border-radius:6px; background:linear-gradient(135deg,#c9dce3,#e6d8cf); }
.massage-target-ad { display:grid; border:2px solid #f0523b; border-radius:7px; padding:4px; background:#fff0ec; box-shadow:0 0 0 3px rgba(240,82,59,.15); animation:targetPulse 1.8s ease-in-out infinite; }.massage-target-ad > div { display:grid; min-height:66px; place-items:center; border-radius:4px; background:linear-gradient(135deg,#d6bce8,#efcbbd); color:#fff; font-size:7px; font-weight:900; }
.massage-desktop-mock > em,.massage-mobile-mock > em { position:absolute; right:8px; bottom:6px; border-radius:999px; padding:3px 6px; background:rgba(255,255,255,.9); color:#bd3f2c; font-size:6px; font-style:normal; font-weight:900; }
.massage-mobile-mock { border-width:5px; border-radius:20px; padding:9px 7px; }.massage-mobile-top { display:flex; justify-content:space-between; margin:2px 0 7px; }.massage-mobile-top i { width:26px; height:6px; border-radius:3px; background:#c8d9df; }.massage-mobile-tabs { margin:4px 0 8px; }.massage-mobile-ad-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }.massage-mobile-ad-grid > i { min-height:48px; }.massage-mobile-mock .massage-target-ad > div { min-height:44px; }
.massage-premium-copy h2 { margin:0; font-size:clamp(28px,4vw,43px); letter-spacing:-1.5px; }.massage-premium-copy > p:not(.eyebrow) { color:#d9ebed; line-height:1.8; }.massage-premium-copy ul { display:grid; grid-template-columns:1fr 1fr; gap:9px 24px; padding-left:20px; color:#edf7f7; font-size:13px; line-height:1.6; }
.massage-premium-price { display:grid; gap:5px; margin:22px 0 14px; border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:16px; background:rgba(255,255,255,.09); }.massage-premium-price > span { color:#bde8e5; font-size:11px; font-weight:900; }.massage-premium-price small { color:#d9ebed; }.massage-premium-price strong { color:#ffd65a; font-size:21px; }
#selectMassagePremium { border:0; border-radius:11px; padding:14px 20px; background:var(--sun); color:#584200; font-weight:950; cursor:pointer; }
.process-section { background:#f3f8f7; }.process-list { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0; padding:0; list-style:none; }.process-list li { display:flex; gap:13px; border-radius:16px; padding:22px; background:#fff; }.process-list b { display:grid; flex:0 0 30px; height:30px; place-items:center; border-radius:9px; background:var(--teal); color:#fff; }.process-list strong { color:var(--navy); }.process-list p { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.ad-design-note { display:flex; align-items:center; gap:20px; margin-top:18px; border-radius:16px; padding:24px; background:var(--navy); color:#fff; }.ad-design-note p { flex:1; margin:0; color:#dfeaf5; font-size:13px; }.ad-design-note a { border-radius:9px; padding:11px 15px; background:var(--sun); color:#584200; font-weight:900; }
.ad-guide-inquiry { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; padding:90px max(20px,calc((100% - 1040px)/2)); background:linear-gradient(135deg,#fff,#edf8f6); }
.inquiry-copy > p:not(.eyebrow),.inquiry-copy li { color:var(--muted); line-height:1.7; }.inquiry-copy ul { padding-left:20px; font-size:13px; }
#advertisingInquiryForm { display:grid; gap:12px; border:1px solid var(--line); border-radius:20px; padding:25px; background:#fff; box-shadow:0 16px 40px rgba(23,55,94,.08); }
#advertisingInquiryForm label { display:grid; gap:6px; color:var(--navy); font-size:12px; font-weight:850; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#advertisingInquiryForm input,#advertisingInquiryForm select,#advertisingInquiryForm textarea { width:100%; border:1px solid #d6e2e4; border-radius:9px; padding:11px; background:#fbfdfd; color:#17324d; font:inherit; }.consent { display:flex!important; grid-template-columns:auto 1fr!important; align-items:start; }.consent input { width:auto!important; }.honeypot { position:absolute; left:-10000px; }
#advertisingSubmit { border:0; border-radius:11px; padding:14px; background:var(--teal); color:#fff; font-size:14px; font-weight:950; cursor:pointer; }#advertisingSubmit:disabled { opacity:.5; cursor:wait; }#advertisingFormMessage { min-height:20px; margin:0; color:var(--teal-dark); font-size:12px; font-weight:850; }
footer { display:flex; justify-content:center; gap:15px; padding:28px 20px; background:#122f52; color:#dce8f3; font-size:12px; }footer strong { color:#fff; }footer a { text-decoration:underline; }
@media (max-width:850px) { .ad-guide-header nav > a:not(.header-contact) { display:none; }.ad-guide-hero { grid-template-columns:1fr; gap:35px; }.placement-preview { min-height:280px; }.ad-guide-benefits { grid-template-columns:repeat(2,1fr); }.placement-grid { grid-template-columns:repeat(2,1fr); }.massage-premium-section { grid-template-columns:1fr; gap:34px; }.process-list { grid-template-columns:repeat(2,1fr); }.ad-guide-inquiry { grid-template-columns:1fr; gap:35px; }.ad-design-note { align-items:flex-start; flex-direction:column; } }
@media (max-width:560px) { .ad-guide-header { min-height:60px; padding:0 13px; }.ad-guide-header nav { gap:6px; }.header-contact,.ad-guide-header button { padding:8px; font-size:10px; }.ad-guide-hero { width:calc(100% - 28px); min-height:auto; padding:50px 0; }.ad-guide-hero h1 { font-size:34px; letter-spacing:-2px; }.hero-actions { flex-direction:column; }.placement-preview { border-width:7px; }.ad-guide-benefits { width:calc(100% - 28px); grid-template-columns:1fr 1fr; }.ad-guide-benefits article { min-height:130px; padding:15px; }.ad-guide-section { padding:60px 14px; }.placement-grid,.process-list { grid-template-columns:1fr; }.massage-premium-section { padding:60px 14px; }.massage-premium-copy ul { grid-template-columns:1fr; }.ad-guide-inquiry { padding:60px 14px; }.form-row { grid-template-columns:1fr; }footer { align-items:center; flex-direction:column; } }

/* PODOKO brand system */
:root { --navy:#2b1b2e; --teal:#5c1a2b; --teal-dark:#43111e; --sun:#c9a25b; --coral:#c97b93; --line:#e5ddd5; --muted:#766d67; }
body { background:#f6f1ea; color:#2a2724; }
.ad-guide-header { border-color:rgba(92,26,43,.12); background:rgba(255,253,249,.96); }
.ad-guide-brand img { display:block; width:138px; height:58px; object-fit:contain; object-position:left center; }
.ad-guide-brand > span,.ad-guide-brand > strong { display:none; }
.header-contact,.hero-actions a,#advertisingSubmit,.placement-filter button.active,.process-list b { background:#5c1a2b; color:#fff; }
.ad-guide-header button { background:#f5e8eb; color:#5c1a2b; }
.ad-guide-hero { background:radial-gradient(circle at 80% 40%,rgba(201,123,147,.12),transparent 30%); }
.placement-preview { border-color:#5c1a2b; box-shadow:0 30px 70px rgba(92,26,43,.18); }
.placement-preview::before { color:#5c1a2b; }
.ad-guide-benefits article,.placement-card,#advertisingInquiryForm { border-color:#e5ddd5; background:#fffdf9; }
.ad-guide-section { background:#fffdf9; }
.process-section { background:#eee6df; }
.ad-design-note,footer { background:#2b1b2e; }
.ad-guide-inquiry { background:linear-gradient(135deg,#fffdf9,#f3e7e3); }
.banner-type-guide strong,.banner-type-guide article:first-child strong { background:#f7e9ed; color:#5c1a2b; }