/* This page uses the site's header/footer; keep campaign styles inside its wrapper. */
body.php2shell-contact-page #content { padding: 0; }
body.php2shell-contact-page #content > .xe-container { width: 100%; max-width: none; padding: 0; }

.php2shell-page {
  --blue: #345bd9; --blue-line: #0254ec; --text: rgba(0,0,0,.87);
  --text-sub: #4f4f5d; --border: #bdbdbd;
  --font: "Avenir LT Std", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-title: "Pretendard", var(--font);
  /* Figma "Rectangle 13": the last 467px fade #f5f5f5 -> #fff so the page runs into the white footer without a seam. */
  padding-bottom: 80px; background: #f5f5f5 linear-gradient(to bottom, #f5f5f5 calc(100% - 467px), #fff 100%); color: var(--text);
  font-family: var(--font); letter-spacing: -.2px; word-break: keep-all; -webkit-font-smoothing: antialiased;
}
.php2shell-page *, .php2shell-page *::before, .php2shell-page *::after { box-sizing: border-box; }
.php2shell-page p, .php2shell-page h1, .php2shell-page h2, .php2shell-page h3 { margin: 0; padding: 0; }
/* Avoid a lone word on the last line when sentences wrap. */
.php2shell-page p { text-wrap: pretty; }
.php2shell-page a { color: inherit; text-decoration: none; }
.php2shell-page img { display: block; max-width: none; }
/* Same content box as the header (.header-inner-box): edges line up with the logo and the GNB at every breakpoint.
   Header: <768 padding 15+5 / 768+ xe-container 750-10 / 992+ 970-30 / 1200+ 1170-30. */
.php2shell-page .inner { width: calc(100% - 40px); margin: 0 auto; }
@media (min-width: 768px) { .php2shell-page .inner { max-width: 740px; } }
@media (min-width: 992px) { .php2shell-page .inner { max-width: 940px; } }
@media (min-width: 1200px) { .php2shell-page .inner { max-width: 1140px; } }
.php2shell-page .section__title { font-family: var(--font-title); font-size: 32px; font-weight: 600; line-height: 1.4; color: #000; }

/* Hero */
.php2shell-page .hero { position: relative; overflow: hidden; height: 476px; padding-top: 120px; background: var(--blue); color: #fff; text-align: center; }
.php2shell-page .hero__pattern { position: absolute; width: 324px; height: 174px; object-fit: cover; pointer-events: none; }
.php2shell-page .hero__pattern--a { left: calc(50% - 570px); top: 332px; }
.php2shell-page .hero__pattern--b { left: calc(50% + 226px); top: 0; }
.php2shell-page .hero__title { position: relative; font-family: var(--font-title); font-size: 48px; font-weight: 700; line-height: 66px; color: #fff; }
.php2shell-page .hero__line { display: block; }
/* Keep "PHP" as real heading text (SEO reads "PHP 기반 홈페이지"); the logo is painted over it. */
/* Sized in em so it scales with the heading. The logo's glyph baseline sits at 39.05/50 of its box,
   so the box bottom drops (50-39.05)/48 = .228em below the text baseline; the 'h' ascender then meets the Hangul cap line. */
.php2shell-page .hero__php { display: inline-block; width: 2.0834em; height: 1.0417em; overflow: hidden; vertical-align: -.228em; background: url("../img/php2shell/logo-php.svg") no-repeat 0 0 / 100% 100%; color: transparent; line-height: 1; text-align: left; }
.php2shell-page .hero__desc { position: relative; margin: 16px 16px 0; font-size: 18px; line-height: 26px; text-wrap: balance; }
.php2shell-page .hero__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 56px; margin-top: 28px; padding-top: 2px; background: #fff; background-clip: padding-box; border: 4px solid rgba(255,255,255,.16); border-radius: 8px; color: #000; font-size: 18px; font-weight: 700; transition: transform .2s; }
.php2shell-page .hero__cta:hover { transform: translateY(-2px); }
.php2shell-page .hero__cta:focus-visible, .php2shell-page .form__submit:focus-visible { outline: 3px solid #ffcf66; outline-offset: 4px; }

/* About */
.php2shell-page .about-wrap { padding-top: 80px; }
.php2shell-page .about { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
/* Desktop: the text keeps its natural width so every sentence stays on one line (as in Figma); the illustration gives way. */
.php2shell-page .about__text { flex: 1 0 auto; max-width: calc(100% - 420px); }
.php2shell-page .about__body { margin-top: 21px; font-size: 15px; line-height: 28px; color: var(--text-sub); }
/* Shrinks only as far as the text needs, keeping the Figma 466.6 x 268.9 proportion. */
.php2shell-page .browser { flex: 0 1 467px; position: relative; max-width: 467px; aspect-ratio: 466.6 / 268.9; overflow: hidden; background: #fff; border: .54px solid var(--blue-line); border-radius: 6.48px; }
.php2shell-page .browser__bar { height: 27.46px; padding: 4.32px; border-bottom: .54px solid var(--blue-line); background: #fff; }
.php2shell-page .browser__bar img { width: 18.64px; height: 18px; }
.php2shell-page .browser__screen { display: flex; align-items: center; justify-content: center; height: calc(100% - 27.46px); background: linear-gradient(to bottom, #f1f4ff, #fff); }
.php2shell-page .browser__screen img { width: 86px; height: 85px; object-fit: cover; }

/* Scope cards */
.php2shell-page .scope { padding-top: 45px; }
.php2shell-page .cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 21px; }
.php2shell-page .card { min-height: 193px; padding: 30px 20px 28px 30px; background: #fff; border: 1px solid #eaeaf2; border-radius: 8px; }
.php2shell-page .card h3 { font-family: var(--font-title); font-size: 21px; font-weight: 600; line-height: 29px; color: #000; }
.php2shell-page .card p { margin-top: 16px; font-size: 15px; line-height: 24px; color: var(--text-sub); }
/* Figma's manual breaks were set for 300px cards; in the 1140px container they split lines unevenly, so let the text flow. */
.php2shell-page .card p br { display: none; }
.php2shell-page .card__link { font-weight: 700; color: #355cd9; text-decoration: underline; }
.php2shell-page .card__link:hover { text-decoration-thickness: 2px; }
.php2shell-page .card__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.php2shell-page .card__partners { display: flex; align-items: center; gap: 13.6px; margin-top: 20px; }
.php2shell-page .card__partners img:first-child { width: 88px; height: 20px; }
.php2shell-page .card__partners img:last-child { width: 49.07px; height: 19.2px; }

/* Banner */
.php2shell-page .banner-wrap { padding-top: 40px; }
.php2shell-page .banner { display: grid; grid-template-columns: 353px 1fr; min-height: 288px; padding: 60px; border-radius: 47px; color: #fff; background: linear-gradient(197.37deg,#6e8ae4 .83%,var(--blue) 29.66%); }
.php2shell-page .banner h2 { white-space: nowrap; font-family: var(--font-title); font-size: 36px; font-weight: 600; line-height: 43px; color: #fff; }
.php2shell-page .banner__body { font-size: 18px; line-height: 28px; }
.php2shell-page .banner__body p + p { margin-top: 28px; }
.php2shell-page .banner__body br { display: none; }

/* Form */
.php2shell-page .form-wrap { padding-top: 80px; scroll-margin-top: 90px; }
.php2shell-page .form { width: 770px; max-width: calc(100% - 32px); margin: 0 auto; padding: 40px; background: #fff; border-radius: 12px; box-shadow: 0 5px 5px -3px rgba(0,0,0,.1),0 3px 14px 2px rgba(0,0,0,.1),0 8px 10px 1px rgba(0,0,0,.1); }
.php2shell-page .field + .field { padding-top: 25px; }
.php2shell-page .field label { display: block; min-height: 34px; padding-top: 1.5px; font-size: 15px; font-weight: 500; line-height: 30px; color: var(--text); }
.php2shell-page .field label small { margin-left: 4px; font-size: 13px; line-height: 25px; color: rgba(0,0,0,.38); }
.php2shell-page .field input, .php2shell-page .field select, .php2shell-page .field textarea { display: block; width: 100%; margin: 0; font: inherit; font-size: 15px; color: rgba(0,0,0,.7); background: #fff; border: 1px solid var(--border); border-radius: 4px; outline: none; transition: border-color .15s; box-shadow: none; }
.php2shell-page .field input, .php2shell-page .field select { height: 56px; padding: 7px 37px 3px 16px; }
.php2shell-page .field input::placeholder { color: rgba(0,0,0,.7); opacity: 1; }
.php2shell-page .field select { appearance: none; -webkit-appearance: none; padding-top: 0; padding-bottom: 0; font-size: 16px; color: #000; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23757575'/%3E%3C/svg%3E") no-repeat right 18px center; }
.php2shell-page .field textarea { height: 96px; min-height: 96px; padding: 11px 15px; line-height: 24px; resize: vertical; }
.php2shell-page .field textarea::placeholder { color: rgba(0,0,0,.38); opacity: 1; }
.php2shell-page .field input:focus, .php2shell-page .field select:focus, .php2shell-page .field textarea:focus { border-color: var(--blue); outline: 2px solid rgba(52,91,217,.2); }
.php2shell-page .field [aria-invalid="true"] { border-color: #b42318; }
.php2shell-page .field__error:empty { display: none; }
.php2shell-page .field__error { margin-top: 6px; color: #b42318; font-size: 13px; line-height: 1.6; }
.php2shell-page .form hr { height: 1px; margin: 40px 0 0; border: 0; background: #eee; }
.php2shell-page .field.field--detail { padding-top: 32px; }
.php2shell-page .form__errors { margin-bottom: 24px; padding: 16px; border: 1px solid #f0b4af; border-radius: 4px; background: #fff5f5; color: #b42318; font-size: 14px; line-height: 1.7; }
.php2shell-page .form__errors ul { margin: 8px 0 0; padding-left: 20px; }
.php2shell-page .captcha_container:not(:empty) { margin-top: 28px; }
.php2shell-page .form__actions { padding-top: 44px; }
.php2shell-page .form__submit { display: block; width: 123px; height: 48px; padding: 0; border: 0; border-radius: 3px; background: var(--blue); color: #fff; font: inherit; font-size: 15px; font-weight: 500; line-height: 24px; cursor: pointer; }
.php2shell-page .form__submit[disabled] { opacity: .6; cursor: wait; }
.php2shell-page .form__policy { display: inline-block; margin-top: 24px; font-size: 14px; line-height: 24px; color: var(--blue); text-decoration: underline; }

/* Completion page */
.php2shell-page .completion { padding-top: 80px; padding-bottom: 40px; text-align: center; }
.php2shell-page .completion p { margin-top: 24px; line-height: 1.8; }
.php2shell-page .completion a { display: inline-block; margin: 32px 12px 0; color: var(--blue); text-decoration: underline; }

/* Below the header's 1200px breakpoint the container drops to 940px. */
@media (max-width: 1199px) {
  .php2shell-page .cards { grid-template-columns: repeat(2,1fr); }
  /* Too narrow to sit beside the illustration without breaking every sentence: stack and center this section,
     the illustration keeping its design width so side gaps stay symmetric. Balance any sentence that still wraps. */
  .php2shell-page .about { flex-direction: column; align-items: center; gap: 32px; text-align: center; }
  .php2shell-page .about__text { flex: none; width: 100%; max-width: none; }
  .php2shell-page .about__body p { text-wrap: balance; }
  .php2shell-page .browser { flex: none; width: 100%; }
  .php2shell-page .banner { grid-template-columns: 1fr; row-gap: 24px; }
}
@media (max-width: 900px) {
  .php2shell-page .hero { height: auto; padding: 100px 0 80px; }
  .php2shell-page .hero__title { font-size: 34px; line-height: 48px; }
  .php2shell-page .hero__pattern { display: none; }
  .php2shell-page .banner { padding: 40px 28px; border-radius: 28px; }
  .php2shell-page .banner h2 { white-space: normal; }
}
@media (max-width: 560px) {
  .php2shell-page .about-wrap { padding-top: 56px; }
  /* Every sentence wraps on phones; a small gap keeps them reading as separate paragraphs. */
  .php2shell-page .about__body { margin-top: 16px; line-height: 26px; }
  .php2shell-page .about__body p + p { margin-top: 6px; }
  .php2shell-page .hero { padding: 72px 0 64px; }
  .php2shell-page .hero__title { font-size: 28px; line-height: 40px; }
  .php2shell-page .hero__desc { font-size: 16px; }
  .php2shell-page .cards { grid-template-columns: 1fr; }
  .php2shell-page .card { min-height: 0; }
  .php2shell-page .section__title { font-size: 27px; }
  .php2shell-page .banner h2 { font-size: 30px; line-height: 38px; }
  .php2shell-page .banner__body { font-size: 16px; line-height: 26px; }
  .php2shell-page .form { padding: 28px 20px; }
  .php2shell-page .captcha_container { max-width: 100%; overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .php2shell-page .hero__cta { transition: none; }
}