#loginForm { fieldset { position: relative; border: 1px solid var(--border-strong); border-radius: 3px; padding: 20px 26px; align-content: center; min-width: 0; > legend { position: absolute; top: -0.625rem; left: 1.25rem; padding: 0 5px; background: var(--bg-page); font-size: 1rem; font-weight: bold; } // 로그인 창 > form { input, button { width: 100%; } label { cursor: pointer; margin-bottom: 7px; &:last-child { margin-bottom: 0; } } input[type="email"], input[type="password"] { &:nth-of-type(1) { margin-bottom: 15px; } &:nth-of-type(2) { letter-spacing: 1px; margin-bottom: 10px; } } } // 우측 안내문구 dl { dt { font-weight: bold; padding-bottom: 8px; } dd { font-size: 0.938rem; a { display: block; padding: 0.438rem 0; color: var(--text-link); text-decoration: none; &:hover { text-decoration: underline; color: var(--text-link-hover); } small { vertical-align: text-top; } } } &:last-child { dd > a { padding-bottom: 0; } } } hr { margin: 0.938rem 0; } } } // 소셜 로그인 버튼 (네이버 #03C75A / 카카오 #FEE500 — 각사 브랜드 컬러 가이드) .social-login { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; &__button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; border-radius: 4px; font-size: 0.938rem; font-weight: 600; text-decoration: none; transition: filter 0.15s ease; &:hover { filter: brightness(0.96); } &--naver { background: #03c75a; color: #fff; } &--kakao { background: #fee500; color: rgba(0, 0, 0, 0.85); // 카카오 가이드: 검정 85% } } &__icon { &--naver { font-weight: 800; font-size: 1.063rem; line-height: 1; } &--kakao { width: 18px; height: 18px; } } } @media (max-width: 420px) { #loginForm { fieldset { padding: 1rem 0 0 0; border: none; > legend { position: initial; padding: initial; font-size: 1rem; font-weight: bold; } > form { padding: 0; } > hr { display: block; } } } } @media (max-width: 768px) { #loginForm { fieldset { width: 100%; > form { padding: 1rem 0 0 0; } } } }