/* 혼자쓰자.com — a quiet writing desk, clear actions, and one shared identity. */
:root{--ink:#203e55;--muted:#617286;--line:#dce4ec;--paper:#fff;--purple:#315e81;--lavender:#edf2f8;--green:#e8f1ec;--orange:#a15b22;--shadow:0 8px 28px #203e5506;color:#243b50;background:#f5f7fa}
body{background:#f5f7fa;color:#243b50}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:#427caa}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#bfd5e5;border-color:#427caa}
.button.primary,.simple-shell .button.primary{background:#203e55;border-color:#203e55;color:#fff}
.button.primary:hover,.simple-shell .button.primary:hover{background:#2d536f;border-color:#2d536f}
.button.secondary,.simple-shell .button.secondary{background:#fff;border-color:#cedae5;color:#284c68}
.simple-shell,.school-choice-shell{background:#f5f7fa;color:#243b50}
.simple-header{padding-block:22px}
.simple-brand{gap:12px;color:#203e55;min-width:0}
.honja-mark{width:40px;height:40px;flex:none;color:#203e55}
.simple-brand .honja-wordmark,.honja-wordmark{font-size:27px;letter-spacing:-1.5px;line-height:1.2;white-space:nowrap;color:#203e55}
.simple-brand .honja-wordmark span,.honja-wordmark span{font-size:.6em;letter-spacing:-.5px;color:#9b5b2a;margin-left:2px}
.simple-brand img.brand-partner{width:84px;height:38px;margin-left:10px;padding-left:16px;box-sizing:content-box;border-left:1px solid #d5e0e8}
.simple-nav{border-bottom-color:#dce4ec;gap:8px}
.simple-nav>.button{border-radius:12px}
.simple-main .card,.task-tile{border-color:#dce4ec;box-shadow:0 3px 16px #203e5503}
.task-tile:not(:disabled):hover{border-color:#7493ad;box-shadow:0 6px 20px #203e550a}
.tile-number{background:#edf2f7;color:#315674}
.today-action,.next-action{background:#edf3f8;border-color:#d2dfeb}
.focused-editor,.review-detail{border-color:#d5e0e9}
.student-school-banner{border-color:#d7e2eb;background:#fff}
.signup-page>.simple-brand{margin:8px 0 24px}

/* Mobile reads vertically; desktop places the introduction beside the login. */
.login-landing{display:block;min-height:100dvh;background:#f3f5f8;color:#203e55}
.landing-main{display:flex;flex-direction:column;align-items:stretch;width:min(860px,100%);padding:28px 28px 32px;gap:0;margin:auto}
.landing-video-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.landing-video-heading h2{font-size:14px;font-weight:650;letter-spacing:0;color:#5e7286}
.landing-login-jump{display:flex;gap:10px;align-items:center;border:0;background:transparent;color:#284b66;font-size:14px;font-weight:650;padding:6px 0 6px 12px;min-height:44px}
.landing-video-frame{aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:20px;background:#18364d;box-shadow:0 8px 32px #18364d12}
.landing-video-frame :is(iframe,video){display:block;width:100%;height:100%;border:0;position:absolute;inset:0}
.landing-video-frame.is-portrait{aspect-ratio:auto;height:min(58svh,480px);min-height:280px;background:radial-gradient(ellipse at top,#31576b,#18364d)}
.landing-video-frame.is-portrait :is(iframe,video){position:static;aspect-ratio:9/16;height:100%;width:auto;max-width:100%;margin-inline:auto}
.landing-video-frame video{object-fit:contain;background:#101c26}
.landing-video-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:12px;color:#617286}
.landing-sound{min-height:40px;padding:8px 14px;border:1px solid #cfdae4;border-radius:9px;background:#fff;color:#203e55;font-size:13px;font-weight:650}
.landing-sound[aria-pressed="true"]{background:#203e55;color:#fff;border-color:#203e55}
.landing-video-pending{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:8%;position:relative;overflow:hidden;background:radial-gradient(ellipse at 100% 0,#335c70 0,transparent 70%),#18364d}
.landing-video-pending>p{position:relative;z-index:1;font-size:clamp(20px,3.5vw,34px);line-height:1.6;letter-spacing:-1.2px;color:#eaf1f6}
.landing-video-pending>p strong{font-weight:750;color:#f5c68d}
.intro-pending-label{position:relative;z-index:1;display:inline-block;padding:5px 12px;margin-top:22px;border:1px solid #ffffff30;border-radius:7px;background:#ffffff0d;color:#e1e9ef;font-size:12px}
.intro-notebook{position:absolute;right:7%;top:18%;width:30%;height:67%;padding:20% 12% 0 5%;transform:rotate(10deg);border:1px solid #ffffff28;border-radius:14px;background:#ffffff08;box-shadow:-18px 12px 0 #ffffff04}
.intro-notebook i{display:block;height:1px;background:#ffffff24;position:absolute;left:15%;right:15%;top:40%}
.intro-notebook i:nth-child(2){top:55%}.intro-notebook i:nth-child(3){top:70%;right:35%}
.intro-notebook span{position:absolute;top:18%;left:15%;font-size:clamp(10px,1.5vw,17px);color:#ffffff66}
.landing-brand-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:18px 0 30px;padding:28px 30px;border:1px solid #e9dfd1;border-radius:16px;background:#fbf5eb}
.landing-brand-title{display:flex;align-items:center;gap:14px;flex:none}
.landing-brand-title .honja-mark{width:48px;height:48px}
.landing-brand-title .honja-wordmark{font-size:37px;letter-spacing:-2px}
.landing-brand-copy{border-left:1px solid #e5d9c7;padding-left:24px}
.landing-brand-copy p{font-size:14px;font-weight:650;line-height:1.8}
.landing-brand-copy>span{display:block;font-size:12px;color:#786d5f;margin-top:5px}
.landing-brand-copy b{font-weight:400;color:#aa947c;margin:0 7px}
.landing-login-card{width:min(100%,510px);align-self:center;margin:0;padding:30px 34px 32px;background:#fff;border:1px solid #dfe6ed;border-radius:20px;box-shadow:0 10px 35px #203e5506;scroll-margin-top:24px}
.landing-login-heading{margin:0 0 24px}
.landing-section-label{font-size:12px;font-weight:650;color:#7a634a;letter-spacing:.03em}
.landing-login-heading h1{font-size:23px;letter-spacing:-.8px;margin-top:5px;color:#203e55}
.landing-login-card .login-mode{gap:4px;background:#eff3f7;padding:5px;border-radius:12px;margin-bottom:22px}
.landing-login-card .login-mode button{border:0;background:transparent;border-radius:8px;min-height:44px;font-size:14px;padding:9px 6px;color:#566b7e}
.landing-login-card .login-mode button[aria-pressed="true"]{background:#fff;color:#203e55;box-shadow:0 2px 6px #203e5510;font-weight:750}
.landing-form .field{margin:17px 0;gap:6px}
.landing-form input{border-color:#d6e0e9;background:#fafcfe;min-height:50px;border-radius:9px}
.landing-form label{font-size:13px;color:#40596d}
.landing-login-card .button.primary{background:#203e55;border-color:#203e55;border-radius:10px}
.landing-login-card .button.primary:hover{background:#2d536f;border-color:#2d536f}
.landing-login-card .signup-link{font-size:14px;margin-top:12px;min-height:48px;border-radius:10px;border-color:#d6e0e9}
.landing-partners{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:30px;min-height:50px}
.landing-partners img{object-fit:contain;max-width:28%;height:42px;width:auto}
.landing-partners img:first-child{height:48px}
@media(max-width:720px){
 .landing-main{width:100%;max-width:600px;padding:12px 18px 26px}
 .landing-video-frame{border-radius:15px}
 .landing-brand-banner{padding:23px 22px;gap:18px;margin:14px 0 24px;flex-direction:column;align-items:flex-start}
 .landing-brand-title{gap:12px}
 .landing-brand-title .honja-mark{width:42px;height:42px}
 .landing-brand-title .honja-wordmark{font-size:34px}
 .landing-brand-copy{border-left:0;padding-left:0}
 .landing-brand-copy>span{display:none}
 .landing-login-card{margin:0;padding:26px 24px;width:100%}
 .landing-login-heading h1{font-size:22px}
 .landing-partners{gap:22px;margin-top:24px}
 .intro-pending-label{font-size:11px;margin-top:14px;padding:3px 8px}
}
@media(max-width:640px){
 .simple-header{padding:16px 17px;gap:10px}
 .simple-brand{gap:8px}
 .simple-brand .honja-mark{width:31px;height:31px}
 .simple-brand .honja-wordmark{font-size:23px;letter-spacing:-1px}
 .simple-brand img.brand-partner{display:none}
 .simple-nav{gap:4px}
 .simple-nav>.button{border-radius:9px}
}
@media(max-width:370px){
 .landing-main{padding-inline:12px}
 .landing-login-card{padding:23px 18px}
 .landing-brand-banner{padding:20px}
 .landing-brand-title .honja-wordmark{font-size:31px}
 .landing-video-pending>p{font-size:19px}
 .simple-brand .honja-wordmark{font-size:20px}
 .account-menu summary{max-width:108px}
}
@media(min-width:901px){
 .landing-main{display:grid;width:min(1120px,100%);grid-template-columns:minmax(0,1fr) minmax(360px,440px);grid-template-areas:"trial trial" "video login" "banner login" "partners partners";column-gap:48px;row-gap:16px;padding:28px 40px;align-items:center}
 .landing-video{grid-area:video;min-width:0;width:min(100%,360px);justify-self:center}
 .landing-video-frame.is-portrait{height:min(56svh,500px);min-height:340px;width:auto;aspect-ratio:11/20;margin-inline:auto;background:#101c26;border-radius:16px}
 .landing-video-frame.is-portrait :is(video,iframe){width:100%;height:100%;aspect-ratio:auto}
 .landing-login-card{grid-area:login;width:100%;max-width:none;align-self:center;padding:32px}
 .landing-brand-banner{grid-area:banner;display:block;width:min(100%,440px);justify-self:center;margin:0;padding:22px 26px}
 .landing-brand-title .honja-mark{width:42px;height:42px}
 .landing-brand-title .honja-wordmark{font-size:34px}
 .landing-brand-copy{border:0;padding:0;margin-top:12px}
 .landing-brand-copy>span{display:none}
 .landing-partners{grid-area:partners;margin-top:8px}
}
@media print{body,.simple-shell{background:#fff}.simple-header{padding:0 0 12px}.simple-brand .honja-mark{width:25px;height:25px}.simple-brand .honja-wordmark{font-size:20px}.landing-video,.landing-partners{display:none}}
/* Selected-school beta: bounded cards, clear consent, readable mobile tables. */
.beta-panel,.beta-intro{margin:20px 0;border:1px solid #b9d0d8;background:#fff}
.beta-intro{background:#eff7f5}.beta-intro h1{font-size:clamp(1.25rem,3vw,1.8rem)}
.beta-progress{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0;font-weight:700}
.beta-progress span{padding:10px 15px;border-radius:10px;background:#f1f5f9}
.beta-complete,.beta-active{border-left:5px solid #228072;background:#f1faf7}
.beta-offer{font-size:16px;line-height:1.7}.beta-offer input[type=checkbox]{width:21px;height:21px;flex:none}
.beta-offer .check-row{align-items:flex-start;padding:13px 0}.beta-offer .check-row input{margin-top:5px}
.beta-dates{border:1px solid #c7d7e2;border-radius:12px;padding:14px;background:#f4f8fb}
.beta-dates div{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin:7px 0}.beta-dates dd{margin:0}
.beta-zero{display:grid;gap:6px;background:#eff7f1;padding:16px;border-radius:12px;margin:15px 0}
.beta-disclaimer{font-size:14px;border-top:1px solid #d8e1e8;padding-top:16px;color:#455567}
.beta-admin>details,.beta-admin>section{margin:20px 0}.beta-admin summary{font-size:1.1rem;font-weight:700;cursor:pointer}
.beta-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.beta-admin label{display:block;margin:10px 0}.beta-admin input:not([type=checkbox]),.beta-admin textarea{display:block;width:100%;margin-top:6px}
.beta-admin fieldset{border:1px solid #d1dce5;border-radius:8px;margin:15px 0}.beta-admin fieldset label{display:inline-flex;align-items:center;gap:8px;margin:8px 12px 8px 0}
.beta-table-scroll{overflow:auto;max-width:100%;border:1px solid #d5dfe7;border-radius:8px}
.beta-table-scroll table{border-collapse:collapse;min-width:680px;width:100%}.beta-table-scroll td,.beta-table-scroll th{padding:12px;text-align:left;border-bottom:1px solid #d5dfe7;white-space:nowrap}
.beta-table-scroll th{background:#f1f5f8}.beta-duration-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid #d1dce5}.beta-duration-form input{max-width:160px}
@media(max-width:650px){.beta-admin-grid{grid-template-columns:1fr}.beta-panel .heading-actions,.beta-offer .heading-actions{display:grid}.beta-panel .button,.beta-offer .button{width:100%}.beta-dates div{display:block}.beta-dates dd{margin-top:4px}.beta-panel{padding:20px}.beta-admin .card{padding:18px}}
