.mypage-main { width: min(100% - 40px, 1120px); margin: 0 auto; padding: 42px 0 70px; }.profile-summary { display: grid; grid-template-columns: 1.8fr .8fr .8fr 1.1fr; gap: 16px; align-items: center; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }.profile-edit-link { display: flex; align-items: center; gap: 15px; color: var(--ink); text-decoration: none; }.profile-edit-link:hover h1 { color: var(--blue); }.profile-image { width: 70px; height: 70px; flex: 0 0 70px; object-fit: cover; border-radius: 50%; background: var(--blue-soft); }.profile-edit-link h1 { margin: 0 0 5px; font-size: 24px; }.profile-edit-link p:not(.eyebrow) { margin: 0; color: var(--blue); font-size: 13px; font-weight: 700; }.profile-total, .profile-rank { padding-left: 16px; border-left: 1px solid var(--line); }.profile-total span, .profile-rank span { display: block; color: var(--muted); font-size: 11px; }.profile-total strong, .profile-rank strong { display: block; margin-top: 6px; font-size: 19px; }.profile-rank strong { color: var(--blue); }.badges { display: flex; gap: 7px; }.badge { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; font-size: 9px; text-align: center; }.badge.is-empty { color: var(--muted); background: var(--bg); border: 1px dashed var(--line); }.time-section { margin-top: 37px; }.time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.time-grid article { padding: 19px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }.time-grid span, .time-grid small { display: block; color: var(--muted); font-size: 12px; }.time-grid strong { display: block; margin: 8px 0 5px; font-size: 24px; }.subject-time-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }.subject-time-table { width: 100%; min-width: 720px; border-collapse: collapse; }.subject-time-table th, .subject-time-table td { padding: 14px 17px; text-align: right; border-bottom: 1px solid var(--line); font-size: 14px; }.subject-time-table th { color: var(--muted); font-size: 12px; font-weight: 600; }.subject-time-table th:first-child, .subject-time-table td:first-child { text-align: left; }.subject-time-table tr:last-child td { border-bottom: 0; }.subject-time-table small { color: var(--muted); font-size: 10px; font-weight: 400; }.empty-ranking { padding: 20px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; }.back-link { display: inline-block; margin-bottom: 20px; color: var(--blue); font-size: 14px; font-weight: 700; text-decoration: none; }.edit-main { max-width: 720px; }.edit-card { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }.edit-card h1 { margin: 0 0 27px; font-size: 25px; }.image-editor { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }.upload-button, .link-button { display: inline-block; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); font-size: 13px; text-decoration: none; }.upload-button input { display: none; }.field-label { display: grid; gap: 7px; max-width: 420px; color: var(--muted); font-size: 13px; }.field-label input { height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font: inherit; }.form-note { margin: 18px 0; color: var(--muted); font-size: 13px; }.form-actions { display: flex; justify-content: flex-end; gap: 10px; }.form-actions .primary-button { width: auto; }
@media (max-width: 850px) { .profile-summary { grid-template-columns: 1fr 1fr; }.badges { grid-column: 1 / -1; }.profile-total { border-left: 0; } }
@media (max-width: 600px) { .mypage-main { width: min(100% - 30px, 1120px); padding: 28px 0 90px; }.profile-summary { grid-template-columns: 1fr 1fr; padding: 18px; }.profile-edit-link { grid-column: 1 / -1; }.profile-total, .profile-rank { padding-left: 0; border-left: 0; }.time-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }.time-grid article { padding: 15px; }.edit-card { padding: 20px; }.form-actions { align-items: stretch; flex-direction: column-reverse; }.form-actions .primary-button { width: 100%; } }