/* 로그인 전용의 크림색 종이·파스텔·둥근 테두리이며 공통 회원가입·본문 스타일은 바꾸지 않습니다. */
.chiikawa-login { color: #64534d; background-color: #fffaf2; background-image: radial-gradient(#e9ddce 1px, transparent 1px); background-size: 19px 19px; }
.chiikawa-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.chiikawa-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; max-width: 1160px; margin: 0 auto; padding: 25px 30px 18px; }
.chiikawa-brand { display: inline-flex; align-items: center; gap: 12px; color: #64534d; }
.chiikawa-brand:hover { color: #64534d; }
.chiikawa-brand-mark { display: grid; place-items: center; position: relative; width: 43px; height: 43px; border: 1.5px solid #8aa8b2; border-radius: 16px 16px 19px 19px; background: #e1eff6; font-size: 23px; font-weight: 700; letter-spacing: -2px; }
.chiikawa-brand-mark > span { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #b89698; border-radius: 50%; background: #f8dfe3; color: #8f6d70; font-size: 12px; letter-spacing: 0; }
.chiikawa-brand > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.chiikawa-brand strong { font-size: 18px; letter-spacing: -.5px; }
.chiikawa-brand small { color: #a28e80; font-size: 8px; letter-spacing: 2.3px; }
.chiikawa-header-note { color: #a38e7c; font-size: 11px; }
.chiikawa-header-note > span { margin-left: 8px; color: #d9a9aa; font-size: 20px; vertical-align: middle; }

/* 삽화와 실제 로그인 카드를 나란히 두고 장식은 입력 영역을 가리지 않게 합니다. */
.chiikawa-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr); align-items: center; gap: 56px; flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 20px 30px 25px; }
.chiikawa-welcome { min-width: 0; text-align: center; }
.chiikawa-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 13px; border: 1px solid #eadac6; border-radius: 20px; color: #ae8b68; background: #fffcf6; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; }
.chiikawa-tag > span { color: #cdab6e; font-size: 16px; }
.chiikawa-welcome h2 { position: relative; z-index: 1; margin: 0 0 16px; color: #6a5951; font-size: clamp(29px, 3vw, 40px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.55; }
.chiikawa-welcome h2 > span { background: linear-gradient(transparent 65%, #f6dfb9 65%, #f6dfb9 89%, transparent 89%); }
.chiikawa-intro { margin: 0; color: #a28e80; font-size: 12px; line-height: 1.9; }
.chiikawa-art { position: relative; max-width: 455px; margin: 20px auto 5px; }
.chiikawa-art::before { content: ""; position: absolute; width: 84%; height: 65%; left: 8%; bottom: 8%; border-radius: 46% 54% 50% 50%; background: #f6ecdc; opacity: .6; }
/* 사용자가 고른 정사각형 그림의 비율을 유지하고 세 캐릭터가 모두 보이게 합니다. */
.chiikawa-art img { display: block; position: relative; width: 100%; height: 300px; object-fit: contain; }
.chiikawa-art-note { position: absolute; left: 14px; top: 5px; z-index: 1; padding: 7px 12px; border: 1px solid #dfc4bb; border-radius: 7px; background: #fff1ed; color: #a4796c; font-size: 11px; transform: rotate(-8deg); }
.chiikawa-spark { position: absolute; right: 8px; top: 19px; color: #d4b273; font-size: 37px; }
.chiikawa-caption { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 0; }
.chiikawa-caption > span { padding: 5px 10px; border: 1px solid #e6dccd; border-radius: 20px; color: #a08c7a; background: #fffdf8; font-size: 10px; }
.chiikawa-caption > span:nth-child(2) { background: #edf5f8; border-color: #d9e5e8; }
.chiikawa-caption > span:nth-child(3) { background: #fff0f1; border-color: #eedcdd; }
.chiikawa-card-wrap { position: relative; width: 100%; max-width: 415px; justify-self: center; padding-top: 16px; }
.chiikawa-stamp { display: block; position: absolute; z-index: 1; right: 23px; top: 1px; padding: 6px 13px; border: 1.5px solid #c3a799; border-radius: 7px; color: #9c7e6c; background: #fff2dd; font-size: 10px; transform: rotate(5deg); }
.chiikawa-stamp > span { color: #cf9b9f; margin-left: 5px; }
.chiikawa-card { padding: 34px 33px 29px; border: 1.5px solid #d9c9b9; border-radius: 23px; background: #fffefd; box-shadow: 5px 6px 0 #eadecc80; }
.chiikawa-card-note { margin: 18px 0 0; color: #ac9784; font-size: 10px; text-align: center; }
.chiikawa-card-note > span { margin-right: 4px; color: #d8b874; }

/* 기존 필드 이름·자동 완성·검증을 유지하면서 로그인에만 파스텔 입력과 버튼을 적용합니다. */
.chiikawa-login .workspace-kicker { color: #9ab0b8; font-size: 9px; letter-spacing: 1.7px; }
.chiikawa-login .account-page h1 { margin: 12px 0 11px; color: #6a5951; font-size: 28px; font-weight: 700; }
.chiikawa-login .account-description { margin-bottom: 26px; color: #a18e80; font-size: 12px; }
.chiikawa-login .form-label { color: #8c796c; font-size: 11px; }
.chiikawa-login .form-control { min-height: 46px; border-color: #e5d8ca; border-radius: 11px; color: #685a51; background: #fffcf8; font-size: 13px; }
.chiikawa-login .form-control::placeholder { color: #beafa1; font-size: 11px; }
.chiikawa-login .form-control:focus { border-color: #a8c8d6; background: #fff; box-shadow: 0 0 0 3px #dcecf580; }
.chiikawa-login .form-check { color: #a08d7e; font-size: 11px; }
.chiikawa-login .form-check-input { border-color: #d6c8b8; }
.chiikawa-login .form-check-input:checked { border-color: #97bacb; background-color: #97bacb; }
.chiikawa-login .form-check-input:focus { border-color: #a8c8d6; box-shadow: 0 0 0 3px #dcecf580; }
.chiikawa-login .account-page .account-submit { min-height: 46px; border: 1.5px solid #91b4c3; border-radius: 12px; color: #527281; background: #cbe5f2; box-shadow: 0 3px 0 #b1ccd7; font-size: 13px; }
.chiikawa-login .account-page .account-submit:hover, .chiikawa-login .account-page .account-submit:active { border-color: #88acbc; background: #badceD; color: #446775; }
.chiikawa-login .account-page .account-submit:focus-visible { box-shadow: 0 0 0 3px #c6e3f2; }
.chiikawa-login .account-links { margin-top: 24px; padding-top: 20px; border-top: 1px dashed #e7dacc; color: #ab9785; font-size: 11px; }
.chiikawa-login .account-links a { color: #8b9fae; }
.chiikawa-login .validation-summary-errors { border-color: #edccca; background: #fff2ef; }
.chiikawa-login :focus-visible { outline-color: #b99b91; }
.chiikawa-footer { display: flex; align-items: center; gap: 20px; max-width: 1100px; width: calc(100% - 60px); margin: 0 auto; padding: 20px 0 18px; border-top: 1px dashed #e9ddcc; color: #b39f8a; font-size: 9px; }
.chiikawa-footer a { color: #a79480; }
.chiikawa-footer-heart { margin-left: auto; color: #dab2af; font-size: 18px; }

/* 모바일은 캐릭터를 작은 환영 배너로 바꾸어 로그인 입력에 빠르게 도달하게 합니다. */
@media (max-width: 820px) {
    .chiikawa-header { max-width: 510px; padding: 22px 24px 17px; }
    .chiikawa-header-note { display: none; }
    .chiikawa-main { grid-template-columns: minmax(0, 1fr); gap: 19px; max-width: 490px; padding: 0 24px 20px; }
    .chiikawa-welcome { display: grid; grid-template-columns: minmax(0, 1fr) 125px; align-items: center; text-align: left; }
    .chiikawa-welcome h2 { margin: 8px 0; font-size: 22px; letter-spacing: -.8px; line-height: 1.6; }
    .chiikawa-tag, .chiikawa-intro, .chiikawa-caption { display: none; }
    .chiikawa-art { width: 125px; margin: 0; }
    .chiikawa-art img { height: 125px; }
    .chiikawa-art-note { display: none; }
    .chiikawa-spark { top: 0; right: 0; font-size: 21px; }
    .chiikawa-card-wrap { max-width: none; }
    .chiikawa-card { padding: 30px 27px 25px; border-radius: 20px; }
    .chiikawa-footer { max-width: 442px; width: calc(100% - 48px); padding: 14px 0 18px; }
}
@media (max-width: 360px) {
    .chiikawa-main { padding-left: 18px; padding-right: 18px; }
    .chiikawa-welcome { grid-template-columns: minmax(0, 1fr) 106px; }
    .chiikawa-welcome h2 { font-size: 20px; }
    .chiikawa-art { width: 106px; }
    .chiikawa-card { padding-left: 22px; padding-right: 22px; }
}