/* 제품 쪽 공통 부품(알툴즈 제품 쪽 형태). 제품 색(--p1/--p2)과 색 띠 배경(.pp-band.bg-1~5 의 --bg)은
   쪽마다 css/product-<이름>.css 에서 <main class="pp is-<이름>"> 으로 정한다(쪽 안 style 속성 금지).
   부품: pp-head(머리), pp-promo(알림 띠), pp-quick(함께 쓰면 좋은), pp-band(화면 폭 색 띠), pp-features(주요 기능), pp-section(요금·사양·다운로드·버전·질문·약관), pp-more(다른 제품) */
.pp{--p1:#4cc3ff;--p2:#1f6bff;--band1:#7cd3ff;--band2:#eef0ff;--band3:#fff;--band4:#f3f4f6;--band5:#1f2937}
/* 한국어 낱말 단위 줄바꿈 (keep-all 공통) */
.pp h1,.pp h2,.pp h3,.pp p,.pp li,.pp small,.pp b,.pp span,.pp td,.pp th{word-break:keep-all;overflow-wrap:anywhere}
.pp-wrap{width:min(1040px,calc(100% - 48px));margin-inline:auto}

/* 머리 */
.pp-head{padding:44px 0 56px}
.pp-head-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:start}
.pp-iconbox{display:grid;place-items:center;width:168px;height:168px;border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--x-line),0 10px 30px #1113180d}
.pp-iconbox .nx-icon.is-image img{width:100%;height:100%}
.pp-title h1{margin:6px 0 6px;font-size:clamp(30px,3.4vw,40px);font-weight:800;letter-spacing:-.04em;color:var(--x-ink)}
.pp-sub{margin:0 0 26px;font-size:17px;font-weight:600;color:var(--x-text)}
.pp-cta{display:flex;flex-wrap:wrap;gap:10px}
.pp-cta .is-disabled{opacity:.45;pointer-events:none}
.pp-meta{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:13px;color:var(--x-sub);white-space:nowrap}
.pp-meta a{color:var(--x-blue)}
.pp-meta a:hover{text-decoration:underline}
.pp-promo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:34px;padding:18px 26px;border-radius:12px;background:linear-gradient(90deg,var(--p2),var(--p1));color:#fff;font-size:16px;transition:filter .2s}
.pp-promo:hover{filter:brightness(1.06)}
.pp-promo b{font-weight:800}
.pp-promo span{flex:0 0 auto;font-size:14px;font-weight:700}
.pp-quick{margin-top:30px}
.pp-quick p{margin:0 0 12px;font-size:15px;font-weight:700;color:var(--x-ink)}
.pp-pills{display:flex;flex-wrap:wrap;gap:8px}
.pp-pills a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 8px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--x-line);font-size:14px;font-weight:600;color:var(--x-text);transition:box-shadow .2s}
.pp-pills a:hover{box-shadow:inset 0 0 0 1.5px var(--x-ink)}
.pp-pills a:after{content:'›';margin-left:2px;color:var(--x-sub)}

/* 화면 폭 색 띠 */
.pp-band{padding:96px 0;background:var(--bg,var(--band1))}
.pp-band.is-dark{color:#fff}
.pp-band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.pp-band.is-flip .pp-band-copy{order:2}
.pp-band h2{margin:0 0 18px;font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.35;letter-spacing:-.035em;word-break:keep-all}
.pp-band p{margin:0;font-size:17px;line-height:1.8;color:inherit;opacity:.82;word-break:keep-all}
.pp-band small{display:block;margin-top:18px;font-size:13px;opacity:.6}
.pp-band ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pp-band li{padding:6px 12px;border-radius:999px;background:#ffffff8c;font-size:13px;font-weight:600;color:var(--x-ink)}
.pp-band.is-dark li{background:#ffffff1f;color:#fff}

.pp-trust{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pp-trust div{padding:22px;border-radius:16px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f}
.pp-trust b{display:block;margin-bottom:6px;font-size:16px;font-weight:800}
.pp-trust span{font-size:14px;line-height:1.7;opacity:.78;word-break:keep-all}
@media(max-width:600px){.pp-trust{grid-template-columns:1fr}}

/* 사진 자리 */
.photo-slot{position:relative;margin:0;overflow:hidden;border-radius:18px;background:#ffffff80;aspect-ratio:16/10}
.photo-slot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.photo-empty{position:absolute;inset:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;border:2px dashed #11131833;border-radius:12px;text-align:center;color:var(--x-text)}
.is-dark .photo-empty{border-color:#ffffff4d;color:#fff}
.photo-empty strong{font-size:15px;font-weight:800}
.photo-empty span{font-size:13px;line-height:1.55;word-break:keep-all;opacity:.85}
.photo-empty small{font-size:11.5px;opacity:.6}
.photo-slot.is-phone{width:min(250px,70%);margin-inline:auto;aspect-ratio:9/19.5;border-radius:34px;border:9px solid var(--x-ink);background:#f1f3f6}
.photo-slot.is-phone .photo-empty{inset:6px;border-radius:22px}

/* 주요 기능 */
.pp-features{padding:96px 0 40px}
.pp-features h2,.pp-section h2{margin:0 0 40px;font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.03em;text-align:center}
.pp-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 36px}
.pp-feature-grid h3{margin:0 0 10px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.pp-feature-grid p{margin:0;font-size:14.5px;line-height:1.75;color:var(--x-text);word-break:keep-all}

/* 요금·사양·다운로드·버전·질문 */
.pp-section{padding:64px 0;scroll-margin-top:80px}
.pp-section h2.is-left{text-align:left;margin-bottom:22px}
.pp-table-wrap{overflow-x:auto;border-radius:14px;box-shadow:0 0 0 1px var(--x-line)}
.pp-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.6;background:#fff}
.pp-table th,.pp-table td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--x-line);vertical-align:top;word-break:keep-all}
.pp-table thead th{background:var(--x-soft);font-size:13.5px;font-weight:700;color:var(--x-sub)}
.pp-table tbody th{font-weight:800;white-space:nowrap}
.pp-table tr:last-child>*{border-bottom:0}
.pp-table .is-price{font-weight:800;color:var(--p2);white-space:nowrap}
.pp-note{margin:14px 0 0;font-size:13px;line-height:1.7;color:var(--x-sub)}
.pp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.pp-card{padding:22px 24px;border-radius:14px;background:var(--x-soft)}
.pp-card h3{margin:0 0 8px;font-size:16px;font-weight:800}
.pp-card p,.pp-card li{margin:0;font-size:14.5px;line-height:1.75;color:var(--x-text);word-break:keep-all}
.pp-card ul{margin:0;padding-left:18px}
.pp-card .nx-btn{margin-top:14px}
.pp-dl{margin:0;padding:0;list-style:none;border-top:1.5px solid var(--x-ink)}
.pp-dl li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;border-bottom:1px solid var(--x-line)}
.pp-dl b{display:block;font-size:16px;font-weight:800}
.pp-dl span{display:block;margin-top:3px;font-size:14px;color:var(--x-sub);word-break:keep-all}
.pp-dl .nx-btn{flex:0 0 auto}
.pp-dl .is-soon{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:var(--x-soft);font-size:13px;font-weight:700;color:var(--x-sub)}
.pp-acc{border-top:1.5px solid var(--x-ink)}
.pp-acc details{border-bottom:1px solid var(--x-line)}
.pp-acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;font-size:16px;font-weight:700;cursor:pointer;list-style:none}
.pp-acc summary::-webkit-details-marker{display:none}
.pp-acc summary:after{content:'';flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--x-sub);border-bottom:2px solid var(--x-sub);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.pp-acc details[open] summary:after{transform:rotate(225deg)}
.pp-acc .pp-acc-body{padding:0 4px 22px;font-size:15px;line-height:1.8;color:var(--x-text);word-break:keep-all}
.pp-acc .pp-acc-body ul{margin:0;padding-left:20px}
.pp-links{display:flex;flex-wrap:wrap;gap:10px}
.pp-links.is-gap{margin-top:18px}

/* 다른 제품 */
.pp-more{padding:64px 0 96px}
.pp-more h2{margin:0 0 20px;font-size:22px;font-weight:800}
.pp-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px}
.pp-more-grid a{display:flex;align-items:center;gap:16px;padding:22px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--x-line);transition:box-shadow .2s,transform .2s}
.pp-more-grid a:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--x-line),0 14px 30px #11131814}
.pp-more-grid b{display:block;font-size:16px;font-weight:800}
.pp-more-grid small{display:block;margin-top:2px;font-size:13px;color:var(--x-sub)}
.pp-more-grid .is-all{justify-content:center;background:var(--x-soft);box-shadow:none;font-size:14px;font-weight:700;color:var(--x-blue);white-space:nowrap}

@media(max-width:900px){
  .pp-head-grid{grid-template-columns:auto minmax(0,1fr)}
  .pp-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;white-space:normal}
  .pp-band-grid{grid-template-columns:1fr;gap:36px}
  .pp-band.is-flip .pp-band-copy{order:0}
  .pp-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-more-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .pp-wrap{width:calc(100% - 40px)}
  .pp-head{padding:28px 0 40px}
  .pp-head-grid{grid-template-columns:1fr;gap:18px}
  .pp-iconbox{width:112px;height:112px;border-radius:22px}
  .pp-iconbox .nx-icon{--s:76px}
  .pp-cta .nx-btn{flex:1 1 auto}
  .pp-promo{flex-direction:column;align-items:flex-start;padding:16px 18px}
  .pp-band{padding:64px 0}
  .pp-feature-grid,.pp-cards,.pp-more-grid{grid-template-columns:1fr}
  .pp-dl li{flex-direction:column;align-items:flex-start}
}