:root { color-scheme: light; --ink:#17211b; --muted:#69736d; --paper:#f4f0e6; --card:#fffdf8; --green:#1f5b45; --line:#dcd7ca; }
* { box-sizing:border-box; }
body { margin:0; background:#f4f0e6; color:var(--ink); font-family:Inter,"Noto Sans KR",system-ui,sans-serif; }
[hidden] { display:none !important; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background-color:#f4f0e6; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='3' cy='3' r='2.6' fill='%23000' fill-opacity='.16'/%3E%3C/svg%3E"); background-size:24px 24px; }
.shell { position:relative; width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:72px 0; }
.account-bar { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-bottom:20px; color:var(--muted); font-size:13px; }
.account-bar strong { color:var(--ink); }
.auth-screen { position:relative; z-index:5; min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(420px,100%); border:1px solid var(--line); border-radius:22px; background:var(--card); padding:34px; box-shadow:0 18px 50px rgba(38,43,38,.12); }
.auth-card h2 { margin-bottom:8px; }
.auth-help { margin:0 0 24px; color:var(--muted); line-height:1.55; }
.auth-card label { display:grid; gap:7px; margin-top:15px; color:var(--muted); font-size:13px; font-weight:700; }
.auth-card input,.user-form input { width:100%; border:1px solid var(--line); border-radius:11px; background:white; padding:12px 13px; color:var(--ink); font:inherit; outline:none; }
.auth-card input:focus,.user-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(31,91,69,.1); }
.auth-card .primary { width:100%; margin-top:9px; }
.form-error { min-height:20px; margin:10px 0; color:#a13f32; font-size:13px; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-bottom:36px; }
.hero-title { position:relative; isolation:isolate; flex:1 1 auto; min-width:0; }
.eyebrow { margin:0 0 10px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.16em; }
h1 { max-width:700px; margin:0; font-family:"Gamja Flower","Segoe Print","Noto Sans CJK KR",cursive; font-size:clamp(46px,7vw,78px); font-weight:400; line-height:1.05; letter-spacing:.01em; }
.title-with-wings { position:relative; display:inline-flex; align-items:center; justify-content:center; isolation:isolate; }
.title-with-wings img { position:absolute; z-index:-1; left:50%; top:50%; width:calc(100% + 380px); max-width:none; transform:translate(-50%,-50%); pointer-events:none; user-select:none; }
.title-with-wings h1 { position:relative; z-index:1; white-space:nowrap; }
.sub { position:relative; z-index:2; margin:18px 0 0; color:var(--muted); font-size:17px; }
.daily-quote { flex:0 0 440px; margin:0; border:1px solid #aaa496; border-radius:18px; background:rgba(255,253,248,.88); padding:19px 24px 20px; box-shadow:7px 7px 0 rgba(31,91,69,.13); }
.daily-label { margin:0 0 10px; color:var(--green); font-size:12px; font-weight:900; letter-spacing:.1em; }
.daily-quote blockquote { margin:0; font-family:Georgia,"Noto Serif KR",serif; font-size:18px; font-weight:600; line-height:1.45; }
.quote-ko { margin:9px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.translator { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 18px 50px rgba(38,43,38,.08); }
.toolbar { display:flex; align-items:center; gap:14px; padding:16px 22px; border-bottom:1px solid var(--line); }
.toolbar label { color:var(--muted); font-size:13px; }
select { border:0; background:transparent; color:var(--ink); font:inherit; font-weight:700; outline:none; }
.panes { display:grid; grid-template-columns:1fr 1fr; min-height:330px; }
.pane { position:relative; padding:26px; }
.input-pane { border-right:1px solid var(--line); }
textarea { width:100%; height:245px; resize:none; border:0; outline:0; background:transparent; color:var(--ink); font:500 19px/1.65 inherit; }
textarea::placeholder,.placeholder { color:#9a9f99; }
#count { position:absolute; right:24px; bottom:19px; color:var(--muted); font-size:12px; }
#result { white-space:pre-wrap; word-break:break-word; font-size:19px; line-height:1.65; }
.output-pane { max-height:480px; overflow:auto; }
.dictionary-result { padding-bottom:42px; white-space:normal !important; font-size:15px !important; line-height:1.55 !important; }
.dictionary-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.dictionary-head strong { font-family:Georgia,"Noto Serif KR",serif; font-size:31px; font-weight:600; }
.pronunciation { margin-left:10px; color:var(--muted); font-size:13px; }
.part-of-speech { flex:none; border-radius:999px; background:#e7efe9; color:var(--green); padding:4px 9px; font-size:12px; font-weight:800; }
.dictionary-result section { margin-top:19px; }
.dictionary-result h3 { margin:0 0 8px; color:var(--muted); font-size:12px; letter-spacing:.06em; }
.dictionary-result ol { margin:0; padding-left:21px; }
.dictionary-result li + li { margin-top:5px; }
.word-chips { display:flex; flex-wrap:wrap; gap:7px; }
.word-chips span { border:1px solid var(--line); border-radius:999px; background:white; padding:5px 10px; }
.dictionary-empty { color:#9a9f99; }
.dictionary-relations { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.examples { display:grid; gap:9px; }
.examples > div { border-left:3px solid #a9c1b1; padding:3px 0 3px 12px; }
.examples p { margin:0; }
.examples p + p { margin-top:2px; color:var(--muted); font-size:14px; }
.copy { position:absolute; right:20px; bottom:16px; border:1px solid var(--line); border-radius:9px; background:white; padding:7px 12px; cursor:pointer; }
.actions { display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:14px 20px; border-top:1px solid var(--line); }
.action-buttons { display:flex; align-items:center; gap:9px; }
#status { color:#a13f32; font-size:14px; }
button { font:inherit; }
.primary { border:0; border-radius:12px; background:var(--green); color:white; padding:13px 25px; font-weight:800; cursor:pointer; }
.primary:disabled { opacity:.55; cursor:wait; }
.secondary { border:1px solid var(--line); border-radius:12px; background:white; color:var(--ink); padding:12px 20px; font-weight:700; cursor:pointer; }
.secondary:hover { background:#f5f2e9; }
.history-section { margin-top:54px; }
.history-title { display:flex; align-items:end; justify-content:space-between; margin-bottom:17px; }
h2 { margin:0; font-family:Georgia,"Noto Serif KR",serif; font-size:30px; font-weight:500; }
.text-button { border:0; background:transparent; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.history { display:grid; gap:10px; }
.history-item { display:grid; grid-template-columns:95px 1fr 1fr; gap:20px; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:rgba(255,253,248,.7); }
.badge { color:var(--green); font-size:12px; font-weight:800; }
.history-item p { margin:0; white-space:pre-wrap; word-break:break-word; line-height:1.55; }
.empty { padding:35px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; }
.admin-section { margin-top:54px; }
.user-count { color:var(--muted); font-size:13px; }
.user-form { display:grid; grid-template-columns:1fr 1.4fr auto; gap:10px; padding:18px; border:1px solid var(--line); border-radius:14px; background:rgba(255,253,248,.7); }
.users { display:grid; gap:8px; }
.user-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 18px; border:1px solid var(--line); border-radius:12px; background:rgba(255,253,248,.7); }
.user-row small { margin-left:8px; color:var(--green); font-weight:800; }
.danger { border:0; background:transparent; color:#a13f32; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px) { .hero{align-items:flex-start;flex-direction:column;gap:28px}.daily-quote{width:min(100%,520px);flex-basis:auto} }
@media (max-width:720px) { .shell{padding:30px 0 42px}.title-with-wings img{width:calc(100% + 210px)}.panes{grid-template-columns:1fr}.input-pane{border-right:0;border-bottom:1px solid var(--line)}.output-pane{min-height:330px}.dictionary-relations{grid-template-columns:1fr}.history-item{grid-template-columns:1fr;gap:8px}.actions{align-items:flex-end;gap:10px}.user-form{grid-template-columns:1fr}.account-bar{justify-content:space-between} }