/* ============================================================
   문의하기 / 블로그 개설 신청 (Controls/Introduction, pageid 59 ?webpagetype=QU) in the new design.
   Laid over CSS/Introduction.css, which stays for the old look: everything here is under
   body:has(.v2-header). The markup is the old one - a title link, the notice box, rows of
   label + field + example - drawn as a card with tidy fields and the site's purple button.
   ============================================================ */
body:has(.v2-header) .IntroPage { max-width: 880px; margin: 28px auto 56px; padding: 0 16px; font-family: var(--v2-font); color: var(--v2-text); }

/* the title (it was a small blue link) */
body:has(.v2-header) .IntroPage .CategoryPathContainer { margin: 0 0 14px; padding: 0; border: 0; background: none; }
body:has(.v2-header) .IntroPage .CategoryGroupPath a { display: inline; padding: 0; border: 0; background: none !important; font-size: 26px; font-weight: 900; line-height: 1.3;
    letter-spacing: -.4px; color: var(--v2-navy) !important; text-decoration: none; pointer-events: none; }
body:has(.v2-header) .IntroPage .CategoryGroupPath a span { font: inherit; color: inherit; }

/* the notice: what to write, or why the form is not offered */
body:has(.v2-header) .IntroPage .apply-notice { margin: 0 0 18px; padding: 18px 20px; border: 1px solid #e3d9fc; border-radius: 14px; background: #f7f3ff; font-size: 14.5px; line-height: 1.7; color: #3d4354; }
body:has(.v2-header) .IntroPage .apply-notice strong + br { display: none; }
body:has(.v2-header) .IntroPage .apply-notice strong { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 800; color: var(--v2-navy); }
body:has(.v2-header) .IntroPage .apply-notice a.DefaultButton { margin-top: 6px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--v2-primary); color: #fff; font-weight: 800; }

/* the form: one card, a row per field */
body:has(.v2-header) .IntroForm { margin-top: 0; padding: 8px 28px 6px; border: 1px solid var(--v2-line); border-radius: 16px; background: #fff; }
body:has(.v2-header) .IntroForm .clear.solid { display: none; }
body:has(.v2-header) .IntroForm .clear.dotted { height: 0; border: 0; border-top: 1px solid #eef0f4; }
body:has(.v2-header) .IntroForm .row { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: center; margin: 0; padding: 16px 0; }
body:has(.v2-header) .IntroForm .row::before, body:has(.v2-header) .IntroForm .row::after { display: none; }
body:has(.v2-header) .IntroForm .subject { grid-column: 1; float: none; width: auto; padding: 0; font-size: 14.5px; font-weight: 700; color: var(--v2-text); }
body:has(.v2-header) .IntroForm .subject span { font-size: 14.5px; color: var(--v2-pink) !important; }
body:has(.v2-header) .IntroForm .subject span.optional { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--v2-muted) !important; }
body:has(.v2-header) .IntroForm .content { grid-column: 2; float: none; padding: 0; min-width: 0; }
body:has(.v2-header) .IntroForm .content:not(:has(*)) { display: none; }
body:has(.v2-header) .IntroForm .content > span { font-size: 12.5px; color: var(--v2-muted); }
body:has(.v2-header) .IntroForm input[type=text], body:has(.v2-header) .IntroForm input[type=email], body:has(.v2-header) .IntroForm input[type=tel] {
    width: 100%; max-width: 420px; height: 44px; padding: 0 14px; border: 1px solid #d5dbe5; border-radius: 10px; background: #fff; font: inherit; font-size: 15px; }
body:has(.v2-header) .IntroForm textarea { width: 100%; max-width: none; height: 220px; min-height: 140px; padding: 12px 14px; border: 1px solid #d5dbe5; border-radius: 12px; font: inherit; font-size: 15px; line-height: 1.6; resize: vertical; }
body:has(.v2-header) .IntroForm input:focus, body:has(.v2-header) .IntroForm textarea:focus { outline: 0; border-color: var(--v2-primary); box-shadow: 0 0 0 3px rgba(107, 63, 224, .15); }
/* the long text: its label sits at the top, beside the box */
body:has(.v2-header) .IntroForm .row:has(textarea) { align-items: start; }
body:has(.v2-header) .IntroForm .row:has(textarea) .subject { padding-top: 10px; }
/* the code: the picture and the box side by side */
body:has(.v2-header) .IntroForm .row:has(.textbox80) { grid-template-columns: 170px auto 1fr; }
body:has(.v2-header) .IntroForm .row:has(.textbox80) .content { grid-column: auto; }
body:has(.v2-header) .IntroForm .row:has(.textbox80) img { display: block; height: 44px; border-radius: 8px; }
body:has(.v2-header) .IntroForm .row:has(.textbox80) br { display: none; }
body:has(.v2-header) .IntroForm .textbox80 { width: 140px !important; max-width: 140px; }
body:has(.v2-header) .IntroForm .ErrorMsg, body:has(.v2-header) .IntroForm .row > span[style*="red"] { grid-column: 1 / -1; float: none; padding: 0; color: #dc2626; font-size: 13.5px; }
/* the button */
body:has(.v2-header) .IntroForm .DefaultButton { min-width: 180px; padding: 13px 40px; border: 0 !important; border-radius: 999px !important; background: var(--v2-primary) !important;
    color: #fff !important; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(107, 63, 224, .22); }
body:has(.v2-header) .IntroForm .DefaultButton:hover { background: #5a30c8 !important; }
body:has(.v2-header) .IntroForm > div[style*="text-align:center"] { margin: 18px 0 24px !important; }

@media (max-width: 760px) {
    body:has(.v2-header) .IntroPage { margin: 16px auto 36px; padding: 0 12px; }
    body:has(.v2-header) .IntroPage .CategoryGroupPath a { font-size: 21px; }
    body:has(.v2-header) .IntroForm { padding: 4px 16px 4px; }
    body:has(.v2-header) .IntroForm .row, body:has(.v2-header) .IntroForm .row:has(.textbox80) { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
    body:has(.v2-header) .IntroForm .content, body:has(.v2-header) .IntroForm .row:has(.textbox80) .content { grid-column: 1; }
    body:has(.v2-header) .IntroForm .row:has(.textbox80) { grid-template-columns: auto 1fr; }
    body:has(.v2-header) .IntroForm .row:has(.textbox80) .subject { grid-column: 1 / -1; }
    body:has(.v2-header) .IntroForm input[type=text], body:has(.v2-header) .IntroForm input[type=email], body:has(.v2-header) .IntroForm input[type=tel] { max-width: none; font-size: 16px; }
    body:has(.v2-header) .IntroForm .DefaultButton { width: 100%; }
}