/* 데이쉐어 - 스타일 (글자는 크게, 간격은 넓게. 조용한 느낌: 테두리 대신 얇은 선) */
:root {
  --text:#1f2328; --sub:#3f4650; --muted:#6b7480; --line:#e8eaed; --accent:#2f6fed; --err:#c0392b;
  --me:#2f6fed; --other:#8b5cf6; --both:#2a9d5c; --hol:#d03a3a;
}
/* 글꼴: 한국어는 IBM Plex Sans KR, 일본어는 BIZ UDPゴシック(굵기는 400·700만 있어 중간 굵기도 700으로) */
:root { --wm: 500; --wb: 600; }
html[lang="ja"] { --wm: 700; --wb: 700; }
html[lang="ja"] body { font-family: "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", -apple-system, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body { width: 100%; max-width: 100vw; position: relative; }
body { font-family: "IBM Plex Sans KR", -apple-system, "Noto Sans KR", "Noto Sans JP", "Hiragino Sans", "Segoe UI", sans-serif;
  font-size: 18px; line-height: 1.5; color: var(--text); background: #a0c9fd; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #a0c9fd url(/bg.webp) center top / cover no-repeat; }
.cal, .list, .top { text-shadow: 0 0 4px rgba(255,255,255,.75); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---- 로그인 화면 ---- */
.center-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.box { width: 100%; max-width: 360px; text-align: center; }
.brand { font-size: 30px; font-weight: var(--wm); margin: 0 0 8px; }
.lead { color: var(--sub); margin: 0 0 24px; }
.err { color: var(--err); margin: 0 0 16px; font-size: 16px; }
.btn { display: block; width: 100%; height: 56px; line-height: 56px; border-radius: 12px; background: var(--accent);
  color: #fff; font-size: 18px; font-weight: var(--wm); text-decoration: none; }
.pill { margin-top: 20px; height: 48px; padding: 0 20px; border-radius: 24px; border: 1px solid var(--line);
  background: transparent; color: var(--sub); font-size: 16px; }

/* ---- 홈 ---- */
#root { width: 100%; max-width: 520px; margin: 0 auto; overflow: hidden; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 0; position: relative; }
.top, .cal { flex: none; }
.top { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px 18px; position: relative; }
.ttl { font-size: 22px; font-weight: var(--wm); margin: 0; cursor: pointer; }
.ttl::after { content: ""; display: inline-block; margin-left: 8px; vertical-align: middle; border: 6px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.ympick { position: absolute; left: 12px; top: 58px; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.14); z-index: 6; padding: 8px 10px 12px; text-shadow: none; }
.ympick[hidden] { display: none; }
.yrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.yval { font-size: 20px; font-weight: var(--wm); }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mgrid button { height: 52px; border: 0; border-radius: 10px; background: transparent; font-size: 18px; }
.mgrid button.cur { background: #eef2fb; }
.mgrid button.sel { background: var(--text); color: #fff; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav .txt { height: 44px; padding: 0 12px; border: 0; background: transparent; font-size: 16px; color: var(--sub); }
.ic { width: 44px; height: 44px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--text); padding: 0; }
.ic svg, .fi svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-space { width: 44px; }
.menu { position: absolute; right: 12px; top: 58px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 5; overflow: hidden; min-width: 180px; }
.menu button { display: block; width: 100%; height: 52px; padding: 0 18px; border: 0; background: #fff; text-align: left; font-size: 17px; }
.menu button + button { border-top: 1px solid var(--line); }

.cal { padding: 0 6px; }
.wk { display: grid; grid-template-columns: repeat(7, 1fr); }
.wk div { text-align: center; font-size: 14px; color: var(--sub); padding: 6px 0; }
.wk div:first-child { color: var(--hol); }
.wk div:last-child { color: var(--me); }
.week { position: relative; height: 68px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); height: 100%; }
.d { position: relative; display: flex; justify-content: center; padding-top: 6px; border-radius: 10px; cursor: pointer; }
.d .n { font-size: 21px; font-weight: var(--wm); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.d.out .n { opacity: .35; }
.d.sun .n, .d.hol .n { color: var(--hol); }
.d.sat .n { color: var(--me); }
.d.sat.hol .n { color: var(--hol); }
.d.today .n { background: var(--text); color: #fff; }
.d.sel { box-shadow: inset 0 0 0 1.5px var(--text); }
.d .more { position: absolute; top: 6px; right: 3px; font-size: 11px; color: var(--muted); }
.bars { position: absolute; inset: 0; pointer-events: none; }
.bar { position: absolute; height: 6px; }
.bar.me { background: var(--me); } .bar.other { background: var(--other); } .bar.both { background: var(--both); }
.bar.multi { opacity: .6; box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
#grid.slide-l { animation: inL .22s ease; } #grid.slide-r { animation: inR .22s ease; }
@keyframes inL { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes inR { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 10px 18px 0; border-top: 1px solid rgba(255,255,255,.7); padding: 12px 0 120px; }
.dh { font-size: 15px; color: var(--sub); margin: 0 0 6px; }
.hol-line { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 16px; color: var(--hol); }
.tag { font-size: 12px; padding: 1px 8px; border-radius: 10px; background: rgba(255,255,255,.7); color: var(--sub); }
.it { display: flex; align-items: center; gap: 12px; min-height: 64px; font-size: 19px; cursor: pointer; background: rgba(255,255,255,.4); border-radius: 12px; padding: 0 12px; margin: 0 0 8px; }
.it b { width: 5px; align-self: stretch; margin: 8px 0; border-radius: 3px; flex: none; }
.it b.me { background: var(--me); } .it b.other { background: var(--other); } .it b.both { background: var(--both); }
.it .tx { flex: 1; min-width: 0; }
.it .t1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it .t2 { font-size: 14px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it .al { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); flex: none; }
.it .al svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.none { color: var(--muted); min-height: 52px; display: flex; align-items: center; }
.fab { position: fixed; right: max(18px, calc(50% - 260px + 18px)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 60px; height: 60px;
  border-radius: 50%; border: 0; background: var(--text); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.fab svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ---- 입력 화면 ---- */
.sheet { position: fixed; inset: 0; background: #fff; overflow-y: auto; overflow-x: hidden; z-index: 10; display: none; -webkit-overflow-scrolling: touch; }
.sheet.open { display: block; }
.sheet-in { max-width: 520px; margin: 0 auto; padding: env(safe-area-inset-top) 18px 60px; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; height: 56px; margin: 0 -10px; }
.sheet-title { font-size: 18px; font-weight: var(--wm); }
.f-title { width: 100%; border: 0; border-bottom: 1px solid var(--line); outline: none; font-size: 24px; height: 72px; padding: 0 2px; background: transparent; }
.f-title::placeholder, .frow input::placeholder, .frow textarea::placeholder { color: var(--muted); }
.frow { display: flex; align-items: center; gap: 14px; min-height: 64px; border-bottom: 1px solid var(--line); }
.frow.tall { align-items: flex-start; padding-top: 16px; }
.fi { width: 24px; flex: none; color: var(--muted); display: inline-flex; }
.frow.tall .fi { margin-top: 2px; }
.frow input[type=text], .frow select, .frow textarea { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 18px; height: 54px; padding: 0; }
.frow select { -webkit-appearance: none; appearance: none; }
.frow textarea { height: auto; min-height: 54px; padding: 14px 0; resize: none; line-height: 1.5; }
.frow.tall textarea { padding: 0 0 14px; }
.dates { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; height: 56px; }
.dates input[type=date], .frow input[type=time] { border: 0; background: transparent; outline: none; font-size: 18px; height: 54px; padding: 0; min-width: 0; }
.dates input[type=date] { width: 150px; flex: none; }
.dates.two { gap: 6px; }
.dates.two input[type=date] { flex: 1 1 0; width: auto; font-size: 15px; }
.dates.two .endwrap { flex: 1 1 0; gap: 4px; }
.dates.two .x { width: 30px; height: 30px; }
.dates.two .arrow { font-size: 15px; }
.dates.two input[type=date]::-webkit-calendar-picker-indicator { display: none; }
.endwrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.endwrap[hidden] { display: none; }
.arrow { color: var(--muted); }
.quiet { border: 0; background: transparent; padding: 0; height: 54px; font-size: 18px; color: var(--muted); text-align: left; }
.x { width: 34px; height: 34px; border: 0; background: #f3f4f6; border-radius: 50%; color: var(--sub); font-size: 18px; line-height: 1; padding: 0; flex: none; }
.who { display: flex; gap: 22px; flex: 1; }
.who button { height: 54px; border: 0; background: transparent; padding: 0; font-size: 18px; color: var(--muted); border-bottom: 2px solid transparent; border-radius: 0; }
.who button.on { color: var(--text); font-weight: var(--wm); border-bottom-color: var(--text); }
#fErr { margin: 18px 0 0; }
.actions { display: flex; gap: 12px; margin-top: 24px; }
.save { flex: 1; min-width: 0; height: 56px; border: 1.5px solid var(--text); border-radius: 12px; background: var(--text); color: #fff; font-size: 18px; font-weight: var(--wm); }
.del { flex: 1; min-width: 0; height: 56px; border: 1.5px solid var(--err); border-radius: 12px; background: #fff; color: var(--err); font-size: 18px; font-weight: var(--wm); }

/* ---- 알림 설정 화면 ---- */
.srow { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 76px; border-bottom: 1px solid var(--line); }
.sl { flex: 1; min-width: 0; }
.sa { font-size: 18px; line-height: 1.35; }
.ss { font-size: 14px; color: var(--sub); margin-top: 2px; line-height: 1.4; }
.tgl { width: 56px; height: 34px; border-radius: 17px; border: 0; background: #c9cdd3; position: relative; flex: none; padding: 0; transition: background .15s; }
.tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: left .15s; }
.tgl.on { background: var(--text); }
.tgl.on::after { left: 25px; }
.tgl:disabled { opacity: .4; }
.sval { border: 0; background: transparent; font-size: 18px; height: 54px; padding: 0; text-align: right; outline: none; }
.testbtn { width: 100%; height: 54px; margin-top: 24px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 17px; }
.note { font-size: 14px; color: var(--sub); margin: 16px 2px 0; line-height: 1.55; }
.note[hidden] { display: none; }

/* ---- PC(넓은 화면): 폰 모양 폭 안에만 그림을 깔고, 바깥은 같은 색으로 ---- */
@media (min-width: 600px) {
  body { background: linear-gradient(#a0c9fd, #f9d5e5) fixed; }
  body::before { left: 50%; right: auto; width: 520px; transform: translateX(-50%); }
}
.frow input[type=time] { width: 104px; flex: none; }
#timeWrap { flex: 1; }
#btnEndTime { margin-left: 6px; }
#sheet { background: #cfe6fb url(/bg-form.webp) center top / cover no-repeat; }

/* ---- 입력 화면 글씨 굵게 ---- */
.f-title { font-weight: var(--wm); }
.frow input[type=text], .frow select, .frow textarea, .dates input[type=date], .frow input[type=time], .quiet, .who button { font-weight: var(--wm); }
.who button.on { font-weight: var(--wb); }
.f-title::placeholder, .frow input::placeholder, .frow textarea::placeholder { font-weight: 400; }
.dates.two input[type=date] { letter-spacing: -0.3px; }

/* ---- 버튼: 연한 유리 (흰 반투명 + 색 테두리·글씨) ---- */
.save { background: rgba(255,255,255,.65); color: #1b4fc0; border: 1.5px solid rgba(47,111,237,.7); }
.del { background: rgba(255,255,255,.65); color: #b3261e; border: 1.5px solid rgba(179,38,30,.6); }
.fab { background: rgba(255,255,255,.7); color: #1b4fc0; border: 1.5px solid rgba(47,111,237,.7); box-shadow: 0 4px 14px rgba(47,111,237,.18); }
.fab svg { stroke: #1b4fc0; }
.testbtn { background: rgba(255,255,255,.65); border: 1.5px solid rgba(47,111,237,.7); color: #1b4fc0; font-weight: var(--wm); }

/* ---- 날짜·시간 두 줄을 같은 칸(시작 · → · 종료 · ×)으로 맞춤 ---- */
.frow input[type=date], .frow input[type=time] { -webkit-appearance: none; appearance: none; }
.frow input[type=date]::-webkit-calendar-picker-indicator, .frow input[type=time]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.dates.two, #timeWrap.two { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 34px; column-gap: 4px; align-items: center; }
.dates.two .endwrap, #timeWrap.two .endwrap { display: contents; }
.dates.two input[type=date], #timeWrap.two input[type=time] { width: 100%; min-width: 0; font-size: 16px; letter-spacing: 0; }
.dates.two .arrow, #timeWrap.two .arrow { text-align: center; font-size: 15px; }
.dates.two .x, #timeWrap.two .x { width: 30px; height: 30px; justify-self: end; }

/* ---- 저장 안 하고 나갈 때 확인 창 ---- */
.dlg { position: fixed; inset: 0; z-index: 30; background: rgba(20,30,60,.35); display: flex; align-items: center; justify-content: center; padding: 24px; }
.dlg[hidden] { display: none; }
.dlg-box { width: 100%; max-width: 360px; background: rgba(255,255,255,.96); border-radius: 16px; padding: 22px 18px 18px; }
.dlg-msg { margin: 0 0 18px; font-size: 18px; line-height: 1.5; font-weight: var(--wm); text-align: center; }
.dlg .actions { margin-top: 0; }

/* ---- 알림 고르기 창 (여러 개 체크) ---- */
.alarmbtn { flex: 1; min-width: 0; color: var(--text); font-size: 18px; }
.allist { margin: 0 0 14px; }
.alrow { display: flex; align-items: center; gap: 14px; width: 100%; height: 54px; border: 0; background: transparent; border-radius: 10px; padding: 0 10px; text-align: left; font-size: 18px; font-weight: var(--wm); }
.alrow + .alrow { border-top: 1px solid var(--line); border-radius: 0; }
.chk { width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(47,111,237,.6); background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.alrow.on .chk { background: #2f6fed; border-color: #2f6fed; }
.alrow.on .chk::after { content: ""; width: 7px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
#alDlg .actions { margin-top: 0; }

.rad .chk { border-radius: 50%; }
.rad.on .chk::after { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; transform: none; }
#rpDlg .allist { margin-bottom: 0; }

/* ---- 검정 대신 파랑 ---- */
.d.today .n { background: #2f6fed; color: #fff; }
.d.sel { box-shadow: inset 0 0 0 1.5px rgba(47,111,237,.75); background: rgba(255,255,255,.35); }
.tgl.on { background: #2f6fed; }
.who button.on { color: #1b4fc0; border-bottom-color: #2f6fed; }
.alarmbtn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 설정 화면: 배경 그림, 언어·로그아웃 ---- */
#settings { background: #d6e0fb url(/bg-settings.webp) center top / cover no-repeat; }
.pillbtn { height: 46px; padding: 0 18px; border: 1.5px solid rgba(47,111,237,.7); border-radius: 12px; background: rgba(255,255,255,.65); color: #1b4fc0; font-size: 17px; font-weight: var(--wm); flex: none; }
.logoutbtn { width: 100%; height: 54px; margin-top: 28px; border-radius: 12px; border: 1.5px solid rgba(179,38,30,.6); background: rgba(255,255,255,.65); color: #b3261e; font-size: 17px; font-weight: var(--wm); }

#settings .sheet-top { margin-bottom: 96px; }
#settings .srow { background: rgba(255,255,255,.6); border: 0; border-radius: 14px; padding: 0 14px; margin-bottom: 8px; }
#settings .ss { color: #3f4650; }

/* 공휴일 카드 (일정 아래) */
.hol-line { background: rgba(255,255,255,.4); border-radius: 12px; padding: 0 12px; margin: 0 0 8px; min-height: 52px; }