@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#2c3e50;background-color:#f0f4f8;font-family:Noto Sans KR,system-ui,sans-serif;line-height:1.6}a{color:#3498db;text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit}input,select{font-family:inherit}.login-page{background:#fff;flex-direction:column;max-width:480px;min-height:100vh;margin:0 auto;display:flex;overflow:hidden}.login-collage{grid-template-columns:repeat(3,1fr);gap:6px;height:340px;padding:6px;display:grid;position:relative;overflow:hidden}.collage-col{flex-direction:column;gap:6px;display:flex}.collage-col-0{margin-top:0}.collage-col-1{margin-top:-40px}.collage-col-2{margin-top:-20px}.collage-img{aspect-ratio:2/3;object-fit:cover;border-radius:14px;width:100%;display:block}.collage-gradient{pointer-events:none;background:linear-gradient(#0000 0%,#fff 100%);height:160px;position:absolute;bottom:0;left:0;right:0}.login-content{flex-direction:column;align-items:center;padding:0 24px 40px;display:flex}.pinword-logo-wrap{margin-bottom:16px}.pinword-logo-circle{color:#fff;background:#e60023;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:28px;font-style:italic;font-weight:900;display:flex;box-shadow:0 4px 12px #e600234d}.login-tagline{color:#111;text-align:center;letter-spacing:-.5px;margin-bottom:28px;font-size:26px;font-weight:800;line-height:1.3}.login-form{flex-direction:column;gap:12px;width:100%;margin-bottom:8px;display:flex}.login-form input{box-sizing:border-box;background:#f8f8f8;border:2px solid #efefef;border-radius:16px;outline:none;width:100%;padding:16px 18px;font-size:16px;transition:border-color .2s,background .2s}.login-form input:focus{background:#fff;border-color:#e60023}.login-btn{color:#fff;cursor:pointer;background:#e60023;border:none;border-radius:32px;width:100%;padding:16px;font-size:16px;font-weight:700;transition:background .2s}.login-btn:hover{background:#ad081b}.login-btn-outline{color:#111;cursor:pointer;background:#fff;border:2px solid #efefef;border-radius:32px;width:100%;padding:16px;font-size:16px;font-weight:700;transition:background .2s}.login-btn-outline:hover{background:#f8f8f8}.login-divider{color:#767676;align-items:center;gap:12px;width:100%;margin:12px 0;font-size:14px;display:flex}.login-divider:before,.login-divider:after{content:"";background:#efefef;flex:1;height:1px}.login-footer{color:#767676;text-align:center;margin-top:24px;font-size:14px}.login-footer a{color:#767676;text-decoration:none}.login-footer a strong{color:#111;text-decoration:underline}.signup-page{background:#fff;flex-direction:column;max-width:480px;min-height:100vh;margin:0 auto;display:flex;overflow:hidden}.learning-page{background:#fff;min-height:100vh;padding-bottom:40px}.word-list-grid{columns:3;column-gap:12px;max-width:1200px;margin:0 auto;padding:0 16px}@media (width<=900px){.word-list-grid{columns:2}}@media (width<=480px){.word-list-grid{columns:2;column-gap:8px;padding:0 8px}}.word-card{break-inside:avoid;background:#fff;border-left:4px solid #e60023;border-radius:18px;margin-bottom:12px;transition:box-shadow .2s,transform .2s;overflow:hidden;box-shadow:0 2px 10px #00000014}.word-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #e6002326}.word-card-body{flex-direction:column;gap:5px;padding:14px 14px 16px;display:flex}.word-english{color:#111;letter-spacing:-.3px;font-size:18px;font-weight:800}.word-pos{color:#fff;background:#e60023;border-radius:20px;width:fit-content;padding:3px 10px;font-size:11px;font-weight:700}.word-meaning{color:#444;margin:0;font-size:14px;line-height:1.5}.image-learning-page{background:#fff;min-height:100vh;padding-bottom:40px}.il-header{border-bottom:2px solid #e60023;justify-content:center;align-items:center;gap:10px;margin-bottom:4px;padding:22px 0 12px;display:flex}.pinword-logo-circle{color:#fff;background:#e60023;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:22px;font-style:italic;font-weight:900;display:flex;box-shadow:0 2px 10px #e6002373}.il-subtitle{text-align:center;color:#767676;margin:14px 0 2px;font-size:15px}.il-count{text-align:center;color:#e60023;margin:0 0 16px;font-size:13px;font-weight:700}.masonry-grid{columns:3;column-gap:12px;max-width:1200px;margin:0 auto;padding:0 12px}@media (width<=900px){.masonry-grid{columns:2}}@media (width<=480px){.masonry-grid{columns:2;column-gap:8px;padding:0 8px}}.masonry-item{break-inside:avoid;cursor:pointer;perspective:900px;background:#f5f5f5;border-radius:18px;margin-bottom:12px;transition:box-shadow .2s,transform .2s;overflow:hidden;box-shadow:0 2px 10px #0000001a}.masonry-item:hover{transform:translateY(-3px);box-shadow:0 8px 28px #e6002338}.flip-card-inner{width:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.45,.05,.55,.95);position:relative}.flip-card-inner.flipped{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{backface-visibility:hidden;border-radius:18px;overflow:hidden}.flip-card-front{width:100%}.masonry-image{border-radius:18px;width:100%;height:auto;display:block}.flip-card-back{background:linear-gradient(145deg,#e60023 0%,#c0001d 100%);justify-content:center;align-items:center;width:100%;height:100%;min-height:120px;display:flex;position:absolute;top:0;left:0;transform:rotateY(180deg)}.back-content{text-align:center;flex-direction:column;align-items:center;gap:8px;width:100%;padding:24px 16px;display:flex}.back-pos{color:#e60023;letter-spacing:.5px;text-transform:uppercase;background:#fff;border-radius:20px;padding:3px 12px;font-size:11px;font-weight:700;display:inline-block;box-shadow:0 1px 6px #00000026}.back-english{color:#fff;letter-spacing:-.5px;text-shadow:0 2px 8px #0003;word-break:break-word;margin:0;font-size:26px;font-weight:900;line-height:1.15}.back-meaning{color:#ffffffeb;text-shadow:0 1px 4px #00000026;word-break:keep-all;margin:0;font-size:15px;line-height:1.45}.quiz-loading{text-align:center;color:#767676;margin-top:80px;font-size:18px}.quiz-result{text-align:center;background:#fff;border-top:4px solid #e60023;border-radius:24px;max-width:420px;margin:60px auto;padding:48px 32px;box-shadow:0 4px 24px #e600231f}.quiz-result h2{color:#111;margin-bottom:16px;font-size:26px;font-weight:800}.quiz-result-score{color:#e60023;margin:20px 0;font-size:34px;font-weight:900}.quiz-retry-btn{color:#fff;cursor:pointer;background:#e60023;border:none;border-radius:999px;padding:14px 36px;font-size:16px;font-weight:700;transition:opacity .2s,transform .1s;box-shadow:0 4px 14px #e600234d}.quiz-retry-btn:hover{opacity:.88;transform:translateY(-1px)}.quiz-page{text-align:center;max-width:480px;margin:0 auto;padding:24px 16px 40px}.quiz-progress{color:#767676;letter-spacing:.3px;margin-bottom:8px;font-size:13px;font-weight:600}.quiz-progress-bar-wrap{background:#f0f0f0;border-radius:99px;width:100%;height:6px;margin-bottom:32px;overflow:hidden}.quiz-progress-bar{background:linear-gradient(90deg,#e60023,#ff6b6b);border-radius:99px;height:100%;transition:width .4s}.quiz-word{color:#111;letter-spacing:-1px;margin-bottom:8px;font-size:52px;font-weight:900;line-height:1.1}.quiz-question-label{color:#767676;margin-bottom:28px;font-size:15px}.quiz-options{flex-direction:column;gap:12px;margin-bottom:24px;display:flex}.quiz-option-btn{color:#111;text-align:left;cursor:pointer;background:#fff;border:2px solid #efefef;border-radius:16px;width:100%;padding:16px 20px;font-size:16px;font-weight:600;transition:border-color .15s,background .15s,transform .1s;box-shadow:0 1px 6px #0000000d}.quiz-option-btn:hover:not(:disabled){background:#fff5f5;border-color:#e60023;transform:translate(3px)}.quiz-option-btn.correct{color:#fff;background:#e60023;border-color:#e60023;box-shadow:0 4px 14px #e600234d}.quiz-option-btn.wrong{color:#e60023;background:#fff0f0;border-color:#e60023;text-decoration:line-through}.quiz-option-btn.dimmed{opacity:.35}.quiz-next-btn{color:#fff;cursor:pointer;letter-spacing:-.2px;background:#e60023;border:none;border-radius:999px;width:100%;padding:16px;font-size:16px;font-weight:800;transition:opacity .2s,transform .1s;box-shadow:0 4px 16px #e600234d}.quiz-next-btn:hover{opacity:.9;transform:translateY(-1px)}.mypage{max-width:640px;margin:0 auto;padding:0 16px 48px}.mypage-header{border-bottom:2px solid #e60023;justify-content:space-between;align-items:center;margin-bottom:24px;padding:22px 0 14px;display:flex}.mypage-header h2{color:#111;letter-spacing:-.3px;font-size:22px;font-weight:800}.logout-btn{color:#fff;cursor:pointer;background:#e60023;border:none;border-radius:999px;padding:9px 20px;font-size:13px;font-weight:700;transition:opacity .2s,transform .1s;box-shadow:0 2px 10px #e600234d}.logout-btn:hover{opacity:.88;transform:translateY(-1px)}.mypage-greeting{color:#555;margin-bottom:28px;font-size:15px}.mypage-greeting strong{color:#e60023;font-weight:800}.mypage-loading{text-align:center;color:#767676;padding:60px;font-size:16px}.stat-cards{gap:16px;margin-bottom:20px;display:flex}.stat-card{text-align:center;background:#fff;border-top:3px solid #e60023;border-radius:20px;flex:1;padding:24px 16px;box-shadow:0 2px 14px #00000012}.stat-card h3{color:#767676;margin-bottom:12px;font-size:13px;font-weight:600}.stat-value{color:#111;letter-spacing:-1px;font-size:38px;font-weight:900}.stat-value.green{color:#e60023}.stat-unit{color:#aaa;margin-left:4px;font-size:14px;font-weight:500}.chart-card{background:#fff;border-top:3px solid #e60023;border-radius:20px;padding:24px;box-shadow:0 2px 14px #00000012}.chart-card h3{color:#111;letter-spacing:-.2px;margin-bottom:20px;font-size:15px;font-weight:800}.chart-empty{text-align:center;color:#aaa;padding:40px;font-size:14px}.pinword-header{border-bottom:1px solid #efefef;justify-content:center;align-items:center;gap:10px;margin-bottom:20px;padding:22px 0 18px;display:flex}.pinword-logo-icon{color:#fff;letter-spacing:-1px;background:#e60023;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:22px;font-style:italic;font-weight:900;display:flex;box-shadow:0 2px 8px #e6002359}.pinword-logo-text{color:#111;letter-spacing:-.5px;font-size:24px;font-weight:800}.admin-words-title{display:none}.add-word-section{background:#fff;border:none;margin-bottom:4px;padding:0 16px 24px}.add-word-section h3{color:#111;margin-bottom:16px;font-size:18px;font-weight:700}.add-word-form{flex-direction:column;gap:12px;display:flex}.add-word-form input,.add-word-form select{box-sizing:border-box;flex:unset;width:100%;min-width:unset;background:#f8f8f8;border:2px solid #efefef;border-radius:16px;outline:none;padding:14px 16px;font-size:15px;transition:border-color .2s,background .2s}.add-word-form input:focus,.add-word-form select:focus{background:#fff;border-color:#e60023}.image-upload-wrapper{flex-direction:column;gap:10px;display:flex}.image-upload-wrapper input[type=file]{color:#767676;cursor:pointer;box-sizing:border-box;background:#fafafa;border:2px dashed #ddd;border-radius:16px;width:100%;padding:12px 14px;font-size:13px}.generate-image-btn{color:#fff;cursor:pointer;letter-spacing:.2px;background:#e60023;border:none;border-radius:24px;width:100%;padding:14px;font-size:15px;font-weight:700;transition:background .2s}.generate-image-btn:hover{background:#ad081b}.generate-image-btn:disabled{cursor:not-allowed;background:#ccc}.add-word-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#111;border:none;border-radius:24px;width:100%;padding:14px;font-size:15px;font-weight:700;transition:background .2s}.add-word-btn:hover{background:#333}.word-list{columns:2;column-gap:10px;padding:0 12px 24px}.word-item{break-inside:avoid;background:#fff;border:none;border-radius:16px;margin-bottom:10px;padding:0;overflow:hidden;box-shadow:0 2px 8px #00000014}.word-card-image{aspect-ratio:3/4;object-fit:cover;background:#f0f0f0;width:100%;display:block}.word-card-no-image{aspect-ratio:3/4;color:#ccc;background:linear-gradient(135deg,#f8f8f8,#efefef);justify-content:center;align-items:center;width:100%;font-size:28px;display:flex}.word-item-view{flex-direction:column;display:flex}.word-item-info{flex-direction:column;gap:2px;padding:8px 10px 4px;display:flex}.word-item-info strong{color:#111;font-size:14px;font-weight:700}.word-item-info span{color:#767676;font-size:12px}.word-item-actions{gap:6px;padding:6px 10px 10px;display:flex}.edit-btn{color:#111;cursor:pointer;background:#f0f0f0;border:none;border-radius:20px;flex:1;padding:7px 0;font-size:12px;font-weight:700;transition:background .2s}.edit-btn:hover{background:#e0e0e0}.delete-btn{color:#e60023;cursor:pointer;background:#fff0f1;border:none;border-radius:20px;flex:1;padding:7px 0;font-size:12px;font-weight:700;transition:background .2s}.delete-btn:hover{background:#ffd6d9}.word-item-edit{gap:8px;align-items:unset;flex-direction:column;flex-wrap:unset;padding:12px;display:flex}.word-item-edit input,.word-item-edit select{flex:unset;min-width:unset;background:#f8f8f8;border:2px solid #efefef;border-radius:12px;outline:none;padding:10px 14px;font-size:14px;transition:border-color .2s}.word-item-edit input:focus,.word-item-edit select:focus{background:#fff;border-color:#e60023}.save-btn{color:#fff;cursor:pointer;background:#e60023;border:none;border-radius:20px;padding:10px;font-size:13px;font-weight:700;transition:background .2s}.save-btn:hover{background:#ad081b}.cancel-btn{color:#111;cursor:pointer;background:#f0f0f0;border:none;border-radius:20px;padding:10px;font-size:13px;font-weight:700;transition:background .2s}.cancel-btn:hover{background:#e0e0e0}.admin-mypage{max-width:480px;margin:0 auto;padding:0 16px 48px}.admin-mypage-title{color:#e60023;letter-spacing:-.5px;border-bottom:2px solid #e60023;margin-bottom:28px;padding-bottom:14px;font-size:24px;font-weight:900}.admin-info-card{background:#fff;border:none;border-left:4px solid #e60023;border-radius:20px;margin-bottom:24px;padding:28px 24px;box-shadow:0 2px 14px #e600231a}.admin-email{color:#111;margin-bottom:10px;font-size:16px;font-weight:600}.admin-email strong{color:#e60023;font-weight:800}.admin-status{color:#e60023;margin-bottom:14px;font-size:14px;font-weight:700}.admin-notice{color:#aaa;border-top:1px solid #f0f0f0;margin-top:4px;padding-top:12px;font-size:13px;line-height:1.5}.admin-logout-btn{color:#fff;cursor:pointer;letter-spacing:-.2px;background:#e60023;border:none;border-radius:999px;width:100%;padding:15px;font-size:16px;font-weight:800;transition:opacity .2s,transform .1s;box-shadow:0 4px 16px #e6002359}.admin-logout-btn:hover{opacity:.88;transform:translateY(-1px)}*{box-sizing:border-box}.layout-root{background:#fff;min-height:100vh}.user-nav,.admin-nav{z-index:100;background:#fff;border-bottom:2px solid #e60023;align-items:center;gap:0;height:60px;padding:0 24px;display:flex;position:sticky;top:0;box-shadow:0 2px 12px #e6002314}.nav-logo{flex-shrink:0;align-items:center;gap:8px;margin-right:28px;text-decoration:none;display:flex}.nav-logo-circle{color:#fff;background:#e60023;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:19px;font-style:italic;font-weight:900;display:flex;box-shadow:0 2px 8px #e6002366}.nav-logo-text{color:#111;letter-spacing:-.5px;font-size:20px;font-weight:800}.nav-admin-badge{color:#fff;letter-spacing:.8px;background:#e60023;border-radius:999px;margin-left:2px;padding:2px 8px;font-size:10px;font-weight:800}.nav-links{flex:1;align-items:center;gap:4px;display:flex}.nav-link{color:#555;white-space:nowrap;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;text-decoration:none;transition:background .18s,color .18s;display:inline-block}.nav-link:hover{color:#e60023;background:#fff0f0;text-decoration:none}.nav-link.active{background:#e60023;box-shadow:0 2px 10px #e600234d;color:#fff!important}.nav-link.active:hover{color:#fff;background:#c0001d}.layout-content{max-width:1200px;margin:0 auto;padding:28px 20px 48px}@media (width<=640px){.user-nav,.admin-nav{flex-wrap:wrap;gap:6px;height:auto;padding:10px 12px}.nav-logo{width:100%;margin-right:0}.nav-links{flex-wrap:wrap;gap:4px}.nav-link{padding:6px 12px;font-size:13px}.layout-content{padding:16px 12px 40px}}