/* v303-w3.90.48: 디자인 글꼴 실제 차이 강화 — 웹폰트는 네트워크 가능 시 로드, 실패 시 시스템 폰트로 폴백 */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Dongle:wght@300;400;700&family=Gaegu:wght@300;400;700&family=Jua&family=Noto+Serif+KR:wght@400;700&family=Single+Day&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css');
/* ═══════════════════════════════════════════════════════════════
main.css — 기본 변수 · 레이아웃 · 보드 · 메모 스타일
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg:#fff; --bg2:#f5f5f7; --bg3:#ebebed;
--txt:#1a1a1a; --txt2:#555; --txt3:#999;
--bdr:#e0e0e0; --bdr2:#d0d0d0; --bdr3:#c0c0c0;
--acc:#F97316; --danger:#e24b4a; --success:#16a34a;
--radius:12px; --radius-sm:6px;
}
/* 다크모드 비활성화 — 추후 테마 기능으로 추가 예정 */
}
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--txt); min-height:100vh;
padding-top: max(env(safe-area-inset-top), 0px);
padding-bottom: max(env(safe-area-inset-bottom), 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
/* ─ 애니메이션 ─ */
@keyframes soft { 0%,100%{opacity:1} 50%{opacity:.15} }
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes slideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
/* ─ 상태 표시줄 ─ */
.status-bar { display:flex; align-items:center; gap:5px; padding:4px 12px; font-size:11px; color:var(--txt3);
padding-top: max(4px, env(safe-area-inset-top)); }
html.capacitor .status-bar { padding-top: max(8px, env(safe-area-inset-top)); }
.st-dot { width:6px; height:6px; border-radius:50%; background:var(--txt3); flex-shrink:0; }
.st-dot.ok { background:var(--success); }
.st-dot.err { background:var(--danger); }
.st-dot.sync { background:#F97316; animation:pulse 1s infinite; }
/* ─ 툴바 ─ */
.gdot { width:9px; height:9px; border-radius:50%; background:#e24b4a; display:none; animation:soft 2.4s infinite; position:absolute; top:2px; left:0; z-index:10; }
.gdot.on { display:block; }
.tb { display:flex; align-items:center; gap:6px; padding:0 0 8px 16px; flex-wrap:wrap; }
.chip { display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:500; cursor:pointer; border:none; color:#fff; opacity:.45; transition:opacity .2s; }
.chip:hover, .chip.fr { opacity:1; }
.abtn { padding:4px 10px; border-radius:20px; font-size:11px; border:1px dashed var(--bdr2); background:transparent; color:var(--txt2); cursor:pointer; font-family:inherit; }
.abtn:hover { background:var(--bg2); }
/* ─ 데스크탑 ─ */
.desk { position:relative; width:100%; height:calc(100vh - 80px); border:1px solid var(--bdr3); border-radius:var(--radius); background:var(--bg2); overflow:hidden; }
/* ─ 윈도우(메모판) ─ */
.win { position:absolute; min-width:400px; min-height:160px; display:flex; flex-direction:column; border:1px solid var(--bdr2); border-radius:var(--radius); background:var(--bg); overflow:visible; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.win.snap { box-shadow:0 0 0 2px #5B7FDE88; }
.wi { display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:var(--radius); }
.wh { display:flex; align-items:center; gap:5px; padding:7px 8px 7px 10px; cursor:grab; user-select:none; flex-shrink:0; position:relative; }
.wh:active { cursor:grabbing; }
.wdot { width:7px; height:7px; border-radius:50%; background:#fff; display:none; animation:soft 2.4s infinite; flex-shrink:0; }
.wdot.on { display:block; }
.wtitle { position:absolute; left:50%; transform:translateX(-50%); font-size:12px; font-weight:500; color:#fff; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%; pointer-events:auto; }
.wtitle:hover { background:rgba(255,255,255,.2); }
.wti { font-size:12px; font-weight:500; color:#fff; width:70px; background:rgba(255,255,255,.2); border:none; border-bottom:1px solid rgba(255,255,255,.6); outline:none; padding:1px 3px; font-family:inherit; }
.wdrag { flex:1; min-width:0; height:100%; }
.wb2 { width:20px; height:20px; border-radius:4px; background:transparent; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; color:rgba(255,255,255,.7); flex-shrink:0; }
.wb2:hover { background:rgba(255,255,255,.2); color:#fff; }
.wb2.act { background:rgba(255,255,255,.25); color:#fff; }
/* ─ 검색바 ─ */
.sbar { display:none; align-items:center; gap:5px; padding:5px 8px; border-bottom:1px solid var(--bdr3); flex-shrink:0; background:var(--bg2); }
.sbar.op { display:flex; }
.sinp { flex:1; font-size:12px; padding:4px 8px; border:1px solid var(--bdr2); border-radius:4px; background:var(--bg); color:var(--txt); outline:none; min-width:0; }
.sinp:focus { border-color:var(--acc); }
.sinp::placeholder { color:var(--txt3); }
.scl { width:18px; height:18px; border:none; background:transparent; cursor:pointer; color:var(--txt3); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.scnt { font-size:10px; color:var(--txt3); white-space:nowrap; flex-shrink:0; }
.hl { background:#fef08a; color:#1e1b00; border-radius:2px; padding:0 1px; }
/* ─ 컨텍스트 메뉴 ─ */
.bmenu { position:absolute; top:100%; right:0; min-width:180px; background:var(--bg); border:1px solid var(--bdr2); border-radius:var(--radius-sm); box-shadow:0 4px 20px rgba(0,0,0,.12); z-index:500; display:none; animation:fadeIn .12s ease; overflow:hidden; }
.bmenu.op { display:block; }
.mi { display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:12px; color:var(--txt); cursor:pointer; white-space:nowrap; }
.mi:hover { background:var(--bg2); }
.mi i { font-size:14px; color:var(--txt2); width:16px; flex-shrink:0; }
.mi.hl2 { color:#F97316; font-weight:500; }
.mi.hl2 i { color:#F97316; }
.mi.dng { color:var(--danger); }
.mi.dng i { color:var(--danger); }
.msl { font-size:10px; color:var(--txt3); padding:6px 12px 2px; text-transform:uppercase; letter-spacing:.05em; }
.mdv { height:1px; background:var(--bdr); margin:3px 0; }
/* ─ 보드 바디 / 입력창 ─ */
.wb { flex:1; overflow-y:auto; padding:6px; min-height:0; }
.winp { flex-shrink:0; padding:5px 6px; border-top:1px solid var(--bdr3); }
.wir { position:relative; display:flex; align-items:flex-end; gap:5px; }
/* 웹/데스크톱 입력창 중요도 태그 바 */
.web-draft-tags {
display: none;
align-items: center;
gap: 8px;
padding: 0 34px 6px 0;
}
.web-draft-tags.on {
display: flex;
}
.web-draft-tags .mob-draft-tag {
flex: 1;
height: 8px;
min-width: 22px;
border-radius: 999px;
background: var(--tag);
border: 1px solid var(--bdr2);
cursor: pointer;
transition: height .12s, box-shadow .12s, border-color .12s;
}
.web-draft-tags .mob-draft-tag:hover {
height: 11px;
}
.web-draft-tags .mob-draft-tag.on {
height: 12px;
border: 2px solid #F97316;
box-shadow: 0 0 0 2px rgba(249,115,22,.14);
}
.web-draft-tags .mob-draft-tag:first-child {
background: var(--bg2);
}
.memo-input { flex:1; font-size:12px; padding:6px 8px; border:1px solid var(--bdr2); border-radius:5px; background:var(--bg); color:var(--txt); outline:none; min-width:0; resize:none; overflow:hidden; font-family:inherit; line-height:1.4; min-height:34px; max-height:120px; }
.memo-input:focus { border-color:var(--acc); }
.memo-input::placeholder { color:var(--txt3); }
.ppb { width:28px; height:28px; border-radius:50%; background:#F97316; color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ppb:hover { background:#EA6700; }
.dov { display:none; position:absolute; inset:0; border:2px dashed var(--bdr); border-radius:5px; background:var(--bg2); z-index:10; flex-direction:column; align-items:center; justify-content:center; font-size:11px; color:var(--txt2); pointer-events:none; gap:4px; }
.dov.act { display:flex; }
.rsz { position:absolute; bottom:3px; right:3px; width:16px; height:16px; cursor:se-resize; z-index:2; display:flex; align-items:center; justify-content:center; opacity:.45; }
.win:hover .rsz { opacity:.85; }
/* ─ 메모 행 ─ */
.row { border:1px solid var(--bdr3); border-radius:5px; padding:6px 8px; background:var(--bg); margin-bottom:4px; }
.row.dn { opacity:.62; }
.rm { display:flex; align-items:flex-start; gap:5px; }
.rdot { width:5px; height:5px; border-radius:50%; background:#e24b4a; flex-shrink:0; margin-top:4px; animation:soft 2.4s infinite; }
.rdot.h { visibility:hidden; }
.rb { flex:1; min-width:0; }
/* 메모 본문 클릭 영역: 한 줄 전체가 아니라 실제 글씨 영역만 손가락 커서/수정 클릭 */
.rt {
display:inline;
font-size:11px; color:var(--txt); word-break:break-word; line-height:1.5;
cursor:pointer; border-radius:3px; padding:1px 2px; margin:-1px -2px;
-webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.rt:hover { background:var(--bg2); }
.rb { cursor:default; }
.row.dn .rt { text-decoration:none !important; color:var(--txt2); }
.ea { width:100%; font-size:11px; line-height:1.5; padding:3px 5px; border:1px solid var(--acc); border-radius:3px; background:var(--bg); color:var(--txt); outline:none; resize:none; font-family:inherit; overflow-y:auto; max-height:400px; min-height:60px; }
.ea-wrap { position:relative; }
.ea-ok {
position:absolute; right:4px; bottom:5px;
background:var(--acc); color:#fff; border:none;
border-radius:4px; width:22px; height:22px;
cursor:pointer; font-size:12px;
display:flex; align-items:center; justify-content:center;
}
.ea-ok:hover { background:#ea6700; }
.rsub { font-size:9px; color:var(--txt3); margin-top:1px; }
.dbadge { display:inline-block; font-size:9px; padding:0 4px; border-radius:7px; background:#fcebeb; color:#a32d2d; margin-left:3px; }
.ra { display:flex; flex-direction:column; gap:1px; flex-shrink:0; opacity:0; transition:opacity .15s; }
.row:hover .ra, .row.ed .ra { opacity:1; }
.rbt { width:20px; height:20px; border:none; background:transparent; cursor:pointer; color:var(--txt3); display:flex; align-items:center; justify-content:center; border-radius:3px; font-size:12px; }
.rbt:hover { background:var(--bg2); color:var(--txt); }
.rbt.dl:hover { color:var(--danger); }
.dc { margin-top:5px; padding:5px 7px; background:var(--bg2); border-radius:5px; border:1px solid var(--bdr); display:none; }
.dc.on { display:block; }
.dc p { font-size:10px; color:var(--txt); margin-bottom:5px; }
.dcb { display:flex; gap:4px; }
.dcbt { font-size:10px; padding:2px 8px; border-radius:3px; cursor:pointer; border:1px solid var(--bdr2); background:var(--bg); color:var(--txt); font-family:inherit; }
.dcbt.dng { background:#e24b4a; color:#fff; border-color:#e24b4a; }
.dvl { height:1px; background:var(--bdr); margin:5px 2px; }
/* ─ 미디어 (이미지) ─ */
.pimg { margin-top:5px; }
.pimg img { width:100%; height:auto; object-fit:contain; border-radius:4px 4px 0 0; display:block; cursor:zoom-in; -webkit-touch-callout:none; -webkit-user-select:none; }
.mig { display:grid; gap:2px; border-radius:6px; overflow:hidden; margin-top:5px; }
.c1 { grid-template-columns:1fr; }
.c2 { grid-template-columns:1fr 1fr; }
.c3 { grid-template-columns:1fr 1fr 1fr; }
/* W3.499: 3장 이상일 때 9칸(3열)이 아니라 5칸(2열, 6번째=+N)으로 — 칸이 커진다 */
/* W3.500: 2열(줄바꿈)이 아니라 가로 한 줄로 5칸을 쭉 배열 — 칸 모양(3:4)은 그대로 유지 */
.c5 { grid-template-columns: repeat(5, 1fr); }
.mc { position:relative; aspect-ratio:3/4; background:#000; }
/* W3.494: 그리드 안 사진 크기가 원본 비율대로 제각각이라 들쑥날쑥해 보이던 문제.
칸을 정사각형으로 고정하고, 사진은 안 잘리게(contain) — 가로형 사진은 위아래에 자연스러운 여백이 생긴다. */
.mc img { width:100%; height:100%; object-fit:contain; display:block; cursor:zoom-in; -webkit-touch-callout:none; -webkit-user-select:none; }
.mm { position:absolute; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; }
/* W3.493: 통합 그리드(mig) 안에서 동영상 칸에 재생 배지 표시 */
.mc-vid img { background:#000; object-fit:cover; }
.mc-vid-badge { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; color:#fff; font-size:22px; text-shadow:0 1px 4px rgba(0,0,0,.6); }
/* ─ 미디어 (영상) ─ */
.vmemo { position:relative; margin-top:5px; border-radius:8px; overflow:hidden; cursor:pointer; background:#111; }
.vmemo video { width:100%; height:auto; object-fit:contain; background:#000; display:block; pointer-events:none; }
.vmemo-ov { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:rgba(0,0,0,.38); transition:background .15s; }
.vmemo:hover .vmemo-ov { background:rgba(0,0,0,.55); }
.vmemo-ov i { font-size:26px; color:#fff; }
.vmemo-nm { font-size:9px; color:rgba(255,255,255,.75); max-width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* v126: 동영상 파일 메모는 위/아래 터치 여백 확보 */
.row.row-video-memo .rb { padding-top:6px; padding-bottom:6px; }
.row.row-video-memo .vmemo { margin-top:7px; margin-bottom:7px; }
/* ─ 링크 카드 ─ */
.ytc { display:block; text-decoration:none; border:1px solid var(--bdr3); border-radius:10px; overflow:hidden; margin-top:6px; background:var(--bg); }
.ytc:hover { box-shadow:0 2px 8px rgba(0,0,0,.1); }
.ytct { position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.ytct img { width:100%; height:100%; object-fit:cover; display:block; }
.ytpl { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; background:rgba(255,0,0,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ytci { padding:8px 10px 10px; }
.yttt { font-size:12px; font-weight:500; color:var(--txt); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; }
.ytt { display:flex; flex-wrap:wrap; gap:4px; }
.ytag { font-size:10px; color:#F97316; background:rgba(249,115,22,.1); padding:2px 7px; border-radius:4px; white-space:nowrap; }
.lpc { display:flex; text-decoration:none; border:1px solid var(--bdr3); border-radius:8px; overflow:hidden; margin-top:6px; background:var(--bg); }
.lpi { width:56px; min-width:56px; height:52px; object-fit:cover; display:block; flex-shrink:0; }
.lpp { width:56px; min-width:56px; height:52px; background:var(--bg2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--txt3); font-size:20px; }
.lpin { padding:7px 9px; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.lpt { font-size:11px; font-weight:500; color:var(--txt); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.4; }
/* ─ 기타 ─ */
.emp { text-align:center; padding:1rem 0; color:var(--txt3); font-size:11px; }
.nores { text-align:center; padding:1rem 0; color:var(--txt3); font-size:11px; }
.anlz { font-size:10px; color:var(--txt3); padding:2px 0; animation:soft 1.4s infinite; }
.pp2 { margin-bottom:3px; position:relative; display:inline-block; }
.pp2 img { height:36px; border-radius:4px; display:block; }
/* W3.492: 동영상 미리보기 — 사진과 같은 pp2 슬롯에 재생 배지만 얹어서 구분 */
.pp2-vid img { background:#000; object-fit:cover; width:36px; }
.pp2-vid-badge { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; color:#fff; font-size:13px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
/* W3.491: 사진 여러 장이 미리보기에 순서대로 올라오는 동안 보여주는 작은 안내 */
.pcam-loading-pill { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--txt2); padding:4px 2px; }
.cimg { position:absolute; top:-4px; right:-4px; width:13px; height:13px; border-radius:50%; background:var(--txt2); color:var(--bg); border:none; cursor:pointer; font-size:9px; display:flex; align-items:center; justify-content:center; }
.pp2-doc { height:36px; padding:0 8px; border-radius:6px; background:var(--bg2); border:1px solid var(--bdr3); display:inline-flex; align-items:center; gap:5px; max-width:150px; box-sizing:border-box; vertical-align:top; }
.pp2-doc-icon { display:flex; align-items:center; gap:3px; color:var(--acc); font-size:13px; flex-shrink:0; }
.pp2-doc-label { font-size:9px; font-weight:700; }
.pp2-doc-name { font-size:10px; color:var(--txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:85px; }
/* ─ 토스트 ─ */
.ptst { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.85); color:#fff; font-size:12px; padding:9px 18px; border-radius:24px; z-index:99990; display:none; white-space:nowrap; animation:slideUp .2s ease; pointer-events:none; }
.ptst.on { display:block; }
/* ─ 라이트박스 ─ */
#lb { display:none; position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:99990; align-items:center; justify-content:center; cursor:zoom-out; }
#lb.on { display:flex; }
/* 라이트박스 화살표 — 브랜드 색상, 심플 고급 */
#lb-prev, #lb-next {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: rgba(249,115,22,.85);
border: none; color: #fff; font-size: 20px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(4px);
transition: background .15s, transform .15s;
z-index: 10;
}
#lb-prev { left: 20px; }
#lb-next { right: 20px; }
#lb-prev:hover, #lb-next:hover { background: #F97316; transform: translateY(-50%) scale(1.08); }
#lb-prev:active, #lb-next:active { transform: translateY(-50%) scale(.95); }
/* 카운터 */
#lb-counter {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,.5); color: #fff;
padding: 4px 14px; border-radius: 20px;
font-size: 13px; font-weight: 500;
backdrop-filter: blur(4px);
}
/* 모바일: 화살표 작게 */
@media (max-width: 600px) {
#lb-prev, #lb-next { width:36px; height:36px; font-size:16px; }
#lb-prev { left:10px; }
#lb-next { right:10px; }
}
#lb-img { max-width:95vw; max-height:95vh; object-fit:contain; border-radius:8px; cursor:default; user-select:none; }
#lb-x { position:fixed; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); border:none; color:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; z-index:99991; }
/* ─ 영상 팝업 ─ */
#vp { display:none; position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:99990; align-items:center; justify-content:center; flex-direction:column; gap:10px; }
#vp.on { display:flex; }
#vp video { max-width:95vw; max-height:82vh; border-radius:10px; background:#000; }
#vp-info { color:rgba(255,255,255,.6); font-size:11px; text-align:center; }
#vp-x { position:fixed; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); border:none; color:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; z-index:99991; }
/* ─ PWA 설치 배너 ─ */
#install-bar { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--bg); border-top:1px solid var(--bdr2); padding:12px 16px; z-index:999941; align-items:center; gap:10px; box-shadow:0 -2px 12px rgba(0,0,0,.1); }
.install-bar-txt { flex:1; font-size:13px; color:var(--txt); }
.install-bar-txt small { display:block; font-size:11px; color:var(--txt2); }
.btn-install { padding:8px 16px; background:#F97316; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-install-x { width:28px; height:28px; background:none; border:none; color:var(--txt2); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; }
/* ─ 보관함 뱃지 ─ */
.avbadge { position:absolute; bottom:5px; right:5px; background:rgba(0,0,0,.65); color:#fff; font-size:9px; padding:2px 5px; border-radius:4px; display:flex; align-items:center; gap:3px; }
/* ─ 잠금 화면 ─ */
.lo { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; height:100%; }
.li { font-size:12px; padding:7px 10px; border:1px solid var(--bdr2); border-radius:var(--radius-sm); background:var(--bg2); color:var(--txt); outline:none; text-align:center; width:120px; letter-spacing:2px; font-family:inherit; }
.li:hover { background:var(--bg); border-color:#F97316; color:#F97316; }
.nm-pin-unlock-btn {
width: auto;
min-width: 104px;
max-width: 120px;
padding: 9px 14px;
line-height: 1.35;
letter-spacing: normal;
white-space: normal;
word-break: keep-all;
text-align: center;
}
.le { font-size:10px; color:var(--danger); min-height:14px; }
/* ─ 앱 레이아웃 ─ */
.wrap { padding:0 12px 80px; }
/* ─ 8방향 리사이즈 핸들 ─ */
.rsz { position:absolute; z-index:3; }
.rsz-se { bottom:0; right:0; width:16px; height:16px; cursor:se-resize; display:flex; align-items:center; justify-content:center; opacity:.45; }
.rsz-sw { bottom:0; left:0; width:16px; height:16px; cursor:sw-resize; }
.rsz-ne { top:0; right:0; width:16px; height:16px; cursor:ne-resize; }
.rsz-nw { top:0; left:0; width:16px; height:16px; cursor:nw-resize; }
.rsz-n { top:0; left:16px; right:16px; height:5px; cursor:n-resize; }
.rsz-s { bottom:0; left:16px; right:16px; height:5px; cursor:s-resize; }
.rsz-e { top:16px; right:0; width:5px; bottom:16px; cursor:e-resize; }
.rsz-w { top:16px; left:0; width:5px; bottom:16px; cursor:w-resize; }
.win:hover .rsz-se { opacity:.85; }
/* ─ PDF 카드 ─ */
.pdf-card {
display:flex; align-items:center; gap:8px;
padding:8px 10px; margin-top:6px;
border:1px solid #fecaca; border-radius:8px;
background:rgba(226,75,74,.05); text-decoration:none;
-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
transition:background .15s;
}
.pdf-card:hover { background:rgba(226,75,74,.1); }
/* ─ 보관함 PDF 목록 ─ */
.pdf-list-item {
display:flex; align-items:center; gap:10px;
padding:10px 12px; border:1px solid var(--bdr2);
border-radius:8px; background:var(--bg);
text-decoration:none; transition:background .15s;
}
.pdf-list-item:hover { background:var(--bg2); }
/* ─ PDF 배지 ─ */
.pdf-badge {
width: 38px; height: 38px; border-radius: 6px;
background: #e24b4a; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; flex-shrink: 0;
letter-spacing: .05em; box-shadow: 0 2px 6px rgba(226,75,74,.3);
}
/* ─ 렌더링 성능 최적화 ─ */
.wb {
will-change: scroll-position;
transform: translateZ(0); /* GPU 레이어 */
}
.mobbdy {
will-change: scroll-position;
transform: translateZ(0);
}
/* 각 메모 행 레이아웃 격리 (스크롤 성능 향상) */
.row {
contain: layout paint;
}
/* 이미지·영상 렌더링 최적화 */
.pimg img,
.mc img,
.apm,
.phci {
transform: translateZ(0);
backface-visibility: hidden;
}
/* 비디오 레이어 분리 */
.vmemo video,
#vp video {
transform: translateZ(0);
}
/* 스크롤 컨테이너 성능 */
.wb, .mobbdy {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* ─ 모바일 보내기 버튼 ─ */
.send-btn {
width: 36px; height: 36px; border-radius: 50%;
background: #F97316; color: #fff; border: none;
cursor: pointer; display: flex; align-items: center;
justify-content: center; flex-shrink: 0; font-size: 14px;
}
.send-btn:active { background: #EA6700; transform: scale(.95); }
/* ─ 폰트 CSS 변수 기본값 ─ */
:root {
--memo-size: 11px;
--memo-weight: 400;
--memo-style: normal;
--memo-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ─ 메모 텍스트에 폰트 변수 적용 ─ */
.rt, .ea, .rsub, .mobi, .mob-textarea, .memo-input {
font-size: var(--memo-size);
font-weight: var(--memo-weight);
font-style: var(--memo-style);
font-family: var(--memo-family);
}
.rsub { font-size: calc(var(--memo-size) - 1.5px); opacity: .78; font-weight: var(--memo-weight); font-style: var(--memo-style); }
/* ─ 폰트 버튼 ─ */
.font-btn {
display: flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 20px;
font-size: 11px; font-weight: 500;
border: 1px solid var(--bdr2); background: var(--bg);
color: var(--txt2); cursor: pointer; white-space: nowrap;
flex-shrink: 0; font-family: inherit;
transition: background .1s;
}
.font-btn:hover { background: var(--bg2); color: #F97316; border-color: #F97316; }
/* ─ 폰트 패널 ─ */
.font-panel {
display: none; position: fixed;
top: 54px; right: 14px;
background: var(--bg); border: 1px solid var(--bdr2);
border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.15);
padding: 14px 16px; z-index: 2147483000;
min-width: 260px; animation: fadeIn .15s ease;
}
.font-panel.open { display: block; }
.fp-panel-title {
font-size: 13px; font-weight: 800; color: var(--txt);
margin: 0 0 10px; letter-spacing: -.01em;
}
.fp-section { margin-bottom: 14px; }
.fp-section:last-child { margin-bottom: 0; }
.fp-label { font-size: 11px; color: var(--txt3); font-weight: 500;
text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.fp-row { display: flex; gap: 5px; flex-wrap: wrap; }
.fp-btn {
flex: 1; padding: 6px 8px; border: 1px solid var(--bdr2);
border-radius: 8px; background: var(--bg); color: var(--txt);
cursor: pointer; font-size: 12px; text-align: center;
font-family: inherit; transition: all .1s; min-width: 36px;
}
.fp-btn:hover { background: var(--bg2); }
.fp-btn.fp-active {
background: #F97316; color: #fff;
border-color: #F97316; font-weight: 600;
}
/* W3.91.166: 글씨 크기 1px 단위 스테퍼 */
.fp-size-stepper { align-items: center; gap: 8px; margin-top: 8px; }
.fp-step-btn {
width: 36px; height: 32px; border: 1px solid var(--bdr2);
border-radius: 8px; background: var(--bg); color: var(--txt);
cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1;
display: flex; align-items: center; justify-content: center;
font-family: inherit; transition: all .1s;
}
.fp-step-btn:hover { background: var(--bg2); border-color: #F97316; color: #F97316; }
.fp-step-btn:active { background: #F97316; color: #fff; border-color: #F97316; }
.fp-size-value {
min-width: 42px; text-align: center; font-size: 12px;
font-weight: 600; color: var(--txt2);
}
.fp-select {
width: 100%; padding: 7px 10px; border: 1px solid var(--bdr2);
border-radius: 8px; background: var(--bg); color: var(--txt);
font-size: 12px; cursor: pointer; font-family: inherit; outline: none;
}
.fp-select:focus { border-color: #F97316; }
.fp-size-preview {
text-align: center; padding: 8px; background: var(--bg2);
border-radius: 8px; color: var(--txt); margin-bottom: 8px;
font-family: var(--memo-family);
font-size: var(--memo-size);
font-weight: var(--memo-weight);
font-style: var(--memo-style);
line-height: 1.5;
}
/* ─ 메모판 테두리 리사이즈 — 테두리가 리사이즈 존임을 시각화 ─ */
.win {
/* 테두리에서 리사이즈 가능하다는 미묘한 힌트 */
box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 0 0 1px var(--bdr2);
}
.win:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 0 0 1.5px #F97316aa;
}
.win.nm-cal-win,
.win.nm-cal-win:hover {
box-shadow: 0 4px 16px rgba(15,23,42,.12) !important;
border: none !important;
}
/* ─ 로그인/회원가입 화면 ─ */
#auth-screen { display:none; position:fixed; inset:0; background:var(--bg); z-index:50000; overflow-y:auto; align-items:center; justify-content:center; }
#auth-screen.on { display:flex; }
.auth-tabs { display:flex; gap:0; margin-bottom:16px; border-radius:8px; overflow:hidden; border:1px solid var(--bdr2); }
.auth-tab { flex:1; padding:9px; font-size:13px; font-weight:500; background:var(--bg); color:var(--txt2); border:none; cursor:pointer; font-family:inherit; transition:background .15s,color .15s; }
.auth-tab.on { background:#F97316; color:#fff; }
.auth-recent-account { display:flex; align-items:center; gap:6px; margin:-6px 0 12px; padding:7px 8px; border:1px solid var(--bdr2); border-radius:10px; background:rgba(249,115,22,.06); }
.auth-recent-main { flex:1; min-width:0; border:0; background:transparent; color:var(--txt2); font-size:12px; text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:inherit; }
.auth-recent-main b { color:#F97316; font-weight:600; }
.auth-recent-clear { width:24px; height:24px; border:0; border-radius:50%; background:rgba(0,0,0,.06); color:var(--txt3); cursor:pointer; font-size:16px; line-height:1; }
.auth-login-options { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 10px; }
.auth-keep-login { margin:0 !important; }
.auth-login-option-note { color:var(--txt3); font-size:11px; white-space:nowrap; }
@media (max-width:600px) {
.auth-login-options { align-items:flex-start; flex-direction:column; gap:4px; }
.auth-login-option-note { white-space:normal; }
}
/* ─ thread 아이콘 작게 + 수정/삭제 버튼 ─ */
.thread-toggle { font-size:11px; padding:1px 5px; color:#F97316; opacity:.7; border:1px solid rgba(249,115,22,.3); border-radius:4px; background:rgba(249,115,22,.06); }
.thread-toggle:hover { opacity:1; background:rgba(249,115,22,.12); }
.th-act { background:none; border:none; cursor:pointer; color:var(--txt3); font-size:9px; padding:0 2px; opacity:0; transition:opacity .15s; }
.thread-entry:hover .th-act { opacity:1; }
.th-act:hover { color:var(--txt); }
.th-act.dng:hover { color:#e24b4a; }
/* ─ thread 글자 크기 + 날짜 숨김 ─ */
.thread-text { font-size: calc(var(--memo-size) - 1.5px) !important; color:#4b5563; font-weight: var(--memo-weight); font-style: var(--memo-style); font-family: var(--memo-family); }
.thread-date { display:none; }
.thread-entry:hover .thread-date { display:flex; align-items:center; gap:2px; font-size:9px; color:var(--txt3); }
/* ─ 완료 버튼 두 번 터치 - 깔끔하게 ─ */
.rbt.ok.pending {
background: #F97316 !important;
color: #fff !important;
width: 26px !important;
height: 26px !important;
padding: 0 !important;
border-radius: 50% !important;
animation: pulse-ok 0.6s ease infinite;
}
.ok-confirm { display:none; }
@keyframes pulse-ok {
0% { box-shadow: 0 0 0 0 rgba(249,115,22,.5); }
70% { box-shadow: 0 0 0 6px rgba(249,115,22,0); }
100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}
/* ─ 웹에서 + 버튼 숨김 ─ */
@media (min-width: 601px) { .ppb { display:none !important; } }
/* ─ 색상 태그 스트립 ─ */
.row-tag-btn { width:4px; min-width:4px; border-radius:6px 0 0 6px; cursor:pointer; flex-shrink:0; align-self:stretch; transition:width .15s, opacity .15s; opacity:.75; }
.row-tag-btn:hover { opacity:1; width:6px; min-width:6px; }
/* ─ 색상 태그 팝업 ─ */
.tag-picker { display:flex; flex-direction:column; gap:5px; background:var(--bg); border:1px solid var(--bdr2); border-radius:8px; padding:6px; box-shadow:0 4px 16px rgba(0,0,0,.15); position:fixed; z-index:99999; }
.tag-dot { width:14px; height:14px; border-radius:50%; cursor:pointer; transition:transform .1s; }
.tag-dot:hover { transform:scale(1.3); }
@media (max-width:600px) {
.row-tag-btn { width:8px; min-width:8px; }
.tag-picker { flex-direction:row; gap:8px; padding:8px 10px; }
.tag-dot { width:22px; height:22px; }
}
/* ─ 색상 태그 바 레이아웃 강제 수정 ─ */
.row { display:flex !important; padding:0 !important; overflow:hidden; }
.row .rm { flex:1; min-width:0; padding:6px 8px 6px 6px; }
.row-tag-btn { width:5px !important; min-width:5px !important; flex-shrink:0; align-self:stretch; cursor:pointer; transition:width .15s; }
.row-tag-btn:hover { width:8px !important; min-width:8px !important; }
@media (max-width:600px) {
.row-tag-btn { width:7px !important; min-width:7px !important; }
}
/* ─ thread ㄴ자 스타일 + 글자 크기 ─ */
.thread-list { margin:5px 0 2px; display:flex; flex-direction:column; gap:4px; border-left:none; padding-left:0; }
.thread-entry { display:flex; align-items:flex-start; gap:4px; padding-left:6px; }
.thread-dot { display:none; }
.thread-entry::before { content:'ㄴ'; font-size:10px; color:var(--txt3); flex-shrink:0; margin-top:1px; }
.thread-text { font-size: calc(var(--memo-size) - 1.5px) !important; color:#4b5563; line-height:1.5; white-space:pre-wrap; word-break:break-word; font-weight: var(--memo-weight); font-style: var(--memo-style); font-family: var(--memo-family); }
/* ─ thread 날짜 제거 + 수정/삭제 버튼 정리 ─ */
.thread-date { display:none !important; }
.thread-body { display:flex; align-items:flex-start; gap:4px; flex:1; }
.thread-acts { display:flex; gap:2px; flex-shrink:0; opacity:0; transition:opacity .15s; margin-top:1px; }
.thread-entry:hover .thread-acts { opacity:1; }
.th-act { background:none; border:none; cursor:pointer; color:var(--txt3); font-size:10px; padding:1px 3px; line-height:1; }
.th-act:hover { color:var(--txt); }
.th-act.dng:hover { color:#e24b4a; }
/* ─ 웹(데스크탑) 폰트 2포인트 축소 ─ */
@media (min-width: 601px) {
:root { --memo-size: 9px; }
}
/* ─ 웹 데스크탑 레이아웃 + 광고바 ─ */
@media (min-width: 601px) {
html, body { height: 100%; overflow: hidden; }
/* 앱 전체: 세로 flex */
#app {
display: flex !important;
flex-direction: column !important;
height: 100dvh !important;
overflow: hidden;
}
.status-bar { flex-shrink: 0; }
/* wrap: 세로 flex — tb(툴바)와 desk가 공간 나눔 */
.wrap {
flex: 1 !important;
min-height: 0 !important;
overflow: hidden;
display: flex !important;
flex-direction: column !important;
padding-bottom: 0 !important;
}
/* 툴바: 고정 높이 */
.tb { flex-shrink: 0 !important; }
/* desk: 나머지 공간 전부 차지 */
.desk {
flex: 1 !important;
min-height: 0 !important;
height: auto !important;
overflow: hidden;
margin-bottom: 0;
}
/* 광고바: 앱 하단 고정 */
#ad-bar {
flex-shrink: 0 !important;
height: 60px !important;
display: flex !important;
position: static !important;
align-items: center;
justify-content: center;
background: #f0f0f2;
border-top: 2px solid var(--bdr2);
font-size: 12px;
color: var(--txt3);
letter-spacing: 0.05em;
}
}
@media (max-width: 600px) {
#ad-bar { display: none !important; }
}
/* ─ PDF 파일명 폰트 더 작게 ─ */
@media (min-width: 601px) {
.pdf-card > div > div:first-child { font-size:7px !important; }
.pdf-card > div > div:last-child { font-size:7px !important; }
}
/* ─ PDF 폰트 9px (2포인트 증가) ─ */
@media (min-width: 601px) {
.pdf-card > div > div:first-child { font-size:13px !important; }
.pdf-card > div > div:last-child { font-size:12px !important; }
}
/* ─ 상태바 로고 ─ */
.st-logo {
height: 16px; width: auto;
margin-right: 2px;
vertical-align: middle;
opacity: 0.8;
filter: invert(1) brightness(0) saturate(100%) invert(52%) sepia(80%) saturate(600%) hue-rotate(1deg) brightness(95%);
}
/* 보관함 버튼 (툴바) */
.arch-btn {
display:flex; align-items:center; gap:4px;
padding:4px 10px; border-radius:20px;
background:var(--bg2); border:1px solid var(--bdr2);
font-size:11px; font-weight:500; color:var(--txt2);
cursor:pointer; margin-left:auto;
white-space:nowrap;
}
.arch-btn:hover { background:var(--bg3); }
/* 모바일 탭 활성/비활성 */
@media (max-width:600px) {
.chip { opacity:.4; }
.chip.fr { opacity:1; }
}
/* 추가 메모 (thread) 입력창 */
.thread-inp { font-size:13.5px !important; color:#F97316 !important; }
.thread-inp::placeholder { color:rgba(249,115,22,.45) !important; }
.thread-text { font-size:12.5px; color:#F97316; }
/* 보관함 버튼 숨김 (추후 활성화 예정) */
.arch-btn { display: none !important; }
/* NuMemo patch */
#lb-video { max-width:95vw; max-height:88vh; border-radius:8px; background:#000; }
#lb-img { transition: transform .12s ease; transform-origin:center center; }
/* W3.493: 뷰어에서 동영상 항목 자동재생 대신 보여주는 재생 버튼 */
.lb-play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:99963; pointer-events:auto; }
.lb-play-overlay i { font-size:56px; color:#fff; background:rgba(0,0,0,.45); border-radius:50%; padding:18px; text-shadow:0 2px 8px rgba(0,0,0,.4); }
@media (max-width:600px){
.lb-play-overlay i { font-size:40px; padding:14px; }
}
@media (max-width:600px){ .thread-inp{font-size:12.5px!important}.thread-text{font-size:11px!important} }
/* ══ NuMemo Debug CCTV: ERUDA 보조용 내부 감시 패널 ══ */
#numemo-cctv-btn{
position:fixed; right:14px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:99980;
width:48px; height:48px; border:0; border-radius:999px;
background:linear-gradient(135deg,#111827,#374151); color:#fff;
box-shadow:0 10px 28px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center;
font-size:20px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
}
#numemo-cctv-btn.cctv-warn{background:linear-gradient(135deg,#B91C1C,#F97316)}
#numemo-cctv-btn .cctv-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#EF4444;color:#fff;font-size:10px;line-height:18px;font-weight:800}
#numemo-cctv-panel{position:fixed;left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));max-height:min(72vh,620px);z-index:99990;background:rgba(17,24,39,.96);color:#E5E7EB;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.38);overflow:hidden;display:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#numemo-cctv-panel.on{display:flex;flex-direction:column}
.cctv-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(0,0,0,.28);border-bottom:1px solid rgba(255,255,255,.1)}
.cctv-title{font-weight:900;font-size:13px;letter-spacing:-.2px}.cctv-sub{font-size:10px;color:#9CA3AF;flex:1}.cctv-head button{border:0;border-radius:8px;padding:6px 8px;background:#374151;color:#fff;font-size:11px;cursor:pointer}
.cctv-head button.danger{background:#7F1D1D}.cctv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.cctv-card{background:rgba(255,255,255,.06);border-radius:10px;padding:8px;min-width:0}.cctv-k{font-size:10px;color:#9CA3AF;margin-bottom:4px}.cctv-v{font-size:11px;color:#F9FAFB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cctv-ok{color:#34D399}.cctv-bad{color:#F87171}.cctv-log{padding:8px 10px;overflow:auto;font-size:11px;line-height:1.45;overscroll-behavior:contain}.cctv-line{border-bottom:1px dashed rgba(255,255,255,.08);padding:3px 0;word-break:break-word}.cctv-line.err{color:#FCA5A5}.cctv-line.warn{color:#FCD34D}.cctv-line.touch{color:#93C5FD}.cctv-line.sys{color:#A7F3D0}
@media(min-width:768px){#numemo-cctv-panel{left:auto;width:430px;right:18px}.cctv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ─ v30: 일반메모/추가메모 수정 확인 체크 강제 복구 ─ */
.ea-wrap { position: relative !important; }
.ea-ok {
position:absolute !important; right:5px !important; bottom:6px !important;
width:26px !important; height:26px !important; min-width:26px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
background:#F97316 !important; color:#fff !important; border:0 !important;
border-radius:7px !important; z-index:30 !important; opacity:1 !important; pointer-events:auto !important;
}
.thread-edit-wrap { display:inline-flex !important; align-items:center !important; gap:4px !important; max-width:100% !important; vertical-align:middle !important; }
.thread-edit-inp { flex:1 1 auto !important; min-width:80px !important; max-width:calc(100% - 32px) !important; }
.thread-edit-ok {
width:24px !important; height:24px !important; min-width:24px !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
background:#F97316 !important; color:#fff !important; border:0 !important;
border-radius:6px !important; padding:0 !important; cursor:pointer !important;
opacity:1 !important; pointer-events:auto !important; z-index:30 !important;
}
.thread-edit-ok i { font-size:14px !important; }
@media (max-width:600px){
.ea-ok { width:30px !important; height:30px !important; min-width:30px !important; right:6px !important; bottom:7px !important; }
.thread-edit-ok { width:28px !important; height:28px !important; min-width:28px !important; }
}
/* v33: 사진/동영상 뷰어 검은화면 방지 및 로딩/오류 표시 */
#lb { z-index:99960; }
#vp { z-index:99960; }
#lb-img { display:block; max-width:95vw; max-height:95vh; object-fit:contain; position:relative; z-index:1; }
#lb-video { display:block; max-width:95vw; max-height:88vh; position:relative; z-index:1; }
#lb-msg { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:99962; color:#fff; background:rgba(17,24,39,.78); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:12px 14px; font-size:13px; text-align:center; max-width:min(82vw,420px); pointer-events:auto; }
#numemo-cctv-panel{ z-index:99990; }
#numemo-cctv-btn{ z-index:99991; }
/* v35: 갤럭시 앨범 참고형 사진/영상 갤러리 뷰어 */
#lb.lb-gallery{
display:none; position:fixed; inset:0; background:#050505; z-index:99960;
align-items:center; justify-content:center; cursor:default; overflow:hidden; touch-action:none;
}
#lb.lb-gallery.on{display:flex;}
#lb-topbar{
position:fixed; top:0; left:0; right:0; height:58px; padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
display:flex; align-items:center; gap:10px; color:#fff; z-index:99965;
background:linear-gradient(to bottom, rgba(0,0,0,.58), rgba(0,0,0,0));
box-sizing:content-box;
}
.lb-icon-btn,#lb-x{
width:40px!important; height:40px!important; min-width:40px!important; border:0!important; border-radius:999px!important;
background:rgba(255,255,255,.10)!important; color:#fff!important; display:flex!important; align-items:center!important; justify-content:center!important;
font-size:22px!important; cursor:pointer!important; backdrop-filter:blur(6px);
}
#lb-back{background:rgba(249,115,22,.18)!important;}
#lb-x{position:fixed!important; top:calc(10px + env(safe-area-inset-top))!important; right:12px!important; z-index:99999!important;}
#lb-title{font-size:14px; font-weight:800; letter-spacing:-.2px; min-width:0; flex:1; color:#fff; opacity:.94;}
#lb-counter{position:static!important; transform:none!important; background:rgba(249,115,22,.18)!important; color:#fff!important; border:1px solid rgba(249,115,22,.35)!important; padding:5px 10px!important; border-radius:999px!important; font-size:12px!important; font-weight:800!important; backdrop-filter:blur(6px); margin-right:48px;}
#lb-stage{position:absolute; inset:58px 0 116px; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; z-index:99961;}
#lb-img{max-width:100vw!important; max-height:calc(100vh - 190px)!important; object-fit:contain!important; border-radius:0!important; user-select:none!important; -webkit-user-drag:none!important; touch-action:none!important; transition:transform .12s ease;}
#lb-video{max-width:100vw!important; max-height:calc(100vh - 190px)!important; background:#000!important; border-radius:0!important; z-index:99962;}
#lb-prev,#lb-next{
position:fixed!important; top:50%!important; transform:translateY(-50%)!important; z-index:99966!important;
width:44px!important; height:56px!important; border-radius:14px!important; border:1px solid rgba(249,115,22,.45)!important;
background:rgba(249,115,22,.72)!important; color:#fff!important; display:flex!important; align-items:center!important; justify-content:center!important;
box-shadow:0 10px 30px rgba(0,0,0,.26); cursor:pointer!important;
}
#lb-prev{left:12px!important;} #lb-next{right:12px!important;}
#lb-prev:hover,#lb-next:hover{background:#F97316!important; transform:translateY(-50%) scale(1.04)!important;}
#lb-thumbs{
position:fixed; left:0; right:0; bottom:calc(56px + env(safe-area-inset-bottom)); height:58px; z-index:99965;
display:flex; gap:8px; align-items:center; overflow-x:auto; padding:7px 14px; box-sizing:border-box;
background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); scrollbar-width:none;
}
#lb-thumbs::-webkit-scrollbar{display:none;}
.lb-thumb{position:relative; width:44px; height:44px; min-width:44px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; background:#111; cursor:pointer; opacity:.72;}
.lb-thumb.on{border-color:#F97316; opacity:1; box-shadow:0 0 0 2px rgba(249,115,22,.25);}
.lb-thumb img,.lb-thumb video{width:100%; height:100%; object-fit:cover; display:block;}
.lb-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.22); font-size:14px;}
#lb-actions{
position:fixed; left:0; right:0; bottom:env(safe-area-inset-bottom); height:56px; z-index:99965;
display:flex; align-items:center; justify-content:center; gap:34px; background:rgba(0,0,0,.72); backdrop-filter:blur(8px);
}
.lb-action-btn{border:0; background:transparent; color:#fff; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:58px; cursor:pointer; font-size:11px; font-weight:700;}
.lb-action-btn i{font-size:22px; color:#F97316;}
.lb-action-btn.danger i{color:#FF6B4A;}
#lb-msg{z-index:99967!important;}
@media(max-width:600px){
#lb-prev,#lb-next{display:none!important;}
#lb-stage{inset:60px 0 118px;}
#lb-img,#lb-video{max-height:calc(100vh - 205px)!important;}
#lb-counter{margin-right:44px;font-size:11px!important;padding:4px 8px!important;}
}
@media(min-width:601px){
#lb-thumbs{height:72px; bottom:calc(62px + env(safe-area-inset-bottom)); justify-content:center;}
.lb-thumb{width:54px;height:54px;min-width:54px;}
#lb-actions{height:62px;}
#lb-stage{inset:64px 70px 140px;}
}
/* v37: 뷰어 종료 버튼 브랜드 색상 강화 */
#lb-x{
background:linear-gradient(135deg,#ff7a1a,#f97316)!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.18)!important;
box-shadow:0 8px 22px rgba(249,115,22,.34)!important;
}
#lb-x:hover{filter:brightness(1.08); transform:scale(1.04);}
/* ═══════════════════════════════════════════════════════════════
v43 — 전역 Safe-Area 시스템화
목적: Android/Capacitor/Galaxy 하단바·상단바와 모든 하단 UI 겹침 방지
═══════════════════════════════════════════════════════════════ */
:root{
--nm-safe-top: max(0px, env(safe-area-inset-top));
--nm-safe-right: max(0px, env(safe-area-inset-right));
--nm-safe-bottom: max(0px, env(safe-area-inset-bottom));
--nm-safe-left: max(0px, env(safe-area-inset-left));
--nm-cap-bottom: max(34px, env(safe-area-inset-bottom));
--nm-bottom-gap: 12px;
--nm-bottom-ui: calc(var(--nm-safe-bottom) + var(--nm-bottom-gap));
}
html.capacitor{
--nm-safe-bottom: var(--nm-cap-bottom);
--nm-bottom-ui: calc(var(--nm-cap-bottom) + var(--nm-bottom-gap));
}
/* 페이지 전체 기본 여백 */
html, body{ min-height:100%; }
body{
padding-left: var(--nm-safe-left) !important;
padding-right: var(--nm-safe-right) !important;
padding-bottom: var(--nm-safe-bottom) !important;
}
/* 공통 하단 고정 UI는 시스템 하단바 위로 */
#install-bar,
.ptst{
bottom: var(--nm-bottom-ui) !important;
}
/* 디버그 CCTV */
#numemo-cctv-btn{
right: calc(14px + var(--nm-safe-right)) !important;
bottom: calc(18px + var(--nm-safe-bottom)) !important;
}
#numemo-cctv-panel{
left: calc(8px + var(--nm-safe-left)) !important;
right: calc(8px + var(--nm-safe-right)) !important;
bottom: calc(76px + var(--nm-safe-bottom)) !important;
}
@media(min-width:768px){
#numemo-cctv-panel{ left:auto !important; right:calc(18px + var(--nm-safe-right)) !important; }
}
/* 풀스크린 라이트박스/갤러리 상단·하단 통합 */
#lb-topbar{
padding-top: calc(8px + var(--nm-safe-top)) !important;
padding-left: calc(12px + var(--nm-safe-left)) !important;
padding-right: calc(12px + var(--nm-safe-right)) !important;
}
#lb-x{
top: calc(10px + var(--nm-safe-top)) !important;
right: calc(12px + var(--nm-safe-right)) !important;
}
#lb-prev{ left: calc(12px + var(--nm-safe-left)) !important; }
#lb-next{ right: calc(12px + var(--nm-safe-right)) !important; }
#lb-thumbs{
left: var(--nm-safe-left) !important;
right: var(--nm-safe-right) !important;
bottom: calc(56px + var(--nm-safe-bottom)) !important;
padding-left: calc(14px + var(--nm-safe-left)) !important;
padding-right: calc(14px + var(--nm-safe-right)) !important;
}
#lb-actions{
left: var(--nm-safe-left) !important;
right: var(--nm-safe-right) !important;
bottom: var(--nm-safe-bottom) !important;
padding-bottom: 0 !important;
}
#lb-stage{
inset: calc(58px + var(--nm-safe-top)) var(--nm-safe-right) calc(116px + var(--nm-safe-bottom)) var(--nm-safe-left) !important;
}
#lb-img,#lb-video{
max-height: calc(100vh - 190px - var(--nm-safe-top) - var(--nm-safe-bottom)) !important;
}
@media(max-width:600px){
#lb-stage{ inset: calc(60px + var(--nm-safe-top)) var(--nm-safe-right) calc(118px + var(--nm-safe-bottom)) var(--nm-safe-left) !important; }
#lb-img,#lb-video{ max-height: calc(100vh - 205px - var(--nm-safe-top) - var(--nm-safe-bottom)) !important; }
}
@media(min-width:601px){
#lb-thumbs{ bottom: calc(62px + var(--nm-safe-bottom)) !important; }
#lb-stage{ inset: calc(64px + var(--nm-safe-top)) calc(70px + var(--nm-safe-right)) calc(140px + var(--nm-safe-bottom)) calc(70px + var(--nm-safe-left)) !important; }
}
/* 모바일/Capacitor에서 데스크 영역이 하단 시스템바에 가려지지 않도록 */
html.capacitor .desk,
body.capacitor .desk{
height: calc(100dvh - 80px - var(--nm-safe-bottom)) !important;
}
/* 하단 입력창/메모판 하단 요소 계열 방어 */
html.capacitor .mi,
html.capacitor .minp,
html.capacitor .memo-input,
html.capacitor .input-row,
html.capacitor .bottom-input,
html.capacitor .fixed-bottom,
html.capacitor .bottom-bar,
html.capacitor .mobile-bottom-bar{
margin-bottom: max(0px, calc(var(--nm-safe-bottom) - 8px)) !important;
}
/* 모달/시트 하단 액션 공통 방어 */
html.capacitor .modal-actions,
html.capacitor .sheet-actions,
html.capacitor .bottom-actions,
html.capacitor .modal-bottom,
html.capacitor .action-bottom{
padding-bottom: calc(12px + var(--nm-safe-bottom)) !important;
}
/* 사진 선택/업로드 모달 전역 보강 */
html.capacitor #php .phm{
height: 100dvh !important;
max-height: 100dvh !important;
padding-top: var(--nm-safe-top) !important;
padding-bottom: var(--nm-safe-bottom) !important;
}
html.capacitor #php .ph-bottom{
bottom: var(--nm-safe-bottom) !important;
padding-bottom: 12px !important;
}
html.capacitor #php .ph-scroll{
padding-bottom: calc(124px + var(--nm-safe-bottom)) !important;
}
/* 향후 새 UI에 붙여 쓸 수 있는 공통 클래스 */
.nm-safe-top{ padding-top: var(--nm-safe-top) !important; }
.nm-safe-bottom{ padding-bottom: var(--nm-safe-bottom) !important; }
.nm-fixed-bottom-safe{ bottom: var(--nm-safe-bottom) !important; }
.nm-floating-bottom-safe{ bottom: calc(18px + var(--nm-safe-bottom)) !important; }
/* v44 — APK 전체 하단 정렬 최종 오버라이드 */
@media (max-width:600px){
html.capacitor{ --nm-cap-bottom: max(52px, env(safe-area-inset-bottom)); --nm-safe-bottom: var(--nm-cap-bottom); }
html.capacitor body{ padding-bottom:0 !important; }
html.capacitor .status-bar{ flex-shrink:0 !important; }
}
/* ─ v46: 파일/미디어 메모 카드 균형 정리 ─
문서 카드 폰트는 메모장 글씨 크기와 연동하고,
사진/영상/문서 메모의 상하 여백을 줄여 중앙 정렬감을 높인다. */
:root {
--memo-file-size: var(--memo-size, 11px);
--memo-file-meta-size: calc(var(--memo-file-size) * .86);
}
.row .rm { align-items: center; }
.row .rb { display:flex; flex-direction:column; justify-content:center; }
.pdf-card {
align-items:center;
gap:7px;
padding:6px 8px;
margin-top:4px;
margin-bottom:2px;
min-height:52px;
}
.pdf-card .pdf-title,
.pdf-card > div > div:first-child {
font-size:var(--memo-file-size) !important;
line-height:1.28 !important;
}
.pdf-card .pdf-meta,
.pdf-card > div > div:last-child {
font-size:var(--memo-file-meta-size) !important;
line-height:1.25 !important;
margin-top:2px !important;
}
.pdf-badge { width:34px; height:34px; border-radius:7px; font-size:9px; }
.pimg, .mig, .vmemo { margin-top:4px; margin-bottom:2px; }
.mig { gap:3px; align-items:center; }
.mc { display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:4px; }
.mc img { border-radius:4px; }
.vmemo { min-height:54px; }
.vmemo video { max-height:150px; }
.rsub { margin-top:2px; }
@media (max-width:600px) {
.row .rm { padding-top:5px !important; padding-bottom:5px !important; }
.pdf-card { padding:6px 8px; min-height:50px; }
.pdf-badge { width:32px; height:32px; font-size:8.5px; }
.pimg, .mig, .vmemo { margin-top:3px; margin-bottom:1px; }
}
/* v47 — 사진 뷰어 확대/이동 */
#lb-stage{ cursor: default; }
#lb-img{
will-change: transform !important;
transform-origin: center center !important;
cursor: zoom-in !important;
}
#lb-img.zoomed{
cursor: grab !important;
}
#lb-stage:active #lb-img.zoomed{
cursor: grabbing !important;
}
/* v48 — 웹 사진 확대 후 마우스 드래그 이동 강화 */
#lb-stage.lb-pan-enabled{
cursor: grab !important;
user-select: none !important;
-webkit-user-select: none !important;
}
#lb-stage.lb-pan-enabled:active{
cursor: grabbing !important;
}
#lb-img{
-webkit-user-drag: none !important;
user-drag: none !important;
user-select: none !important;
-webkit-user-select: none !important;
pointer-events: auto !important;
}
#lb-img.zoomed{
cursor: grab !important;
}
#lb-stage:active #lb-img.zoomed,
#lb-img.zoomed:active{
cursor: grabbing !important;
}
/* v49: 사진/영상 뷰어 상단바 정렬·X 버튼 슬림화·우클릭 허용 보강 */
#lb-topbar{
height:50px!important;
min-height:50px!important;
padding-top:calc(7px + var(--nm-safe-top, env(safe-area-inset-top)))!important;
padding-bottom:7px!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
box-sizing:content-box!important;
}
#lb-back.lb-icon-btn{
width:34px!important;
height:34px!important;
min-width:34px!important;
font-size:19px!important;
background:rgba(249,115,22,.22)!important;
box-shadow:0 4px 12px rgba(0,0,0,.22)!important;
}
#lb-title{
display:flex!important;
align-items:center!important;
height:34px!important;
line-height:34px!important;
font-size:15px!important;
font-weight:800!important;
flex:1 1 auto!important;
}
#lb-counter{
height:28px!important;
min-width:auto!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin-right:42px!important;
padding:0 9px!important;
line-height:28px!important;
font-size:12px!important;
border-radius:999px!important;
background:rgba(249,115,22,.24)!important;
border:1px solid rgba(249,115,22,.38)!important;
box-shadow:0 4px 12px rgba(0,0,0,.18)!important;
}
#lb-x{
width:34px!important;
height:34px!important;
min-width:34px!important;
top:calc(15px + var(--nm-safe-top, env(safe-area-inset-top)))!important;
right:calc(12px + var(--nm-safe-right, env(safe-area-inset-right)))!important;
font-size:18px!important;
border-radius:999px!important;
background:linear-gradient(135deg,#ff8a2a,#f97316)!important;
box-shadow:0 5px 14px rgba(249,115,22,.28)!important;
}
#lb-x i{font-size:18px!important;line-height:1!important;}
#lb-stage img#lb-img,
#lb-stage video#lb-video{
-webkit-touch-callout:default!important;
pointer-events:auto!important;
}
@media(max-width:600px){
#lb-counter{margin-right:40px!important;font-size:11px!important;padding:0 8px!important;height:26px!important;line-height:26px!important;}
#lb-title{font-size:14px!important;}
#lb-back.lb-icon-btn,#lb-x{width:32px!important;height:32px!important;min-width:32px!important;}
#lb-x{top:calc(16px + var(--nm-safe-top, env(safe-area-inset-top)))!important;}
}
/* v50 — 메모 우측 액션 버튼 위치 복구 + 모바일 회전 방지 보강 */
/* v46에서 파일/미디어 카드 중앙 정렬을 보강하면서 우측 체크/삭제가 중간으로 내려간 문제를 복구한다. */
.row .rm {
align-items:flex-start !important;
}
.row .ra {
align-self:flex-start !important;
justify-content:flex-start !important;
padding-top:2px !important;
margin-top:0 !important;
}
.row .rb {
min-height:0;
}
/* 사진/영상/문서가 있는 메모도 액션 버튼은 항상 우측 상단 기준 */
.row:has(.pimg) .ra,
.row:has(.mig) .ra,
.row:has(.vmemo) .ra,
.row:has(.pdf-card) .ra {
align-self:flex-start !important;
padding-top:2px !important;
}
/* v57: 영상 썸네일 분리 최적화 */
.vmemo-ph{width:100%;height:120px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,122,24,.16),rgba(0,0,0,.08));color:var(--acc);font-size:34px;border-radius:10px;}
.lb-video-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,122,24,.12);color:var(--acc);font-size:18px;}
/* v59: 모바일/APK 영상 업로드 진행 상태 HUD */
.upload-hud{
position:fixed;
left:12px;
right:12px;
bottom:calc(env(safe-area-inset-bottom,0px) + 82px);
z-index:999999;
display:none;
pointer-events:none;
}
.upload-hud.on{display:block;}
.upload-hud-card{
max-width:520px;
margin:0 auto;
background:rgba(20,24,31,.96);
color:#fff;
border-radius:16px;
padding:13px 14px;
box-shadow:0 12px 34px rgba(0,0,0,.32);
border:1px solid rgba(255,255,255,.08);
}
.upload-hud-title{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
font-weight:800;
margin-bottom:9px;
}
.upload-hud-bar{
height:6px;
background:rgba(255,255,255,.16);
border-radius:999px;
overflow:hidden;
}
.upload-hud-bar>div{
height:100%;
background:var(--acc,#ff6b15);
border-radius:999px;
transition:width .18s ease;
}
.upload-hud-meta{
margin-top:7px;
font-size:11px;
color:rgba(255,255,255,.72);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* v66: 메모/추가메모 수정 확인 체크 터치 안정화 */
.ea-ok,
.thread-edit-ok {
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
@media (max-width:600px){
.ea-ok { width:34px !important; height:34px !important; min-width:34px !important; border-radius:9px !important; }
.thread-edit-ok { width:32px !important; height:32px !important; min-width:32px !important; border-radius:8px !important; }
}
/* v71: duplicate document highlight */
.doc-dup-flash{box-shadow:0 0 0 3px rgba(249,115,22,.35)!important;animation:docDupPulse .8s ease-in-out 2}
@keyframes docDupPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
/* v72 문서 카드 다운로드/열기 상태 */
.pdf-download-btn{
width:34px;
height:34px;
border:0;
background:rgba(255,255,255,.72);
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
cursor:pointer;
box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.pdf-download-btn:active{ transform:scale(.96); }
.pdf-open-hint{
color:var(--txt3);
font-size:var(--memo-file-meta-size);
white-space:nowrap;
flex-shrink:0;
}
/* v79: 메모 문구 클릭영역과 메모 카드 여백 완전 분리
- .row/.rb/.pdf-card 여백은 건드리지 않음
- 글자 클릭영역만 문장 끝에서 끊기도록 rt-line만 inline-block 처리
- 빈 공간은 row 롱프레스가 받을 수 있게 남김 */
.rt-line {
display:inline-block !important;
width:auto !important;
max-width:100% !important;
margin:0 !important;
padding:0 !important;
vertical-align:top !important;
}
.rt {
display:inline !important;
width:auto !important;
max-width:100%;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
.rt-line::after { content:none !important; display:none !important; }
/* v80: 메모 여백 정상화 강제 패치
목적: v76~v79의 글자 hitbox 수정과 메모 카드 여백을 완전히 분리한다.
- 텍스트 없는 문서/사진/영상 메모의 빈 본문 줄 제거는 memo.js에서 처리
- 메모 박스 자체 상하 여백은 기본 컴팩트 기준으로 강제
- 문구 hitbox는 span(.rt)만 문장 끝까지만 잡히고, 줄 전체는 빈 공간으로 남긴다. */
.row { padding:0 !important; }
.row .rm {
align-items:flex-start !important;
padding:4px 8px 4px 6px !important;
}
.row .rb {
display:block !important;
justify-content:flex-start !important;
min-height:0 !important;
}
.row .ra {
align-self:flex-start !important;
padding-top:0 !important;
margin-top:0 !important;
}
.rt-line {
display:block !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:0 !important;
line-height:1.5 !important;
}
.rt {
display:inline !important;
width:auto !important;
max-width:100% !important;
padding:1px 2px !important;
margin:-1px -2px !important;
box-decoration-break:clone !important;
-webkit-box-decoration-break:clone !important;
}
.pdf-card {
margin-top:0 !important;
margin-bottom:2px !important;
}
.pimg, .mig, .vmemo {
margin-top:0 !important;
margin-bottom:2px !important;
}
.rsub { margin-top:2px !important; }
@media (max-width:600px){
.row .rm { padding-top:4px !important; padding-bottom:4px !important; }
.pdf-card { margin-top:0 !important; margin-bottom:2px !important; }
.pimg, .mig, .vmemo { margin-top:0 !important; margin-bottom:2px !important; }
}
/* v82: tighter memo text line-height only
- Keep v80 spacing/padding/attachment layout unchanged
- Tighten mobile memo text readability density */
.rt,
.rt-line {
line-height: 1.30 !important;
}
.ea {
line-height: 1.35 !important;
}
@media (max-width: 600px) {
.rt,
.rt-line {
line-height: 1.24 !important;
}
.ea {
line-height: 1.30 !important;
}
}
/* ─────────────────────────────────────────────
v83: WEB AD INNER GAP HARD REMOVE
목적: 웹/데스크탑에서 광고 영역 바로 위에 생기는 불필요한 내부 빈 공간만 제거
주의: APK/mobile safe-area, 메모 카드 여백, 문단 hitbox, 첨부카드 여백은 건드리지 않음
───────────────────────────────────────────── */
@media (min-width: 601px) {
/* 앱 전체 레이아웃을 상태바 / 작업영역 / 광고영역 3단으로 고정 */
#app {
display: flex !important;
flex-direction: column !important;
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
gap: 0 !important;
}
/* 광고 영역 위의 불필요한 여백이 생기지 않도록 작업영역을 정확히 남은 공간에 맞춤 */
#app > .wrap {
flex: 1 1 auto !important;
min-height: 0 !important;
margin: 0 !important;
padding-bottom: 0 !important;
gap: 0 !important;
overflow: hidden !important;
}
#app > .wrap > .desk {
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
bottom: auto !important;
}
/* 광고 영역은 딱 자기 높이만 차지하고, 위쪽 margin/padding을 만들지 않음 */
#ad-bar {
flex: 0 0 60px !important;
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
margin: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
position: static !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 혹시 광고 바로 위에 끼어드는 숨은 여백 요소 방지 */
#ad-bar::before,
#ad-bar::after {
content: none !important;
display: none !important;
}
}
/* ─────────────────────────────────────────────
v94: 중요도 색상 탭 고정 크기 + 입력 포커스 시에만 표시
- 웹/앱 공통
- Realtime/광고/하단 safe-area 수정 없음
───────────────────────────────────────────── */
/* 웹 입력창 중요도 바: 작고 정갈한 고정 pill */
.web-draft-tags {
justify-content: flex-start !important;
gap: 9px !important;
padding: 0 34px 6px 0 !important;
}
.web-draft-tags .mob-draft-tag {
flex: 0 0 42px !important;
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 8px !important;
min-height: 8px !important;
border-radius: 999px !important;
}
.web-draft-tags .mob-draft-tag:hover {
height: 9px !important;
}
.web-draft-tags .mob-draft-tag.on {
height: 10px !important;
border: 2px solid #F97316 !important;
}
/* 모바일/앱 입력창 중요도 바: 손가락에 부담 없는 작은 고정 pill */
.mob-draft-tags {
justify-content: center !important;
gap: 8px !important;
}
.mob-draft-tag {
flex: 0 0 34px !important;
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
height: 8px !important;
min-height: 8px !important;
border-radius: 999px !important;
}
.mob-draft-tag.on {
height: 10px !important;
border: 2px solid #F97316 !important;
}
/* ─────────────────────────────────────────────
v101: Media Viewer State Machine CSS
───────────────────────────────────────────── */
#lb.on {
pointer-events: auto !important;
}
#lb:not(.on) {
pointer-events: none !important;
}
#lb-stage {
pointer-events: auto !important;
touch-action: none !important;
}
#lb-prev,
#lb-next,
#lb-back,
#lb-x,
#lb-actions,
#lb-share,
#lb-delete {
pointer-events: auto !important;
}
#lb-thumbs {
pointer-events: auto !important;
touch-action: pan-x !important;
overscroll-behavior-x: contain !important;
-webkit-overflow-scrolling: touch !important;
}
.lb-thumb {
pointer-events: auto !important;
touch-action: manipulation !important;
}
#lb-img,
#lb-video {
pointer-events: auto !important;
}
/* ─────────────────────────────────────────────
v109: 파일 공유 롱프레스 팝업 터치 안정화
───────────────────────────────────────────── */
#file-share-menu.on,
#file-share-menu.file-share-menu-open {
pointer-events: auto !important;
}
#file-share-menu.on .fsm-backdrop,
#file-share-menu.on .fsm-sheet,
#file-share-menu.on .fsm-item,
#file-share-menu.file-share-menu-open .fsm-backdrop,
#file-share-menu.file-share-menu-open .fsm-sheet,
#file-share-menu.file-share-menu-open .fsm-item {
pointer-events: auto !important;
}
#file-share-menu:not(.on):not(.file-share-menu-open) {
pointer-events: none !important;
}
.fsm-sheet {
touch-action: manipulation !important;
}
.fsm-item {
touch-action: manipulation !important;
-webkit-tap-highlight-color: rgba(249,115,22,.12);
}
/* ─────────────────────────────────────────────
v110: 단일 이미지 카드 크기 제한
- 단일 이미지가 메모장 전체폭으로 강제 확대되어 깨져 보이는 문제 방지
- 2장 이미지 카드와 비슷한 시각 크기로 제한
- 라이트박스/업로드/동기화 로직 수정 없음
───────────────────────────────────────────── */
/* 단일 이미지 전용 카드 */
.pimg {
width: fit-content !important;
max-width: min(270px, 72vw) !important;
margin-top: 6px !important;
margin-left: 0 !important;
border-radius: 8px !important;
overflow: hidden !important;
background: var(--bg2) !important;
border: 1px solid var(--bdr3) !important;
}
/* 단일 이미지가 원본보다 과하게 커지지 않도록 카드 안에서만 표시 */
.pimg img {
width: auto !important;
max-width: min(270px, 72vw) !important;
max-height: 330px !important;
height: auto !important;
object-fit: contain !important;
border-radius: 8px !important;
display: block !important;
background: #111 !important;
}
/* 기존 그리드가 1장으로 렌더되는 경우도 동일하게 제한 */
.mig.c1 {
width: fit-content !important;
max-width: min(270px, 72vw) !important;
grid-template-columns: minmax(120px, min(270px, 72vw)) !important;
border-radius: 8px !important;
border: 1px solid var(--bdr3) !important;
background: var(--bg2) !important;
}
.mig.c1 .mc img {
width: auto !important;
max-width: min(270px, 72vw) !important;
max-height: 330px !important;
height: auto !important;
object-fit: contain !important;
border-radius: 8px !important;
background: #111 !important;
}
/* 2장 이상 그리드는 기존처럼 메모 폭 활용 */
.mig.c2,
.mig.c3,
.mig.c5 {
width: 100% !important;
max-width: none !important;
border: none !important;
background: transparent !important;
}
/* 모바일에서는 손가락 터치와 시인성을 고려해 살짝 크게 */
@media (max-width: 600px) {
.pimg,
.mig.c1 {
max-width: min(230px, 64vw) !important;
}
.pimg img,
.mig.c1 .mc img {
max-width: min(230px, 64vw) !important;
max-height: 300px !important;
}
}
/* ─────────────────────────────────────────────
v111: 모바일 터치 고착 복구 보강
───────────────────────────────────────────── */
#memo-long-menu,
.memo-long-menu-backdrop,
.memo-long-menu,
#file-share-menu.on,
#file-share-menu.file-share-menu-open {
pointer-events: auto !important;
}
#file-share-menu:not(.on):not(.file-share-menu-open),
#lb:not(.on),
#vp:not(.on),
#arch:not(.on),
#setup:not(.on),
#php:not(.on),
#mob-media-sheet:not(.on) {
pointer-events: none !important;
}
html.capacitor body,
html.capacitor #app,
html.capacitor #mv,
html.capacitor .mbody,
html.capacitor .win {
touch-action: pan-y manipulation;
}
/* ─────────────────────────────────────────────
v112: 모바일 카메라/동영상/앨범 바텀시트 안정화
───────────────────────────────────────────── */
#mob-media-sheet.on,
#mob-media-sheet.mob-media-sheet-open {
pointer-events: auto !important;
}
#mob-media-sheet.on .mam-backdrop,
#mob-media-sheet.on .mam-sheet,
#mob-media-sheet.on .mob-media-btn,
#mob-media-sheet.mob-media-sheet-open .mam-backdrop,
#mob-media-sheet.mob-media-sheet-open .mam-sheet,
#mob-media-sheet.mob-media-sheet-open .mob-media-btn {
pointer-events: auto !important;
}
#mob-media-sheet:not(.on):not(.mob-media-sheet-open) {
pointer-events: none !important;
}
#mob-media-inner {
will-change: transform;
touch-action: pan-y !important;
}
#mob-media-inner .mam-handle {
height: 16px !important;
margin-top: 8px !important;
margin-bottom: 8px !important;
cursor: grab;
}
.mob-media-btn {
touch-action: manipulation !important;
-webkit-tap-highlight-color: rgba(249,115,22,.12);
}
/* ─────────────────────────────────────────────
v115: 모바일 사진/동영상 선택 플로우 리뉴얼
- 모바일에서는 시스템 갤러리/카메라를 직접 열고, legacy #php 패널 고착을 차단
───────────────────────────────────────────── */
html.capacitor #php:not(.force-open) {
pointer-events: none !important;
}
html.capacitor #php:not(.force-open):not(.on) {
display: none !important;
}
/* ─────────────────────────────────────────────
v116: 모바일 legacy 사진/동영상 선택창(#php) 사용 금지
───────────────────────────────────────────── */
html.capacitor #php {
pointer-events: none !important;
}
html.capacitor #php:not(.force-open) {
display: none !important;
}
html.capacitor #php.on:not(.force-open),
html.capacitor #php.open:not(.force-open),
html.capacitor #php.act:not(.force-open) {
display: none !important;
pointer-events: none !important;
}
/* ─────────────────────────────────────────────
v118: 모바일 업로드 상태 표시
───────────────────────────────────────────── */
.mobile-upload-status-v118 {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(76px + env(safe-area-inset-bottom));
z-index: 2147483000;
background: rgba(18, 24, 38, .94);
color: #fff;
border-radius: 14px;
box-shadow: 0 12px 34px rgba(0,0,0,.28);
overflow: hidden;
transform: translateY(130%);
opacity: 0;
pointer-events: none;
transition: transform .22s ease, opacity .22s ease;
font-size: 12px;
}
.mobile-upload-status-v118.on {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.mobile-upload-status-v118 .mus-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
font-weight: 800;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.mobile-upload-status-v118 .mus-head button {
border: 0;
background: transparent;
color: #fff;
font-size: 20px;
width: 28px;
height: 28px;
}
.mobile-upload-status-v118 .mus-list {
max-height: 145px;
overflow-y: auto;
padding: 6px 8px 8px;
}
.mobile-upload-status-v118 .mus-item {
display: grid;
grid-template-columns: 42px 1fr 54px;
gap: 7px;
align-items: center;
padding: 7px 6px;
border-radius: 9px;
}
.mobile-upload-status-v118 .mus-item + .mus-item {
border-top: 1px solid rgba(255,255,255,.06);
}
.mobile-upload-status-v118 .mus-type {
color: #fed7aa;
font-weight: 800;
}
.mobile-upload-status-v118 .mus-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(255,255,255,.88);
}
.mobile-upload-status-v118 .mus-state {
text-align: right;
color: #fde68a;
font-weight: 800;
}
.mobile-upload-status-v118 .mus-item.ok .mus-state { color: #86efac; }
.mobile-upload-status-v118 .mus-item.fail .mus-state { color: #fca5a5; }
.mobile-upload-status-v118 .mus-item.run .mus-state { color: #93c5fd; }
/* ─────────────────────────────────────────────
v120: 롱프레스 메뉴 버튼 터치 안정화
───────────────────────────────────────────── */
#memo-long-menu.on,
#memo-long-menu.memo-long-menu-backdrop {
pointer-events: auto !important;
}
#memo-long-menu .memo-long-menu,
#memo-long-menu .memo-long-item,
#memo-long-menu .memo-long-cancel {
pointer-events: auto !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: rgba(249,115,22,.14);
}
/* v122: 웹 라이트박스 저장/삭제 버튼 터치 보강 */
#lb-actions,
#lb-actions *,
#lb-save,
#lb-delete {
pointer-events: auto !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
}
#lb-save,
#lb-delete {
position: relative;
z-index: 99980 !important;
}
/* ─────────────────────────────────────────────
v132: 모바일 앨범 다중 업로드 + 미리보기 시인성 확대
- 기존 파일 액션/뷰어 로직은 건드리지 않고 카드 표시 크기만 보강
───────────────────────────────────────────── */
@media (max-width: 600px) {
.mig.c2,
.mig.c3,
.mig.c5 {
gap: 5px !important;
}
.mig.c2 .mc,
.mig.c3 .mc,
.mig.c5 .mc {
min-height: 96px !important;
aspect-ratio: 3 / 4 !important;
border-radius: 8px !important;
background: #000 !important;
}
.mig.c2 .mc img,
.mig.c3 .mc img,
.mig.c5 .mc img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
border-radius: 8px !important;
}
.pimg,
.mig.c1 {
max-width: min(280px, 78vw) !important;
}
.pimg img,
.mig.c1 .mc img {
max-width: min(280px, 78vw) !important;
max-height: 340px !important;
}
}
/* v139 모바일 업로드 진행 게이지/재시도 */
.mobile-upload-status-v118.v139{max-height:72vh;z-index:2147483001;}
.mobile-upload-status-v118 .mus-progress-wrap{padding:10px 12px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-upload-status-v118 .mus-progress-info{font-size:12px;color:#e5e7eb;margin-bottom:7px;display:flex;gap:4px;align-items:center}
.mobile-upload-status-v118 .mus-progress-info b{color:#fff;font-size:13px}
.mobile-upload-status-v118 .mus-progress-bar{height:7px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.13)}
.mobile-upload-status-v118 .mus-progress-bar>div{height:100%;background:#F97316;border-radius:99px;transition:width .18s ease}
.mobile-upload-status-v118 .mus-progress-pct{font-size:10px;color:#9ca3af;text-align:right;margin-top:4px}
.mobile-upload-status-v118 .mus-retry{padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}
.mobile-upload-status-v118 .mus-retry button{width:100%;height:38px;border:0;border-radius:12px;background:#ef4444;color:#fff;font-weight:800;font-size:13px}
.mobile-upload-status-v118 .mus-more{font-size:11px;color:#9ca3af;text-align:center;padding:8px 4px}
.mobile-upload-status-v118 .mus-head.v139 span{font-weight:900}
/* ═══════════════════════════════════════════════════════════════
v141 NuMemo Timeless Design System — CSS ONLY
기능/JS/DOM/이벤트 수정 없음. 색감·간격·카드톤만 정리.
═══════════════════════════════════════════════════════════════ */
:root{
--nm-surface:#ffffff;
--nm-paper:#fbfaf7;
--nm-ink:#222426;
--nm-muted:#8a8f98;
--nm-line:rgba(31,36,48,.095);
--nm-line-soft:rgba(31,36,48,.065);
--nm-shadow:0 14px 42px rgba(25,31,45,.055),0 3px 10px rgba(25,31,45,.04);
--nm-shadow-card:0 10px 28px rgba(25,31,45,.045),0 1px 4px rgba(25,31,45,.035);
--nm-radius-xl:11px;
--nm-radius-lg:18px;
--nm-radius-md:14px;
--nm-gap:12px;
}
body{
background:
radial-gradient(circle at 14% 8%, rgba(249,115,22,.055), transparent 30%),
radial-gradient(circle at 86% 0%, rgba(91,127,222,.055), transparent 34%),
linear-gradient(180deg,#fbfbfa 0%,#f7f7f5 100%);
color:var(--nm-ink);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.tb{
padding:10px 20px 14px;
gap:10px;
}
.chip{
min-height:32px;
padding:7px 14px;
border-radius:999px;
font-size:15px;
font-weight:700;
letter-spacing:-.02em;
box-shadow:0 8px 18px rgba(25,31,45,.045);
opacity:.78;
}
.chip.fr,.chip:hover{opacity:1;transform:translateY(-1px)}
.abtn{
min-height:32px;
padding:7px 14px;
border-radius:999px;
background:rgba(255,255,255,.72);
border:1px solid var(--nm-line-soft);
box-shadow:0 8px 18px rgba(25,31,45,.035);
}
.desk{
border:0;
border-radius:0;
background:transparent;
height:calc(100vh - 88px);
padding:0 20px 22px;
}
.win{
border:1px solid var(--nm-line-soft);
border-radius:var(--nm-radius-xl);
background:rgba(255,255,255,.74);
box-shadow:var(--nm-shadow);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
overflow:hidden;
}
.wi{border-radius:var(--nm-radius-xl);overflow:hidden;background:rgba(255,255,255,.52)}
.wh{
min-height:52px;
padding:12px 14px;
border-bottom:1px solid rgba(255,255,255,.24);
}
.wtitle{
font-size:15px;
font-weight:800;
letter-spacing:-.035em;
max-width:62%;
text-shadow:0 1px 8px rgba(0,0,0,.08);
}
.wb{
padding:14px;
background:
linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,.3)),
var(--nm-paper);
}
.row{
border:1px solid var(--nm-line-soft);
border-radius:var(--nm-radius-lg);
background:rgba(255,255,255,.82);
box-shadow:var(--nm-shadow-card);
margin-bottom:12px;
overflow:hidden;
}
.row:hover{box-shadow:0 14px 34px rgba(25,31,45,.065),0 2px 6px rgba(25,31,45,.04)}
.rb{padding:12px 12px 10px 10px}
.rt{
color:#26292d;
font-weight:560;
line-height:1.55;
letter-spacing:-.022em;
}
.rsub{
color:var(--nm-muted);
font-size:11px;
margin-top:7px;
}
.row-tag-btn{border-radius:999px;opacity:.88}
.rbt{
border-radius:12px;
background:rgba(255,255,255,.65);
}
.rbt:hover{background:rgba(255,255,255,.95)}
.mig{
gap:7px !important;
padding:0;
}
.mc,.pimg,.vmemo,.pdf-card{
border-radius:var(--nm-radius-md) !important;
overflow:hidden;
box-shadow:0 6px 18px rgba(25,31,45,.045);
}
.mc img,.pimg img,.vmemo img{border-radius:inherit;display:block}
.mm{
background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.62));
font-weight:900;
letter-spacing:-.02em;
}
.pdf-card{
border:1px solid var(--nm-line-soft) !important;
background:rgba(255,255,255,.78) !important;
padding:12px !important;
}
.winp{
padding:12px 14px 14px;
border-top:1px solid var(--nm-line-soft);
background:rgba(255,255,255,.66);
}
.memo-input,.sinp,.mob-textarea{
border:1px solid var(--nm-line-soft) !important;
border-radius:16px !important;
background:rgba(255,255,255,.9) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 16px rgba(25,31,45,.025);
color:var(--nm-ink) !important;
}
.memo-input:focus,.sinp:focus,.mob-textarea:focus{
border-color:rgba(249,115,22,.36) !important;
box-shadow:0 0 0 4px rgba(249,115,22,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
.ppb,.dov,.mob-plus-btn,.mob-send-btn{
box-shadow:0 8px 20px rgba(25,31,45,.06);
}
.bmenu,.tag-picker,.memo-long-menu,.file-long-sheet,.mam-sheet{
border:1px solid var(--nm-line-soft) !important;
border-radius:22px !important;
box-shadow:0 24px 70px rgba(25,31,45,.16),0 4px 12px rgba(25,31,45,.06) !important;
}
/* ═══════════════════════════════════════════════════════════════
v141.1 Top Tabs + Board Header Polish — CSS ONLY
목적: 상단 메모칩/보드 헤더까지 100년형 절제 디자인 적용
기능/JS/이벤트/동기화 수정 없음
═══════════════════════════════════════════════════════════════ */
.tb{
background:rgba(255,255,255,.62);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid rgba(31,36,48,.055);
}
.chip{
position:relative;
min-height:34px;
padding:8px 17px;
border:1px solid rgba(255,255,255,.48) !important;
border-radius:999px !important;
color:rgba(255,255,255,.96) !important;
font-weight:800;
letter-spacing:-.035em;
filter:saturate(.62) brightness(1.08);
box-shadow:
inset 0 0 0 999px rgba(255,255,255,.14),
0 10px 24px rgba(25,31,45,.055),
0 1px 2px rgba(25,31,45,.035) !important;
opacity:.92 !important;
}
.chip.fr,
.chip:hover{
filter:saturate(.72) brightness(1.08);
box-shadow:
inset 0 0 0 999px rgba(255,255,255,.08),
0 12px 26px rgba(25,31,45,.075),
0 1px 2px rgba(25,31,45,.045) !important;
transform:translateY(-1px);
}
.abtn,
.font-btn{
background:rgba(255,255,255,.82) !important;
color:#30343b !important;
border:1px solid rgba(31,36,48,.09) !important;
box-shadow:0 8px 18px rgba(25,31,45,.045) !important;
}
.wh{
color:#222426 !important;
border-bottom:1px solid rgba(31,36,48,.10) !important;
box-shadow:0 1px 0 rgba(255,255,255,.72) !important;
}
.wtitle{
color:#222426 !important;
text-shadow:none !important;
}
.wtitle i{opacity:.85}
.wh .ib{
background:rgba(255,255,255,.72) !important;
color:#4b5563 !important;
border:1px solid rgba(31,36,48,.075) !important;
box-shadow:0 6px 16px rgba(25,31,45,.045) !important;
}
/* ═══════════════════════════════════════════════════════════════
v141.2 Boundary + Header Visibility Polish — CSS ONLY
요청 반영: 메모 카드 경계 강화, 헤더 검색/메뉴 아이콘 가시성 개선,
모바일 보드 상단탭 색상 복원/파스텔화. 기능/JS/DOM/이벤트 수정 없음.
═══════════════════════════════════════════════════════════════ */
.row{
border:1px solid rgba(31,36,48,.145) !important;
box-shadow:0 12px 30px rgba(25,31,45,.070),0 1px 5px rgba(25,31,45,.050) !important;
background:rgba(255,255,255,.90) !important;
}
.row:hover{
border-color:rgba(31,36,48,.19) !important;
box-shadow:0 16px 38px rgba(25,31,45,.085),0 2px 7px rgba(25,31,45,.055) !important;
}
.wb .row + .row{margin-top:12px !important}
.wh{
position:relative;
overflow:hidden;
}
.wh::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,.46));
pointer-events:none;
z-index:0;
}
.wh > *{position:relative;z-index:1}
.wtitle{
color:rgba(28,33,40,.92) !important;
font-weight:900 !important;
text-shadow:0 1px 0 rgba(255,255,255,.42) !important;
}
.wh .wb2,
.wh .ib,
.wh button{
color:rgba(36,43,53,.76) !important;
background:rgba(255,255,255,.52) !important;
border:1px solid rgba(31,36,48,.10) !important;
box-shadow:0 6px 16px rgba(25,31,45,.060) !important;
}
.wh .wb2:hover,
.wh .ib:hover,
.wh button:hover{
color:rgba(20,24,30,.92) !important;
background:rgba(255,255,255,.78) !important;
}
.chip{
filter:saturate(.72) brightness(1.04) !important;
box-shadow:inset 0 0 0 999px rgba(255,255,255,.10),0 9px 22px rgba(25,31,45,.070) !important;
}
.chip.fr{
filter:saturate(.84) brightness(1.03) !important;
box-shadow:inset 0 0 0 999px rgba(255,255,255,.045),0 11px 25px rgba(25,31,45,.085) !important;
}
/* ═══════════════════════════════════════════════════════════════
v141.5 Header Lock/Eye Remove — CSS ONLY
요청: 보드 헤더의 자물쇠/눈표시 완전 제거
기능/JS/DOM/이벤트/동기화/업로드/공유/삭제 수정 없음
═══════════════════════════════════════════════════════════════ */
.whead > i.ti-lock,
.whead > i.ti-lock-open,
.whead > i.ti-eye,
.whead > i.ti-eye-off,
.whead > i.ti-eye-x,
.whead > i.ti-lock-square,
.whead > i.ti-lock-access,
.mob-unified-hdr .ti-lock,
.mob-unified-hdr .ti-lock-open,
.mob-unified-hdr .ti-eye,
.mob-unified-hdr .ti-eye-off,
.mob-unified-hdr .ti-eye-x{
display:none !important;
width:0 !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
opacity:0 !important;
visibility:hidden !important;
}
/* ═══════════════════════════════════════════════════════════════
v141.6 Mobile Header Focus Fix
- 모바일 상단탭 메뉴가 본문 뒤로 숨거나 잘리는 문제 보정
- 헤더 자물쇠/눈표시 완전 제거 보강
- 기능 로직 변경 없음: 헤더 표시/레이어만 정리
═══════════════════════════════════════════════════════════════ */
@media (max-width:600px){
.mobbrd{
overflow:visible !important;
position:relative !important;
isolation:isolate !important;
}
.mob-unified-hdr{
position:relative !important;
overflow:visible !important;
z-index:5000 !important;
display:grid !important;
grid-template-columns:36px minmax(0,1fr) 66px 36px !important;
align-items:center !important;
column-gap:4px !important;
min-height:46px !important;
padding:7px 8px !important;
}
.mob-unified-hdr::before{
z-index:0 !important;
}
.mob-unified-hdr > *{
position:relative !important;
z-index:2 !important;
}
.mob-board-name{
position:static !important;
transform:none !important;
grid-column:2 !important;
justify-self:center !important;
align-self:center !important;
max-width:100% !important;
min-width:0 !important;
padding:0 4px !important;
font-size:13.2px !important;
line-height:1.1 !important;
font-weight:720 !important;
letter-spacing:-.035em !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-align:center !important;
}
.mob-board-name i,
.mob-board-name .ti,
.mob-unified-hdr > i,
.mob-unified-hdr .ti-lock,
.mob-unified-hdr .ti-lock-open,
.mob-unified-hdr .ti-lock-square,
.mob-unified-hdr .ti-lock-access,
.mob-unified-hdr .ti-eye,
.mob-unified-hdr .ti-eye-off,
.mob-unified-hdr .ti-eye-x{
display:none !important;
width:0 !important;
min-width:0 !important;
height:0 !important;
margin:0 !important;
padding:0 !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
.mob-hdr-right{
grid-column:3 !important;
justify-self:end !important;
display:flex !important;
align-items:center !important;
gap:4px !important;
margin:0 !important;
overflow:visible !important;
z-index:6000 !important;
}
.mob-hdr-right > div{
position:relative !important;
overflow:visible !important;
z-index:6001 !important;
}
.mob-unified-hdr .wb2,
.mob-unified-hdr button:not(.mob-nav-btn){
width:28px !important;
height:28px !important;
min-width:28px !important;
border-radius:9px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
}
.mob-nav-btn{
width:32px !important;
height:32px !important;
min-width:32px !important;
z-index:5500 !important;
}
.mob-unified-hdr .bmenu{
position:absolute !important;
top:calc(100% + 8px) !important;
right:0 !important;
left:auto !important;
z-index:2147483000 !important;
min-width:188px !important;
max-width:calc(100vw - 22px) !important;
overflow:visible !important;
transform:none !important;
box-shadow:0 18px 46px rgba(15,23,42,.18),0 3px 10px rgba(15,23,42,.10) !important;
}
.mobbdy{
position:relative !important;
z-index:1 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v141.8 Mobile Add Board Chip Visibility — CSS ONLY
- 모바일 상단칩의 새 메모판(+) 버튼 가시성 보정
═══════════════════════════════════════════════════════════════ */
@media (max-width:600px){
.chip[onclick="oNM()"],
.chip.chip-h[onclick="oNM()"],
button.chip[onclick="oNM()"],
button.chip.chip-h[onclick="oNM()"]{
width:34px !important;
min-width:34px !important;
height:34px !important;
padding:0 !important;
border-radius:17px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 34px !important;
background:linear-gradient(180deg, rgba(255,125,24,.98), rgba(231,98,0,.98)) !important;
border:1px solid rgba(215,91,0,.42) !important;
color:#fff !important;
box-shadow:0 6px 16px rgba(255,111,0,.22), inset 0 1px 0 rgba(255,255,255,.32) !important;
opacity:1 !important;
visibility:visible !important;
}
.chip[onclick="oNM()"] i,
.chip.chip-h[onclick="oNM()"] i,
button.chip[onclick="oNM()"] i,
button.chip.chip-h[onclick="oNM()"] i{
color:#fff !important;
font-size:18px !important;
line-height:1 !important;
opacity:1 !important;
text-shadow:0 1px 2px rgba(0,0,0,.16) !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v143 Web Board Header Menu Clip Fix — CSS ONLY
- 웹/데스크톱 보드 상단 메뉴가 보드/헤더 뒤로 숨어 잘리는 현상 보정
- 기능/JS/업로드/공유/삭제/동기화 변경 없음
═══════════════════════════════════════════════════════════════ */
@media (min-width:601px){
/* 메뉴가 헤더 overflow에 잘리지 않도록 보드/헤더 overflow를 다시 열어줌 */
.desk,
.win,
.wi,
.wh{
overflow:visible !important;
}
/* 메뉴가 열린 보드는 주변 보드 위로 올라오게 함 */
.win:has(.bmenu.op),
.wi:has(.bmenu.op),
.wh:has(.bmenu.op){
z-index:2147482000 !important;
overflow:visible !important;
}
/* 메뉴 자체는 항상 최상단 레이어 */
.wh .bmenu,
.win .bmenu,
.bmenu.op{
position:absolute !important;
top:calc(100% + 8px) !important;
right:0 !important;
left:auto !important;
z-index:2147483000 !important;
min-width:188px !important;
max-width:min(240px, calc(100vw - 24px)) !important;
overflow:hidden !important;
background:rgba(255,255,255,.98) !important;
border:1px solid rgba(31,36,48,.12) !important;
border-radius:18px !important;
box-shadow:0 22px 60px rgba(15,23,42,.18),0 4px 12px rgba(15,23,42,.08) !important;
}
.bmenu.op{
display:block !important;
}
.bmenu .mi,
.bmenu .msl{
color:#242832 !important;
}
/* 헤더에 실수로 보이는 잠금/눈 아이콘은 계속 숨김 */
.wh > i.ti-lock,
.wh > i.ti-lock-open,
.wh > i.ti-eye,
.wh > i.ti-eye-off,
.wh > i.ti-eye-x,
.wh > .ti-lock,
.wh > .ti-lock-open,
.wh > .ti-eye,
.wh > .ti-eye-off,
.wh > .ti-eye-x{
display:none !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v144.2 Web Header Restore Slim Round — CSS ONLY
요청: 웹 보드 상단 헤더의 기존 배치 유지 + 높이 축소 + 상단 둥근 마감 복구
기능/JS/업로드/공유/저장/삭제/동기화 변경 없음
═══════════════════════════════════════════════════════════════ */
@media (min-width:601px){
.win,
.wi{
border-radius:var(--radius) !important;
}
.wh{
/* 기존 flex 구조는 그대로 유지하고 높이/마감만 정리 */
display:flex !important;
align-items:center !important;
gap:5px !important;
min-height:40px !important;
height:40px !important;
padding:4px 8px 4px 10px !important;
box-sizing:border-box !important;
border-radius:var(--radius) var(--radius) 0 0 !important;
border-bottom:1px solid rgba(31,36,48,.075) !important;
overflow:visible !important;
}
.wh::before{
border-radius:var(--radius) var(--radius) 0 0 !important;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.22)) !important;
}
.wtitle{
font-size:13px !important;
line-height:1.15 !important;
font-weight:740 !important;
letter-spacing:-.035em !important;
max-width:62% !important;
padding:0 6px !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.wh .wb2,
.wh .ib,
.wh button:not(.mob-nav-btn){
width:24px !important;
min-width:24px !important;
height:24px !important;
min-height:24px !important;
border-radius:8px !important;
padding:0 !important;
}
.wh .wb2 i,
.wh .ib i,
.wh button i{
font-size:14px !important;
}
.wh .bmenu,
.bmenu.op{
top:calc(100% + 6px) !important;
right:8px !important;
z-index:2147483000 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v146 Pastel Board Identity — SAFE STYLE PATCH
- 각 메모장 색을 상단탭/칩/보드에 아주 연하게 적용
- 글씨와 테두리는 해당 보드색 계열로 진하게 정리
- 기능/저장/공유/삭제/업로드/동기화 로직 변경 없음
═══════════════════════════════════════════════════════════════ */
:root{
--nm-board-tint: color-mix(in srgb, var(--board-color, #F97316) 8%, #ffffff);
--nm-board-tint-2: color-mix(in srgb, var(--board-color, #F97316) 13%, #ffffff);
--nm-board-line: color-mix(in srgb, var(--board-color, #F97316) 34%, rgba(31,36,48,.16));
--nm-board-ink: color-mix(in srgb, var(--board-color, #F97316) 72%, #1f2430);
}
.chip[style*="--board-color"]{
background:color-mix(in srgb, var(--board-color) 14%, #fff) !important;
color:color-mix(in srgb, var(--board-color) 76%, #1f2430) !important;
border:1px solid color-mix(in srgb, var(--board-color) 31%, rgba(31,36,48,.12)) !important;
box-shadow:0 7px 18px rgba(25,31,45,.045), inset 0 1px 0 rgba(255,255,255,.75) !important;
filter:none !important;
opacity:1 !important;
text-shadow:none !important;
}
.chip[style*="--board-color"].fr,
.chip[style*="--board-color"]:hover{
background:color-mix(in srgb, var(--board-color) 19%, #fff) !important;
border-color:color-mix(in srgb, var(--board-color) 45%, rgba(31,36,48,.15)) !important;
color:color-mix(in srgb, var(--board-color) 84%, #151922) !important;
box-shadow:0 9px 22px rgba(25,31,45,.06), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.win[style*="--board-color"]{
background:color-mix(in srgb, var(--board-color) 5%, #ffffff) !important;
border:1.5px solid color-mix(in srgb, var(--board-color) 30%, rgba(31,36,48,.12)) !important;
box-shadow:0 14px 36px rgba(25,31,45,.07),0 1px 4px rgba(25,31,45,.045) !important;
}
.win[style*="--board-color"] .wi{
background:color-mix(in srgb, var(--board-color) 4%, #fff) !important;
}
.wh[style*="--board-color"]{
background:linear-gradient(180deg, color-mix(in srgb, var(--board-color) 16%, #fff), color-mix(in srgb, var(--board-color) 11%, #fff)) !important;
border-bottom:1.5px solid color-mix(in srgb, var(--board-color) 34%, rgba(31,36,48,.12)) !important;
}
.wh[style*="--board-color"]::before{
display:none !important;
}
.wh[style*="--board-color"] .wtitle{
color:color-mix(in srgb, var(--board-color) 76%, #18202b) !important;
font-weight:780 !important;
text-shadow:none !important;
}
.wh[style*="--board-color"] .wb2,
.wh[style*="--board-color"] button{
background:rgba(255,255,255,.68) !important;
color:color-mix(in srgb, var(--board-color) 62%, #364152) !important;
border:1px solid color-mix(in srgb, var(--board-color) 25%, rgba(31,36,48,.10)) !important;
}
.win[style*="--board-color"] .wb{
background:linear-gradient(180deg, color-mix(in srgb, var(--board-color) 4%, #fff), color-mix(in srgb, var(--board-color) 8%, #fff)) !important;
}
.win[style*="--board-color"] .winp{
background:color-mix(in srgb, var(--board-color) 5%, #fff) !important;
border-top:1px solid color-mix(in srgb, var(--board-color) 22%, rgba(31,36,48,.10)) !important;
}
.win[style*="--board-color"] .memo-input{
border-color:color-mix(in srgb, var(--board-color) 22%, rgba(31,36,48,.13)) !important;
}
/* 보드 내부 메모카드 경계는 조금 더 명확하게 */
.row{
border-color:rgba(31,36,48,.17) !important;
box-shadow:0 10px 24px rgba(25,31,45,.075),0 1px 4px rgba(25,31,45,.055) !important;
}
/* v154: 웹 메모장 칩 드래그앤드랍 */
@media (min-width: 601px) {
#tb .chip-web-dnd { cursor: grab; user-select: none; }
#tb .chip-web-dnd:active { cursor: grabbing; }
#tb .chip-dragging { opacity: .55; transform: scale(.96); }
#tb .chip-drag-over { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
}
/* v155: 웹 메모장 칩 — 현재 떠있는 메모판 / 숨긴 메모판 명확 구분 */
@media (min-width: 601px) {
#tb .chip-web-dnd {
position: relative;
gap: 7px;
min-height: 30px;
padding: 5px 10px;
border: 1px solid rgba(255,255,255,.26) !important;
box-shadow: 0 5px 14px rgba(15,23,42,.10);
}
#tb .chip-web-dnd .chip-name {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#tb .chip-open-dot {
width: 7px;
height: 7px;
border-radius: 999px;
flex: 0 0 auto;
background: rgba(255,255,255,.95);
box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
#tb .chip-state-badge {
flex: 0 0 auto;
font-size: 10px;
line-height: 1;
font-weight: 900;
letter-spacing: -.2px;
border-radius: 999px;
padding: 4px 6px;
background: rgba(255,255,255,.22);
color: #fff;
}
#tb .chip-visible {
opacity: 1 !important;
filter: saturate(1.08) brightness(1.02);
outline: 2px solid color-mix(in srgb, var(--board-color) 65%, white 35%);
outline-offset: 1px;
}
#tb .chip-visible .chip-state-badge {
background: rgba(255,255,255,.92);
color: color-mix(in srgb, var(--board-color) 80%, #111 20%);
}
#tb .chip-hidden {
opacity: .46 !important;
background: color-mix(in srgb, var(--board-color) 18%, #f3f4f6 82%) !important;
color: color-mix(in srgb, var(--board-color) 45%, #4b5563 55%) !important;
border: 1px dashed color-mix(in srgb, var(--board-color) 38%, #9ca3af 62%) !important;
box-shadow: none !important;
filter: grayscale(.35) saturate(.55);
}
#tb .chip-hidden .chip-open-dot {
background: transparent;
box-shadow: inset 0 0 0 2px currentColor;
opacity: .75;
}
#tb .chip-hidden .chip-state-badge {
background: rgba(255,255,255,.7);
color: inherit;
}
#tb .chip-hidden:hover {
opacity: .82 !important;
filter: grayscale(.15) saturate(.75);
}
}
/* v157: 열림/닫힘 글자 배지 완전 제거 — 기존 칩 강조/흐림 상태는 유지 */
@media (min-width: 601px) {
#tb .chip-state-badge { display: none !important; }
#tb .chip-visible {
opacity: 1 !important;
filter: saturate(1.08) brightness(1.02);
outline: 2px solid color-mix(in srgb, var(--board-color) 65%, white 35%);
outline-offset: 1px;
}
#tb .chip-hidden {
opacity: .46 !important;
background: color-mix(in srgb, var(--board-color) 18%, #f3f4f6 82%) !important;
color: color-mix(in srgb, var(--board-color) 45%, #4b5563 55%) !important;
border: 1px dashed color-mix(in srgb, var(--board-color) 38%, #9ca3af 62%) !important;
box-shadow: none !important;
filter: grayscale(.35) saturate(.55);
}
}
/* ✅ V160: 웹 입력창도 앱처럼 왼쪽 + 버튼 사용 */
.web-input-row-v160{align-items:flex-end;}
.web-plus-btn-v160{
width:30px;height:30px;border:0;border-radius:999px;background:#F97316;color:#fff;
display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
box-shadow:0 2px 7px rgba(249,115,22,.25);font-size:15px;
}
.web-plus-btn-v160:hover{background:#EA6700;}
.web-plus-btn-v160:active{transform:scale(.96);}
.web-legacy-plus-v160{display:none!important;}
/* ✅ V160: 완료 메모 가독성 개선 — 취소선 제거 + 완료 표시 고정 정렬 */
.row.dn{
opacity:.78;
position:relative;
background:linear-gradient(0deg,rgba(0,0,0,.018),rgba(0,0,0,.018)),var(--bg);
border-style:solid;
}
.row.dn .rt,
.row.dn .thread-text,
.row.dn .pdf-title,
.row.dn .vmemo-nm{
text-decoration:none!important;
}
.row.dn .rsub::before{
content:'완료';
display:inline-flex;
align-items:center;
justify-content:center;
height:15px;
padding:0 6px;
margin-right:6px;
border-radius:999px;
background:rgba(34,197,94,.12);
color:#15803d;
border:1px solid rgba(34,197,94,.24);
font-size:9px;
font-weight:800;
line-height:1;
vertical-align:1px;
}
.row.dn .rbt.ok{color:#15803d;background:rgba(34,197,94,.08);}
/* ✅ V166: 웹 업로드 취소 버튼 + 상단/입력 아이콘 심볼형 */
.mobile-upload-status-v118 .mus-head{display:flex!important;align-items:center!important;gap:8px!important;}
.mobile-upload-status-v118 .mus-head span{flex:1!important;}
.mobile-upload-status-v118 .mus-head button.mus-cancel{
width:auto!important;height:26px!important;border:0!important;border-radius:999px!important;
padding:0 10px!important;background:rgba(255,255,255,.14)!important;color:#fff!important;
font-size:12px!important;font-weight:800!important;box-shadow:none!important;
}
.mobile-upload-status-v118 .mus-head button.mus-cancel:active{transform:scale(.96);}
/* 웹 보드 상단바: 돋보기/메뉴/화살표 원형 테두리 제거, 심볼만 보이게 */
body:not(.mobile-mode) .wh .wb2,
body:not(.mobile-mode) .wh .ib,
body:not(.mobile-mode) .wh button:not(.mob-nav-btn),
body:not(.mobile-mode) .mob-unified-hdr .wb2,
body:not(.mobile-mode) .mob-unified-hdr button:not(.mob-nav-btn),
body:not(.mobile-mode) .mob-nav-btn{
background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;
border-radius:0!important;color:var(--board-color,#64748b)!important;
}
body:not(.mobile-mode) .wh .wb2 i,
body:not(.mobile-mode) .wh .ib i,
body:not(.mobile-mode) .wh button i,
body:not(.mobile-mode) .mob-unified-hdr .wb2 i,
body:not(.mobile-mode) .mob-unified-hdr button i,
body:not(.mobile-mode) .mob-nav-btn i{
color:var(--board-color,#64748b)!important;stroke:currentColor!important;
}
/* 웹 입력창 왼쪽 + 버튼도 배경/테두리 제거, + 심볼만 */
body:not(.mobile-mode) .web-plus-btn-v160,
body:not(.mobile-mode) .ppb{
background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;
color:var(--board-color,#F97316)!important;border-radius:0!important;
}
body:not(.mobile-mode) .web-plus-btn-v160 i,
body:not(.mobile-mode) .ppb i{color:var(--board-color,#F97316)!important;}
body:not(.mobile-mode) .web-plus-btn-v160:hover,
body:not(.mobile-mode) .ppb:hover{background:transparent!important;filter:brightness(.92);}
/* v219.1 — 웹 메모장 제목 클릭 수정 전용: wdrag보다 제목을 위에 올리고 입력창만 복구 */
.wh .wtitle{
z-index:30 !important;
pointer-events:auto !important;
cursor:text !important;
padding:2px 8px !important;
border-radius:8px !important;
}
.wh .wtitle:hover{
background:rgba(255,255,255,.42) !important;
}
.wh .wti-web-title-v219{
position:absolute !important;
left:50% !important;
transform:translateX(-50%) !important;
z-index:31 !important;
width:min(180px,62%) !important;
height:24px !important;
text-align:center !important;
font-size:13px !important;
font-weight:780 !important;
color:#1f2937 !important;
background:rgba(255,255,255,.92) !important;
border:1px solid rgba(31,36,48,.14) !important;
border-radius:8px !important;
outline:none !important;
box-shadow:0 4px 12px rgba(0,0,0,.08) !important;
}
/* v220 — 웹/앱 입력창 우클릭·롱프레스 기본 메뉴 허용 */
input, textarea, [contenteditable="true"], .ea, .thread-inp, .mob-textarea {
-webkit-user-select: text !important;
user-select: text !important;
-webkit-touch-callout: default !important;
}
/* v231 — 메모 표시 텍스트만 Android/Web 기본 선택·복사 허용 (드래그/파일/뷰어 로직 미변경) */
.rt, .rt-line, .rt-line .rt {
-webkit-user-select: text !important;
user-select: text !important;
-webkit-touch-callout: default !important;
cursor: text;
}
/* v234: 메모판 색상 팔레트 표시 보정 — 헤더 button 전역 스타일이 색상점을 덮지 않도록 팔레트 내부만 한정 */
.bmenu .bc-pal{
display:none;
align-items:center;
gap:8px !important;
padding:9px 12px 11px !important;
flex-wrap:wrap;
min-height:42px;
box-sizing:border-box;
background:rgba(255,255,255,.96) !important;
}
.bmenu .bc-pal .bc-dot-v234{
width:26px !important;
height:26px !important;
min-width:26px !important;
min-height:26px !important;
flex:0 0 26px !important;
padding:0 !important;
margin:0 !important;
border-radius:999px !important;
border:2px solid #fff !important;
background:var(--bc) !important;
box-shadow:0 2px 7px rgba(15,23,42,.18) !important;
cursor:pointer !important;
outline:0 !important;
appearance:none !important;
-webkit-appearance:none !important;
}
.bmenu .bc-pal .bc-dot-v234.on{
box-shadow:0 0 0 2px rgba(15,23,42,.24),0 0 0 5px #fff,0 3px 9px rgba(15,23,42,.18) !important;
}
.bmenu .bc-pal .bc-dot-v234:active{
transform:scale(.92);
}
/* v235: 메모판 색상 팔레트 확실 표시 — 색상점은 button이 아니라 span이라 전역 버튼 CSS 영향 차단 */
.bmenu .bc-pal{
display:none;
align-items:center !important;
gap:9px !important;
padding:10px 12px 12px !important;
flex-wrap:wrap !important;
min-height:48px !important;
background:rgba(255,255,255,.98) !important;
box-sizing:border-box !important;
}
.bmenu .bc-pal .bc-dot-v235{
display:inline-block !important;
width:26px !important;
height:26px !important;
min-width:26px !important;
min-height:26px !important;
flex:0 0 26px !important;
border-radius:999px !important;
border:2px solid #fff !important;
box-shadow:0 2px 8px rgba(15,23,42,.22) !important;
cursor:pointer !important;
box-sizing:border-box !important;
opacity:1 !important;
visibility:visible !important;
}
.bmenu .bc-pal .bc-dot-v235.on{
box-shadow:0 0 0 2px rgba(15,23,42,.38),0 2px 8px rgba(15,23,42,.22) !important;
}
/* NC11.6.3 — NuMemo premium bottom composer + importance tooltip (CSS only UI polish) */
.winp{
padding:12px 14px 13px !important;
border-radius:0 0 11px 11px !important;
overflow:visible !important;
background:
linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.92)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.win[style*="--board-color"] .winp{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--board-color) 4%, rgba(255,255,255,.88)),
color-mix(in srgb, var(--board-color) 8%, rgba(255,255,255,.96))) !important;
}
.web-draft-tags,
.mob-draft-tags{
position:relative !important;
gap:10px !important;
align-items:center !important;
overflow:visible !important;
}
.web-draft-tags{
padding:0 40px 8px 22px !important;
}
.web-draft-tags .mob-draft-tag,
.mob-draft-tags .mob-draft-tag{
position:relative !important;
flex:0 0 auto !important;
width:34px !important;
min-width:34px !important;
height:8px !important;
min-height:8px !important;
border-radius:999px !important;
background:linear-gradient(90deg, color-mix(in srgb, var(--tag) 92%, #fff), var(--tag)) !important;
border:1px solid rgba(255,255,255,.92) !important;
box-shadow:
0 5px 13px color-mix(in srgb, var(--tag) 24%, transparent),
inset 0 1px 0 rgba(255,255,255,.72) !important;
cursor:pointer !important;
transition:transform .16s ease, height .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.web-draft-tags .mob-draft-tag:hover,
.mob-draft-tags .mob-draft-tag:hover,
.web-draft-tags .mob-draft-tag:focus-visible,
.mob-draft-tags .mob-draft-tag:focus-visible{
height:10px !important;
transform:translateY(-1px) scaleX(1.04) !important;
filter:saturate(1.16) brightness(1.03) !important;
}
.web-draft-tags .mob-draft-tag.on,
.mob-draft-tags .mob-draft-tag.on{
height:11px !important;
transform:translateY(-1px) !important;
border:2px solid rgba(255,255,255,.98) !important;
box-shadow:
0 0 0 3px color-mix(in srgb, var(--tag) 18%, transparent),
0 9px 22px color-mix(in srgb, var(--tag) 30%, transparent),
inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.web-draft-tags .mob-draft-tag::after,
.mob-draft-tags .mob-draft-tag::after{
content:attr(data-tip);
position:absolute;
left:50%;
bottom:calc(100% + 10px);
transform:translateX(-50%) translateY(4px);
z-index:9999;
white-space:nowrap;
padding:6px 9px;
border-radius:999px;
background:rgba(15,23,42,.94);
color:#fff;
font-size:11px;
font-weight:800;
letter-spacing:-.02em;
opacity:0;
pointer-events:none;
box-shadow:0 12px 30px rgba(15,23,42,.22);
transition:opacity .14s ease, transform .14s ease;
}
.web-draft-tags .mob-draft-tag::before,
.mob-draft-tags .mob-draft-tag::before{
content:'';
position:absolute;
left:50%;
bottom:calc(100% + 5px);
transform:translateX(-50%);
border:5px solid transparent;
border-top-color:rgba(15,23,42,.94);
opacity:0;
pointer-events:none;
transition:opacity .14s ease;
}
.web-draft-tags .mob-draft-tag:hover::after,
.web-draft-tags .mob-draft-tag:focus-visible::after,
.web-draft-tags .mob-draft-tag:active::after,
.mob-draft-tags .mob-draft-tag:hover::after,
.mob-draft-tags .mob-draft-tag:focus-visible::after,
.mob-draft-tags .mob-draft-tag:active::after{
opacity:1;
transform:translateX(-50%) translateY(0);
}
.web-draft-tags .mob-draft-tag:hover::before,
.web-draft-tags .mob-draft-tag:focus-visible::before,
.web-draft-tags .mob-draft-tag:active::before,
.mob-draft-tags .mob-draft-tag:hover::before,
.mob-draft-tags .mob-draft-tag:focus-visible::before,
.mob-draft-tags .mob-draft-tag:active::before{
opacity:1;
}
.memo-input{
min-height:38px !important;
padding:9px 14px !important;
border-radius:5px !important;
border:1px solid color-mix(in srgb, var(--board-color, #F97316) 24%, rgba(31,36,48,.14)) !important;
background:rgba(255,255,255,.94) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 10px 24px rgba(25,31,45,.055) !important;
}
.memo-input:focus{
border-color:color-mix(in srgb, var(--board-color, #F97316) 52%, rgba(249,115,22,.35)) !important;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--board-color, #F97316) 13%, transparent),
inset 0 1px 0 rgba(255,255,255,.95),
0 10px 26px rgba(25,31,45,.06) !important;
}
body:not(.mobile-mode) .web-plus-btn-v160,
body:not(.mobile-mode) .ppb{
width:30px !important;
height:30px !important;
border-radius:999px !important;
color:var(--board-color,#F97316) !important;
transition:transform .14s ease, background .14s ease, color .14s ease !important;
}
body:not(.mobile-mode) .web-plus-btn-v160:hover,
body:not(.mobile-mode) .ppb:hover{
background:color-mix(in srgb, var(--board-color,#F97316) 10%, transparent) !important;
transform:scale(1.04) !important;
}
@media (max-width:600px){
.mob-draft-tags{ padding:0 18px 8px 18px !important; }
.mob-draft-tags .mob-draft-tag{ width:32px !important; min-width:32px !important; }
.mob-textarea{ border-radius:22px !important; }
}
/* NC11.6.4 — bottom-first importance chip labels + tab cycling polish */
.web-draft-tags,
.mob-draft-tags{
position:relative !important;
justify-content:center !important;
align-items:center !important;
gap:12px !important;
overflow:visible !important;
}
.web-draft-tags{ padding:2px 18px 7px 18px !important; }
.mob-draft-tags{ padding:2px 18px 7px 18px !important; }
.web-draft-tags .mob-draft-tag,
.mob-draft-tags .mob-draft-tag{
position:relative !important;
width:34px !important;
min-width:34px !important;
max-width:34px !important;
height:8px !important;
min-height:8px !important;
border-radius:999px !important;
background:linear-gradient(90deg, color-mix(in srgb, var(--tag) 88%, #fff), var(--tag)) !important;
border:1px solid rgba(255,255,255,.9) !important;
box-shadow:0 4px 11px color-mix(in srgb, var(--tag) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.75) !important;
transition:transform .14s ease, height .14s ease, box-shadow .14s ease, filter .14s ease !important;
}
.web-draft-tags .mob-draft-tag.on,
.mob-draft-tags .mob-draft-tag.on{
height:10px !important;
transform:translateY(-1px) !important;
border:2px solid rgba(255,255,255,.98) !important;
box-shadow:0 0 0 3px color-mix(in srgb, var(--tag) 16%, transparent), 0 7px 18px color-mix(in srgb, var(--tag) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.web-draft-tags .mob-draft-tag::after,
.mob-draft-tags .mob-draft-tag::after{
content:attr(data-tip) !important;
position:absolute !important;
left:50% !important;
bottom:calc(100% + 5px) !important;
transform:translateX(-50%) translateY(2px) !important;
z-index:9999 !important;
white-space:nowrap !important;
padding:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#6b7280 !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
letter-spacing:-.01em !important;
opacity:0 !important;
pointer-events:none !important;
box-shadow:none !important;
transition:opacity .12s ease, transform .12s ease !important;
}
.web-draft-tags .mob-draft-tag::before,
.mob-draft-tags .mob-draft-tag::before{ display:none !important; content:none !important; }
.web-draft-tags .mob-draft-tag:hover::after,
.web-draft-tags .mob-draft-tag:focus-visible::after,
.web-draft-tags .mob-draft-tag:active::after,
.web-draft-tags .mob-draft-tag.tip-on::after,
.mob-draft-tags .mob-draft-tag:hover::after,
.mob-draft-tags .mob-draft-tag:focus-visible::after,
.mob-draft-tags .mob-draft-tag:active::after,
.mob-draft-tags .mob-draft-tag.tip-on::after{
opacity:1 !important;
transform:translateX(-50%) translateY(0) !important;
}
.web-draft-tags .mob-draft-tag[data-tip=""]::after,
.mob-draft-tags .mob-draft-tag[data-tip=""]::after{
display:none !important;
content:none !important;
}
@media (max-width:600px){
.mob-draft-tags{ padding:2px 18px 7px 18px !important; gap:11px !important; }
.mob-draft-tags .mob-draft-tag{ width:32px !important; min-width:32px !important; max-width:32px !important; }
}
/* ─────────────────────────────────────────────
NC11.6.7 — TOP STATUS BAR REMOVE (WEB/APK)
목적: 출시형 화면을 위해 앱 최상단 [N · 동기화됨 / 설정 / 로그아웃] 상태줄 전체 숨김
원칙: 기존 기능 로직(saveAll/loadAll/Realtime/점검모드/계정차단) 미수정, CSS 최소 패치만 적용
───────────────────────────────────────────── */
#app > .status-bar{
display:none !important;
height:0 !important;
min-height:0 !important;
max-height:0 !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
overflow:hidden !important;
}
/* ─────────────────────────────────────────────
NC11.6.8 — TOP SAFE GAP AFTER STATUS BAR HIDE (WEB/APK)
목적: NC11.6.7에서 상단 상태줄을 숨긴 뒤, 보드/칩바가 기기 상단에 붙거나 잘리는 현상 방지
원칙: 기존 기능 로직(saveAll/loadAll/Realtime/점검모드/계정차단) 미수정, CSS 최소 패치만 적용
───────────────────────────────────────────── */
#app{
padding-top:22px !important;
}
html.capacitor #app{
padding-top:max(22px, env(safe-area-inset-top)) !important;
}
@media (max-width:600px){
#app{
padding-top:18px !important;
}
html.capacitor #app{
padding-top:max(18px, env(safe-area-inset-top)) !important;
}
}
/* ─────────────────────────────────────────────
NC11.6.10 — WEB BOARD CHIP ONE-LINE + DROPDOWN + MENU
목적: 웹 메모칩 영역을 앱처럼 한 줄로 정리하고, 버튼으로 아래 펼침/접힘 고정
원칙: saveAll/loadAll/Realtime/점검모드/계정차단 미수정, UI 렌더/CSS 최소 패치
───────────────────────────────────────────── */
@media (min-width:601px){
#tb.tb{
display:flex !important;
align-items:flex-start !important;
flex-wrap:nowrap !important;
gap:8px !important;
padding:10px 16px 12px !important;
min-height:54px !important;
position:relative !important;
overflow:visible !important;
}
#tb .web-tb-panel{
flex:1 1 auto !important;
min-width:0 !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:nowrap !important;
max-height:42px !important;
overflow:hidden !important;
padding:0 2px 2px 0 !important;
transition:max-height .18s ease !important;
}
#tb .web-tb-panel.expanded{
flex-wrap:wrap !important;
max-height:152px !important;
overflow:auto !important;
padding-bottom:6px !important;
}
#tb .web-tb-panel.expanded::-webkit-scrollbar{ height:0; width:0; }
#tb .web-tb-panel .chip{
flex:0 0 auto !important;
white-space:nowrap !important;
max-width:190px !important;
}
#tb .web-tb-panel .chip .chip-name{
display:block !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
#tb .web-tb-expand-btn,
#tb .web-tb-menu-btn{
flex:0 0 32px !important;
width:32px !important;
height:32px !important;
min-width:32px !important;
border-radius:999px !important;
border:1px solid rgba(31,36,48,.08) !important;
background:rgba(255,255,255,.78) !important;
color:#6b7280 !important;
box-shadow:0 8px 18px rgba(25,31,45,.045) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
margin:1px 0 0 0 !important;
padding:0 !important;
}
#tb .web-tb-expand-btn:hover,
#tb .web-tb-menu-btn:hover{
background:rgba(255,255,255,.96) !important;
color:#F97316 !important;
}
#tb .web-tb-expand-btn i{ transition:transform .16s ease !important; font-size:16px !important; }
#tb .web-tb-expand-btn.on i{ transform:rotate(180deg) !important; }
#tb .web-tb-menu-btn i{ font-size:18px !important; }
.tb-settings-menu{
min-width:150px !important;
border-radius:16px !important;
border:1px solid rgba(31,36,48,.10) !important;
box-shadow:0 18px 46px rgba(25,31,45,.16),0 4px 12px rgba(25,31,45,.06) !important;
background:rgba(255,255,255,.96) !important;
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
}
}
/* ─────────────────────────────────────────────
NC11.6.11 — PREMIUM MEMO CHIPBAR POLISH
목적: 메모칩을 작고 선명한 프리미엄 둥근 사각 네비게이션으로 정리
원칙: CSS only. saveAll/loadAll/Realtime/점검모드/계정차단/칩 선택 로직 미수정.
───────────────────────────────────────────── */
#tb .chip,
#tb .chip.chip-h{
height:28px !important;
min-height:28px !important;
padding:0 11px !important;
border-radius:11px !important;
font-size:12px !important;
font-weight:650 !important;
line-height:1 !important;
letter-spacing:-.025em !important;
gap:4px !important;
border:1px solid color-mix(in srgb, var(--board-color, #d9d9de) 38%, rgba(255,255,255,.92)) !important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--board-color, #f4f4f6) 13%, #ffffff 87%) 0%,
color-mix(in srgb, var(--board-color, #f4f4f6) 22%, #ffffff 78%) 100%) !important;
color:color-mix(in srgb, var(--board-color, #4b5563) 58%, #2f3440 42%) !important;
opacity:.68 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.92),
0 1px 2px rgba(17,24,39,.035) !important;
transform:translateY(0) !important;
transition:
opacity .16s ease,
transform .16s ease,
box-shadow .16s ease,
border-color .16s ease,
background .16s ease !important;
}
#tb .chip i,
#tb .chip.chip-h i{
font-size:11px !important;
opacity:.68 !important;
}
#tb .chip .chip-name,
#tb .chip.chip-h .chip-name{
font-size:inherit !important;
font-weight:inherit !important;
letter-spacing:inherit !important;
}
#tb .chip:hover,
#tb .chip.fr,
#tb .chip.chip-h:hover,
#tb .chip.chip-h.fr{
opacity:1 !important;
transform:translateY(-1px) !important;
border-color:color-mix(in srgb, var(--board-color, #f97316) 68%, rgba(255,255,255,.55)) !important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--board-color, #f97316) 18%, #ffffff 82%) 0%,
color-mix(in srgb, var(--board-color, #f97316) 30%, #ffffff 70%) 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.94),
0 6px 16px color-mix(in srgb, var(--board-color, #f97316) 18%, transparent),
0 2px 5px rgba(17,24,39,.055) !important;
}
#tb .chip.fr,
#tb .chip.chip-h.fr{
color:color-mix(in srgb, var(--board-color, #f97316) 76%, #111827 24%) !important;
font-weight:760 !important;
}
#tb .chip:active,
#tb .chip.chip-h:active{
transform:translateY(0) scale(.985) !important;
}
@media (min-width:601px){
#tb.tb{
gap:6px !important;
padding:8px 14px 10px !important;
min-height:46px !important;
align-items:flex-start !important;
}
#tb .web-tb-panel{
gap:6px !important;
max-height:34px !important;
padding:0 2px 1px 0 !important;
}
#tb .web-tb-panel.expanded{
max-height:130px !important;
gap:7px !important;
padding-bottom:7px !important;
}
#tb .web-tb-panel .chip{
max-width:168px !important;
}
#tb .web-tb-expand-btn,
#tb .web-tb-menu-btn{
flex-basis:28px !important;
width:28px !important;
height:28px !important;
min-width:28px !important;
border-radius:11px !important;
border:1px solid rgba(31,36,48,.085) !important;
background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,251,.9)) !important;
color:#6f7480 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 7px rgba(17,24,39,.055) !important;
margin-top:0 !important;
}
#tb .web-tb-expand-btn:hover,
#tb .web-tb-menu-btn:hover{
color:#F97316 !important;
border-color:rgba(249,115,22,.26) !important;
background:linear-gradient(180deg, #fff, #fff7ef) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.98), 0 7px 18px rgba(249,115,22,.11) !important;
transform:translateY(-1px) !important;
}
#tb .web-tb-expand-btn i{font-size:14px !important;}
#tb .web-tb-menu-btn i{font-size:17px !important;}
}
@media (max-width:600px){
#tb.tb{
gap:5px !important;
padding-left:5px !important;
padding-right:5px !important;
}
#tb .tb-chips-scroll{
gap:5px !important;
}
#tb .chip,
#tb .chip.chip-h{
height:27px !important;
min-height:27px !important;
padding:0 10px !important;
border-radius:10px !important;
font-size:11.5px !important;
font-weight:700 !important;
}
#tb .tb-settings-btn,
#tb .tb-collapse-btn{
width:27px !important;
height:27px !important;
min-width:27px !important;
border-radius:10px !important;
background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,251,.92)) !important;
border:1px solid rgba(31,36,48,.085) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 7px rgba(17,24,39,.055) !important;
}
}
/* ─────────────────────────────────────────────
NC11.6.12 — PREMIUM CHIPBAR CLIP GUARD
목적: 프리미엄 칩 디자인 유지 + 선택/첫 칩 상단·모서리 잘림 방지
원칙: CSS only. saveAll/loadAll/Realtime/점검모드/계정차단/칩 선택 로직 미수정.
───────────────────────────────────────────── */
@media (min-width:601px){
#tb.tb{
padding-top:10px !important;
padding-bottom:12px !important;
min-height:50px !important;
overflow:visible !important;
}
#tb .web-tb-panel{
max-height:38px !important;
padding:3px 2px 4px 0 !important;
overflow:hidden !important;
box-sizing:border-box !important;
align-items:center !important;
}
#tb .web-tb-panel.expanded{
max-height:142px !important;
padding-top:3px !important;
padding-bottom:8px !important;
}
#tb .chip:hover,
#tb .chip.fr,
#tb .chip.chip-h:hover,
#tb .chip.chip-h.fr{
transform:translateY(0) !important;
}
#tb .web-tb-expand-btn,
#tb .web-tb-menu-btn{
margin-top:3px !important;
transform:translateY(0) !important;
}
#tb .web-tb-expand-btn:hover,
#tb .web-tb-menu-btn:hover{
transform:translateY(0) !important;
}
}
@media (max-width:600px){
#tb.tb,
#tb .tb-chips-scroll{
overflow:visible !important;
}
#tb .chip:hover,
#tb .chip.fr,
#tb .chip.chip-h:hover,
#tb .chip.chip-h.fr{
transform:translateY(0) !important;
}
}
/* ─────────────────────────────────────────────
NC11.6.14 — MEMO CHIP LEFT CLIP GUARD + ORANGE OPEN DOT
목적: 최좌측 메모칩 좌측 모서리 잘림 방지 + 열린 메모판 표시등을 흰색에서 주황색으로 변경
원칙: CSS only. saveAll/loadAll/Realtime/점검모드/계정차단/칩 선택 로직 미수정.
───────────────────────────────────────────── */
#tb.tb{
overflow:visible !important;
box-sizing:border-box !important;
}
#tb .chip,
#tb .chip.chip-h{
box-sizing:border-box !important;
overflow:visible !important;
}
#tb .web-tb-panel,
#tb .tb-chips-scroll{
box-sizing:border-box !important;
}
#tb .chip-open-dot{
width:7px !important;
height:7px !important;
min-width:7px !important;
min-height:7px !important;
border-radius:999px !important;
background:#F97316 !important;
box-shadow:
0 0 0 2px rgba(255,255,255,.72),
0 0 0 4px rgba(249,115,22,.16),
0 1px 3px rgba(249,115,22,.26) !important;
opacity:1 !important;
}
#tb .chip-hidden .chip-open-dot{
background:rgba(148,163,184,.48) !important;
box-shadow:0 0 0 2px rgba(255,255,255,.62) !important;
opacity:.55 !important;
}
@media (min-width:601px){
#tb.tb{
padding-left:16px !important;
padding-right:16px !important;
}
#tb .web-tb-panel{
padding-left:5px !important;
padding-right:5px !important;
}
#tb .web-tb-panel .chip:first-child{
margin-left:1px !important;
}
}
@media (max-width:600px){
#tb.tb{
padding-left:max(10px, calc(env(safe-area-inset-left, 0px) + 8px)) !important;
padding-right:max(7px, calc(env(safe-area-inset-right, 0px) + 6px)) !important;
}
#tb .tb-chips-scroll{
padding-left:4px !important;
padding-right:4px !important;
scroll-padding-left:8px !important;
overflow-x:auto !important;
overflow-y:visible !important;
}
#tb .tb-chips-scroll .chip:first-child,
#tb .tb-chips-scroll .chip.chip-h:first-child{
margin-left:1px !important;
}
}
/* ─────────────────────────────────────────────
NC11.6.15 — MOBILE CHIP RAIL CONTAINMENT FIX
목적: APK/모바일 메모칩 레일이 우측 메뉴 영역을 침범하지 않도록 복구 + 좌측 칩 잘림 방지 유지
원칙: CSS only. saveAll/loadAll/Realtime/점검모드/계정차단/스와이프 로직/메뉴 이벤트 미수정.
───────────────────────────────────────────── */
@media (max-width:600px){
#tb.tb{
display:flex !important;
align-items:center !important;
flex-wrap:nowrap !important;
gap:6px !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
padding-top:4px !important;
padding-bottom:5px !important;
padding-left:max(9px, calc(env(safe-area-inset-left, 0px) + 8px)) !important;
padding-right:max(6px, calc(env(safe-area-inset-right, 0px) + 6px)) !important;
}
#tb .tb-chips-scroll{
flex:1 1 auto !important;
min-width:0 !important;
max-width:calc(100% - 34px) !important;
display:flex !important;
align-items:center !important;
gap:5px !important;
box-sizing:border-box !important;
overflow-x:auto !important;
overflow-y:hidden !important;
padding:3px 2px 4px 6px !important;
scroll-padding-left:10px !important;
-webkit-overflow-scrolling:touch !important;
scrollbar-width:none !important;
}
#tb .tb-chips-scroll::-webkit-scrollbar{ display:none !important; }
#tb .tb-chips-scroll .chip,
#tb .tb-chips-scroll .chip.chip-h{
flex:0 0 auto !important;
box-sizing:border-box !important;
margin-top:0 !important;
margin-bottom:0 !important;
overflow:visible !important;
}
#tb .tb-chips-scroll .chip:first-child,
#tb .tb-chips-scroll .chip.chip-h:first-child{
margin-left:1px !important;
}
#tb .tb-settings-btn,
#tb .tb-collapse-btn{
flex:0 0 27px !important;
width:27px !important;
min-width:27px !important;
max-width:27px !important;
height:27px !important;
min-height:27px !important;
max-height:27px !important;
margin:3px 0 0 0 !important;
position:relative !important;
z-index:3 !important;
}
}
/* ─────────────────────────────────────────────
NC11.6.16 — WEB CHIP ORDER DROP INDICATOR
목적: 웹 메모칩 위치 변경 안정화 + 들어갈 위치를 얇은 경계선으로 표시
원칙: 칩바 DnD UI만 보강. saveAll/loadAll/Realtime/점검모드/계정차단 미수정.
───────────────────────────────────────────── */
@media (min-width:601px){
#tb .web-tb-panel{
position:relative !important;
}
#tb .chip-web-dnd{
-webkit-user-drag:element;
touch-action:manipulation;
}
#tb .chip-dragging{
opacity:.48 !important;
transform:scale(.96) translateY(1px) !important;
filter:saturate(.9) !important;
}
#tb .chip-drop-indicator-v258{
flex:0 0 2px !important;
width:2px !important;
align-self:stretch !important;
min-height:24px !important;
margin:4px 2px !important;
border-radius:999px !important;
background:linear-gradient(180deg, rgba(249,115,22,.32), rgba(249,115,22,.96), rgba(249,115,22,.32)) !important;
box-shadow:0 0 0 2px rgba(255,255,255,.72), 0 0 10px rgba(249,115,22,.24) !important;
pointer-events:none !important;
}
}
/* ─────────────────────────────────────────────
V278 — Storage Gauge in Top Menu
목적: 웹/앱 우측 상단 메뉴 최상단에 Free 500MB 저장공간 사용량을 가독성 좋게 표시.
원칙: 표시 전용 CSS. 업로드/저장/삭제/Realtime 로직 미수정.
───────────────────────────────────────────── */
.tb-settings-menu .nm-storage-card-v278{
width:100%;
box-sizing:border-box;
padding:22px 22px 20px;
margin:4px 0 12px;
border-radius:20px;
background:linear-gradient(180deg,rgba(249,250,252,.98),rgba(245,247,251,.96));
border:1px solid rgba(31,36,48,.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
cursor:default;
}
.tb-settings-menu .nm-storage-head-v278{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:14px;
}
.tb-settings-menu .nm-storage-title-v278{
display:flex;
align-items:center;
gap:8px;
font-size:15px;
font-weight:800;
letter-spacing:-.025em;
color:var(--txt);
}
.tb-settings-menu .nm-storage-title-v278 i{font-size:19px;color:#F59E0B;}
.tb-settings-menu .nm-storage-percent-v278{
font-size:12px;
font-weight:850;
color:#F97316;
}
.tb-settings-menu .nm-storage-bar-v278{
width:100%;
height:14px;
border-radius:999px;
overflow:hidden;
background:rgba(31,36,48,.09);
}
.tb-settings-menu .nm-storage-bar-v278>div{
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#FDE68A,#FACC15);
transition:width .22s ease;
}
.tb-settings-menu .nm-storage-card-v278.warn .nm-storage-percent-v278{color:#EA580C;}
.tb-settings-menu .nm-storage-card-v278.warn .nm-storage-bar-v278>div{background:linear-gradient(90deg,#FDBA74,#F97316);}
.tb-settings-menu .nm-storage-card-v278.danger .nm-storage-percent-v278{color:#DC2626;}
.tb-settings-menu .nm-storage-card-v278.danger .nm-storage-bar-v278>div{background:linear-gradient(90deg,#FCA5A5,#EF4444);}
.tb-settings-menu .nm-storage-meta-v278{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-top:12px;
font-size:13px;
font-weight:650;
color:var(--txt2);
white-space:nowrap;
}
.tb-settings-menu .nm-storage-plan-v278{
margin-top:9px;
font-size:12px;
font-weight:800;
color:var(--txt3);
letter-spacing:-.01em;
}
@media (max-width:600px){
.tb-settings-menu{min-width:300px !important; right:18px !important;}
.tb-settings-menu .nm-storage-card-v278{padding:22px 20px 20px;margin-bottom:12px;}
}
/* ─────────────────────────────────────────────
V279 — Storage Gauge naming/size/color polish
원칙: 표시 CSS만 보정. 저장/업로드/삭제/Realtime 로직 미수정.
───────────────────────────────────────────── */
.tb-settings-menu{
min-width:300px !important;
right:18px !important;
z-index:999942 !important;
}
.tb-settings-menu .nm-storage-card-v278{
min-height:118px;
}
.tb-settings-menu .nm-storage-card-v278.ok .nm-storage-percent-v278{color:#CA8A04;}
.tb-settings-menu .nm-storage-card-v278.ok .nm-storage-bar-v278>div{background:linear-gradient(90deg,#FDE68A,#FACC15);}
.tb-settings-menu .nm-storage-card-v278.warn .nm-storage-percent-v278{color:#EA580C;}
.tb-settings-menu .nm-storage-card-v278.warn .nm-storage-bar-v278>div{background:linear-gradient(90deg,#FDBA74,#F97316);}
.tb-settings-menu .nm-storage-card-v278.danger .nm-storage-percent-v278{color:#DC2626;}
.tb-settings-menu .nm-storage-card-v278.danger .nm-storage-bar-v278>div{background:linear-gradient(90deg,#FCA5A5,#EF4444);}
@media (max-width:600px){
.tb-settings-menu{
min-width:300px !important;
width:calc(100vw - 44px) !important;
max-width:340px !important;
right:18px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
V303-W1 — 웹 메모장칩 단일 탭다운
목적: 웹에서도 앱처럼 현재 메모장칩 1개만 표시하고, 탭다운에서 여러 메모장을 켜고 끈다.
범위: 웹 툴바 표시 CSS만. 저장/Realtime/보드 데이터/삭제 로직 변경 없음.
═══════════════════════════════════════════════════════════════ */
@media (min-width:601px){
#tb.tb{
align-items:center !important;
overflow:visible !important;
}
#tb .web-active-chip-wrap-v303w1{
flex:1 1 auto !important;
min-width:0 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
}
#tb .web-active-board-chip-v303w1{
max-width:min(360px, calc(100vw - 118px)) !important;
min-height:30px !important;
padding:5px 10px 5px 11px !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
opacity:1 !important;
box-shadow:0 8px 18px rgba(15,23,42,.10) !important;
border:1px solid rgba(255,255,255,.34) !important;
transform:none !important;
}
#tb .web-active-board-chip-v303w1 .chip-name{
display:block !important;
min-width:0 !important;
max-width:220px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-weight:750 !important;
}
#tb .web-active-count-v303w1{
flex:0 0 auto !important;
padding:3px 6px !important;
border-radius:999px !important;
background:rgba(255,255,255,.24) !important;
color:rgba(255,255,255,.96) !important;
font-size:10px !important;
font-weight:900 !important;
line-height:1 !important;
}
#tb .web-active-chip-caret-v303w1{
flex:0 0 auto !important;
font-size:14px !important;
opacity:.95 !important;
}
.web-board-dropdown-v303w1{
position:fixed !important;
z-index:99999 !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
background:rgba(255,255,255,.98) !important;
border:1px solid rgba(249,115,22,.16) !important;
border-radius:18px !important;
padding:8px !important;
box-shadow:0 18px 42px rgba(17,24,39,.18), 0 4px 12px rgba(17,24,39,.06) !important;
backdrop-filter:blur(12px) !important;
}
.web-board-dropdown-item-v303w1{
width:100% !important;
min-height:40px !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:9px 10px !important;
border:0 !important;
border-radius:13px !important;
background:transparent !important;
color:var(--txt) !important;
font-family:inherit !important;
text-align:left !important;
cursor:pointer !important;
}
.web-board-dropdown-item-v303w1:hover{
background:rgba(249,115,22,.08) !important;
}
.web-board-dropdown-item-v303w1.active{
background:rgba(249,115,22,.11) !important;
}
.web-board-dropdown-item-v303w1.hidden{
opacity:.58 !important;
}
.web-board-dropdown-dot-v303w1{
width:10px !important;
height:10px !important;
border-radius:999px !important;
flex:0 0 auto !important;
background:var(--board-color,#F97316) !important;
box-shadow:0 0 0 3px rgba(255,255,255,.86), 0 1px 5px rgba(0,0,0,.17) !important;
}
.web-board-dropdown-name-v303w1{
flex:1 1 auto !important;
min-width:0 !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:calc(var(--memo-size, 11px) + 1.5px) !important;
font-weight:750 !important;
}
.web-board-dropdown-state-v303w1{
flex:0 0 auto !important;
min-width:34px !important;
padding:4px 6px !important;
border-radius:999px !important;
background:rgba(17,24,39,.06) !important;
color:#6b7280 !important;
font-size:10px !important;
font-weight:900 !important;
text-align:center !important;
}
.web-board-dropdown-item-v303w1.visible .web-board-dropdown-state-v303w1{
background:color-mix(in srgb, var(--board-color) 16%, white 84%) !important;
color:color-mix(in srgb, var(--board-color) 70%, #111 30%) !important;
}
/* R1N — 메모장 탭다운: 상태칩 옆 삭제 아이콘 */
.web-board-dropdown-delete-v303w1{
flex:0 0 auto !important;
width:26px !important;
height:26px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
background:rgba(17,24,39,.045) !important;
color:#8a8f98 !important;
font-size:13px !important;
line-height:1 !important;
cursor:pointer !important;
transition:background .14s ease,color .14s ease,transform .14s ease !important;
}
.web-board-dropdown-delete-v303w1:hover{
background:rgba(220,38,38,.09) !important;
color:#dc2626 !important;
}
.web-board-dropdown-delete-v303w1:active{
transform:scale(.94) !important;
}
}
/* ═══════════════════════════════════════════════════════════════
V303-W2 — 웹 헤더 밑줄형 + 중앙 NuMemo 로고 정렬
목적: 웹 메모장칩 영역의 박스감을 제거하고 하단 라인만 남겨 고급스럽게 정리.
범위: 웹 헤더 표시/정렬 CSS + 중앙 로고 표시만. 저장/Realtime/보드/DB/삭제 로직 변경 없음.
═══════════════════════════════════════════════════════════════ */
@media (min-width:601px){
#app{
padding-top:0 !important;
}
#app > .wrap{
padding:0 8px 80px !important;
}
#tb.tb{
position:relative !important;
width:100% !important;
height:64px !important;
min-height:64px !important;
padding:0 18px !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
flex-wrap:nowrap !important;
gap:0 !important;
overflow:visible !important;
background:#fff !important;
border:0 !important;
border-bottom:1px solid rgba(249,115,22,.42) !important;
box-shadow:none !important;
}
#tb .web-active-chip-wrap-v303w1{
flex:1 1 0 !important;
min-width:0 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
z-index:2 !important;
}
#tb .web-active-board-chip-v303w1{
min-height:30px !important;
height:30px !important;
max-width:min(360px, calc(50vw - 74px)) !important;
margin:0 !important;
transform:none !important;
}
#tb .web-header-logo-v303w2{
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
height:42px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:none !important;
z-index:1 !important;
}
#tb .web-header-logo-v303w2 img{
display:block !important;
height:38px !important;
width:auto !important;
max-width:180px !important;
object-fit:contain !important;
}
#tb .web-tb-menu-btn,
#tb .tb-settings-btn.web-tb-menu-btn{
position:relative !important;
z-index:2 !important;
flex:0 0 34px !important;
width:34px !important;
height:34px !important;
min-width:34px !important;
margin:0 0 0 auto !important;
align-self:center !important;
border-radius:999px !important;
}
#tb .web-tb-menu-btn:hover,
#tb .tb-settings-btn.web-tb-menu-btn:hover{
transform:none !important;
}
#tb .gdot,
.gdot{
top:50% !important;
transform:translateY(-50%) !important;
}
.desk{
height:calc(100vh - 64px - 80px) !important;
}
}
/* ─────────────────────────────────────────────
V303-W3 — Web/App unified header polish
- 웹 헤더 좌우 흰색 풀폭 정리
- 웹 하단 주황 밑줄 제거
- 중앙 로고를 확정 로고 이미지로 교체
- 기능/저장/Realtime/DB 로직 변경 없음
───────────────────────────────────────────── */
@media (min-width:601px){
#app{
background:#fff !important;
}
#app > .wrap{
padding-left:8px !important;
padding-right:8px !important;
}
#tb.tb{
width:calc(100% + 16px) !important;
margin-left:-8px !important;
margin-right:-8px !important;
height:64px !important;
min-height:64px !important;
padding:0 24px !important;
background:#fff !important;
border:0 !important;
border-bottom:0 !important;
box-shadow:none !important;
align-items:center !important;
}
#tb .web-active-chip-wrap-v303w1{
flex:1 1 0 !important;
align-items:center !important;
justify-content:flex-start !important;
}
#tb .web-active-board-chip-v303w1{
height:28px !important;
min-height:28px !important;
padding:4px 10px 4px 11px !important;
font-size:12px !important;
max-width:min(330px, calc(50vw - 76px)) !important;
align-self:center !important;
}
#tb .web-header-logo-v303w2,
#tb .web-header-logo-v303w3{
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
height:48px !important;
width:100px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
pointer-events:none !important;
z-index:1 !important;
overflow:hidden !important;
}
#tb .web-header-logo-v303w2 img,
#tb .web-header-logo-v303w3 img{
display:block !important;
width:auto !important;
height:37px !important;
max-width:none !important;
object-fit:contain !important;
}
#tb .web-tb-menu-btn,
#tb .tb-settings-btn.web-tb-menu-btn{
width:34px !important;
height:34px !important;
min-width:34px !important;
align-self:center !important;
margin:0 0 0 auto !important;
}
#app > .wrap > .desk{
border-top-color:var(--bdr3) !important;
}
}
/* ─────────────────────────────────────────────
V303-W3.1 — Header whitespace hard fix
- W3 하단 여백 문제 수정
- 웹 헤더는 좌우 흰색 풀폭 유지
- 웹 하단 주황 밑줄 제거
- 메모장 영역 높이를 다시 화면 하단까지 사용할 수 있게 복구
- 기능/저장/Realtime/DB 로직 변경 없음
───────────────────────────────────────────── */
@media (min-width:601px){
#app{
padding-top:0 !important;
background:#fff !important;
}
#app > .wrap{
padding:0 !important;
height:100vh !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
}
#tb.tb{
flex:0 0 64px !important;
width:100% !important;
margin:0 !important;
padding:0 24px !important;
background:#fff !important;
border:0 !important;
border-bottom:0 !important;
box-shadow:none !important;
}
#app > .wrap > .desk,
.desk{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
margin:0 !important;
padding-bottom:0 !important;
}
}
/* ─────────────────────────────────────────────
V303-W3.6 — Compact rounded editor input
- W3.5의 과한 입력창 높이를 한 줄형으로 축소
- 캡슐이 아닌 둥근 사각형 유지
- + 버튼과 수평 정렬, 장문 작성 시 자동 확장 유지
- 기능/저장/Shift+Enter/Realtime 로직 변경 없음
───────────────────────────────────────────── */
.memo-input,
.mob-textarea{
box-sizing:border-box !important;
border-radius:14px !important;
padding:8px 14px !important;
line-height:1.42 !important;
min-height:40px !important;
max-height:150px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
white-space:pre-wrap !important;
word-break:break-word !important;
resize:none !important;
}
.memo-input{
min-height:40px !important;
padding:8px 14px !important;
}
@media (max-width:600px){
.mob-textarea{
border-radius:14px !important;
min-height:40px !important;
padding:8px 14px !important;
}
}
/* ─────────────────────────────────────────────
V303-W3.7 — Composer input one-line align + normal tag label
- 입력칸 자체 높이를 + 버튼과 나란한 한 줄형으로 슬림 조정
- 부모 row는 중앙 정렬 유지, 장문 입력 시에만 아래로 확장
- 중요도 연회색 탭도 “일반” 툴팁 표시
- 저장/Realtime/Shift+Enter 로직 변경 없음
───────────────────────────────────────────── */
.wir,
.web-input-row-v160,
.mob-input-row{
align-items:center !important;
}
.memo-input,
.mob-textarea{
box-sizing:border-box !important;
min-height:34px !important;
height:34px;
max-height:120px !important;
padding:6px 12px !important;
line-height:20px !important;
border-radius:14px !important;
overflow-y:auto !important;
resize:none !important;
}
.memo-input{
font-size:12px !important;
}
.mob-textarea{
font-size:14px !important;
}
.web-plus-btn-v160,
.mob-plus-btn,
.ppb{
align-self:center !important;
flex:0 0 auto !important;
}
@media (max-width:600px){
.mob-input-row{ align-items:center !important; }
.mob-textarea{
min-height:34px !important;
height:34px;
padding:6px 12px !important;
line-height:20px !important;
}
}
/* ─────────────────────────────────────────────
V303-W3.8 — REAL composer one-line align + visible normal tag
- 기존 저장/Realtime/DB/이벤트 로직 변경 없음
- 입력 row와 textarea 표시 CSS만 최종 보정
- 연회색 중요도 탭은 실제 버튼 내부에 “일반” 텍스트 표시
───────────────────────────────────────────── */
.winp .wir.web-input-row-v160,
.winp .wir,
.mob-input-area .mob-input-row{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:8px !important;
}
.winp .wir.web-input-row-v160{
padding:0 !important;
min-height:38px !important;
}
.winp .wir.web-input-row-v160 .web-plus-btn-v160,
.winp .wir.web-input-row-v160 .ppb,
.mob-input-row .mob-plus-btn,
.mob-input-row .send-btn,
.mob-input-row .mob-send-btn{
align-self:center !important;
flex:0 0 auto !important;
margin:0 !important;
}
.winp .wir.web-input-row-v160 textarea.memo-input,
.winp textarea.memo-input{
align-self:center !important;
flex:1 1 auto !important;
min-width:0 !important;
min-height:38px !important;
max-height:128px !important;
padding:8px 14px !important;
line-height:20px !important;
border-radius:14px !important;
box-sizing:border-box !important;
resize:none !important;
overflow-y:auto !important;
margin:0 !important;
display:block !important;
vertical-align:middle !important;
}
.mob-input-area .mob-input-row textarea.mob-textarea,
.mob-input-row textarea.mob-textarea{
align-self:center !important;
flex:1 1 auto !important;
min-width:0 !important;
min-height:38px !important;
max-height:128px !important;
padding:8px 14px !important;
line-height:20px !important;
border-radius:14px !important;
box-sizing:border-box !important;
resize:none !important;
overflow-y:auto !important;
margin:0 !important;
display:block !important;
}
.web-draft-tags .mob-draft-tag.nm-normal-tag-v303w8,
.mob-draft-tags .mob-draft-tag.nm-normal-tag-v303w8,
.web-draft-tags .mob-draft-tag[data-normal="1"],
.mob-draft-tags .mob-draft-tag[data-normal="1"]{
width:42px !important;
min-width:42px !important;
max-width:42px !important;
height:15px !important;
min-height:15px !important;
padding:0 6px !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background:#f8fafc !important;
border:1px solid #d9dee7 !important;
color:#9aa3af !important;
font-size:9px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.web-draft-tags .mob-draft-tag.nm-normal-tag-v303w8 .nm-normal-tag-text-v303w8,
.mob-draft-tags .mob-draft-tag.nm-normal-tag-v303w8 .nm-normal-tag-text-v303w8{
display:block !important;
pointer-events:none !important;
white-space:nowrap !important;
}
.web-draft-tags .mob-draft-tag.nm-normal-tag-v303w8::before,
.mob-draft-tags .mob-draft-tag.nm-normal-tag-v303w8::before{
display:none !important;
content:none !important;
}
@media (max-width:600px){
.mob-input-area{
padding-top:6px !important;
padding-bottom:8px !important;
}
.mob-input-area .mob-input-row{
min-height:38px !important;
}
}
/* ─────────────────────────────────────────────
V303-W3.11 — 메뉴 상단 계정 정보 헤더 고급화
목적: 기존 저장공간 카드 디자인은 그대로 유지하고, 계정 정보만 예약업 앱 스타일로 정돈.
원칙: CSS/표시부만. 인증/저장/Realtime/DB 로직 미수정.
───────────────────────────────────────────── */
.tb-settings-menu .nm-account-mini-v303w310{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
box-sizing:border-box;
width:100%;
padding:16px 16px 15px;
margin:-6px -2px 12px;
border-bottom:1px solid rgba(15,23,42,.08);
background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(250,251,253,.96) 100%);
cursor:default;
}
.tb-settings-menu .nm-account-mini-avatar-v303w311{
flex:0 0 auto;
width:46px;
height:46px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(180deg, #F5F6F8 0%, #ECEFF3 100%);
color:#3F4652;
box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 1px 2px rgba(15,23,42,.05);
}
.tb-settings-menu .nm-account-mini-avatar-v303w311 i{
font-size:24px;
stroke-width:1.85;
}
.tb-settings-menu .nm-account-mini-main-v303w310{
min-width:0;
flex:1 1 auto;
padding-top:1px;
}
.tb-settings-menu .nm-account-mini-name-v303w310{
font-size:16px;
line-height:1.18;
font-weight:850;
letter-spacing:-.025em;
color:#12161F;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.tb-settings-menu .nm-account-mini-email-v303w310{
margin-top:5px;
font-size:13px;
line-height:1.18;
font-weight:650;
letter-spacing:-.012em;
color:#8A9099;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.tb-settings-menu .nm-account-mini-plan-v303w310{
flex:0 0 auto;
align-self:flex-start;
margin-top:2px;
min-width:48px;
text-align:center;
box-sizing:border-box;
padding:7px 12px 6px;
border-radius:999px;
background:linear-gradient(180deg, rgba(255,244,235,.98) 0%, rgba(255,234,218,.98) 100%);
color:#EA580C;
border:1px solid rgba(249,115,22,.10);
font-size:11px;
line-height:1;
font-weight:900;
letter-spacing:.015em;
text-transform:uppercase;
box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
}
/* ─────────────────────────────────────────────
V303-W3.20 — 웹/앱 메뉴 계정 헤더 공통 적용 + 긴 이메일 레이아웃 보호
원칙: 표시부만 수정. 저장/동기화/DB/업로드/백업복원 로직 미수정.
───────────────────────────────────────────── */
.tb-settings-menu .nm-account-mini-v303w20{
max-width:100%;
overflow:hidden;
}
.tb-settings-menu .nm-account-mini-v303w20 .nm-account-mini-main-v303w310{
min-width:0 !important;
max-width:100%;
overflow:hidden;
}
.tb-settings-menu .nm-account-mini-v303w20 .nm-account-mini-name-v303w310,
.tb-settings-menu .nm-account-mini-v303w20 .nm-account-mini-email-v303w310{
display:block;
min-width:0;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.tb-settings-menu .nm-account-mini-name-long-v303w20{
font-size:14px !important;
letter-spacing:-.035em !important;
}
.tb-settings-menu .nm-account-mini-email-long-v303w20{
font-size:12px !important;
letter-spacing:-.03em !important;
}
.tb-settings-menu .nm-account-mini-email-vlong-v303w20{
font-size:11px !important;
letter-spacing:-.04em !important;
}
html.capacitor .tb-settings-menu .nm-account-mini-v303w20,
body.capacitor .tb-settings-menu .nm-account-mini-v303w20{
padding:14px 14px 13px;
gap:10px;
}
html.capacitor .tb-settings-menu .nm-account-mini-avatar-v303w311,
body.capacitor .tb-settings-menu .nm-account-mini-avatar-v303w311{
width:42px;
height:42px;
}
html.capacitor .tb-settings-menu .nm-account-mini-plan-v303w310,
body.capacitor .tb-settings-menu .nm-account-mini-plan-v303w310{
min-width:44px;
padding:6px 10px 5px;
}
@media (max-width:600px){
.tb-settings-menu{
width:min(340px, calc(100vw - 24px)) !important;
min-width:0 !important;
right:12px !important;
}
.tb-settings-menu .nm-account-mini-v303w20{
padding:14px 13px 13px;
margin:-4px -1px 10px;
gap:10px;
}
.tb-settings-menu .nm-account-mini-avatar-v303w311{
width:40px;
height:40px;
}
.tb-settings-menu .nm-account-mini-avatar-v303w311 i{
font-size:22px;
}
.tb-settings-menu .nm-account-mini-name-v303w310{
font-size:15px;
}
.tb-settings-menu .nm-account-mini-email-v303w310{
font-size:12px;
}
.tb-settings-menu .nm-account-mini-email-long-v303w20{
font-size:11px !important;
}
.tb-settings-menu .nm-account-mini-email-vlong-v303w20{
font-size:10px !important;
}
.tb-settings-menu .nm-account-mini-plan-v303w310{
min-width:42px;
padding:6px 9px 5px;
font-size:10px;
}
}
/* ─────────────────────────────────────────────
V303-W3.32 — Board dropdown/chip size lock
목적: 메모장 켜짐/꺼짐 전환 시 상단 칩과 탭다운 항목 크기 흔들림 방지.
범위: 표시 CSS만. 저장/삭제/업로드/동기화/DB 로직 변경 없음.
───────────────────────────────────────────── */
#tb .web-active-board-chip-v303w1,
#tb .chip.web-active-board-chip-v303w1,
#tb .chip.chip-h.web-active-board-chip-v303w1{
box-sizing:border-box !important;
height:30px !important;
min-height:30px !important;
width:214px !important;
min-width:214px !important;
max-width:214px !important;
padding:4px 10px 4px 11px !important;
border:1px solid rgba(255,255,255,.34) !important;
outline:0 !important;
transform:none !important;
transition:background-color .18s ease, color .18s ease, opacity .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
#tb .web-active-board-chip-v303w1 .chip-name{
flex:1 1 auto !important;
min-width:0 !important;
max-width:none !important;
font-weight:700 !important;
}
#tb .web-active-count-v303w1{
box-sizing:border-box !important;
width:38px !important;
min-width:38px !important;
max-width:38px !important;
text-align:center !important;
}
#tb .web-active-chip-caret-v303w1{
width:14px !important;
min-width:14px !important;
text-align:center !important;
}
.web-board-dropdown-v303w1{
box-sizing:border-box !important;
width:392px !important;
max-width:calc(100vw - 24px) !important;
}
.web-board-dropdown-item-v303w1,
.web-board-dropdown-item-v303w1.visible,
.web-board-dropdown-item-v303w1.hidden,
.web-board-dropdown-item-v303w1.active{
box-sizing:border-box !important;
height:42px !important;
min-height:42px !important;
max-height:42px !important;
padding:9px 10px !important;
border:0 !important;
outline:0 !important;
transform:none !important;
transition:background-color .16s ease, color .16s ease, opacity .16s ease !important;
}
.web-board-dropdown-dot-v303w1{
width:10px !important;
min-width:10px !important;
height:10px !important;
}
.web-board-dropdown-name-v303w1{
font-weight:700 !important;
line-height:1 !important;
}
.web-board-dropdown-state-v303w1{
box-sizing:border-box !important;
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:24px !important;
min-height:24px !important;
padding:0 6px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
line-height:1 !important;
}
@media (max-width:600px){
#tb .mob-active-board-chip-v274,
#tb .chip.mob-active-board-chip-v274,
#tb .chip.chip-h.mob-active-board-chip-v274{
box-sizing:border-box !important;
height:32px !important;
min-height:32px !important;
width:212px !important;
min-width:212px !important;
max-width:min(212px, calc(100vw - 92px)) !important;
padding:4px 10px 4px 12px !important;
border:1px solid rgba(255,255,255,.34) !important;
outline:0 !important;
transform:none !important;
transition:background-color .18s ease, color .18s ease, opacity .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
#tb .mob-active-chip-label-v274{
flex:1 1 auto !important;
min-width:0 !important;
font-weight:700 !important;
}
#tb .mob-active-count-v303w3{
box-sizing:border-box !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:38px !important;
min-width:38px !important;
max-width:38px !important;
height:20px !important;
padding:0 5px !important;
border-radius:999px !important;
background:rgba(255,255,255,.24) !important;
color:rgba(255,255,255,.96) !important;
font-size:10px !important;
font-weight:900 !important;
line-height:1 !important;
}
#tb .mob-active-chip-caret-v274{
width:14px !important;
min-width:14px !important;
text-align:center !important;
}
.mob-board-dropdown-v274{
box-sizing:border-box !important;
}
.mob-board-dropdown-item-v274,
.mob-board-dropdown-item-v274.active{
box-sizing:border-box !important;
height:50px !important;
min-height:50px !important;
max-height:50px !important;
padding:10px 12px !important;
border:0 !important;
outline:0 !important;
transform:none !important;
transition:background-color .16s ease, color .16s ease, opacity .16s ease !important;
}
.mob-board-dropdown-dot-v274{
width:10px !important;
min-width:10px !important;
height:10px !important;
}
.mob-board-dropdown-name-v274{
font-weight:700 !important;
line-height:1 !important;
}
.mob-board-dropdown-state-v303w32{
box-sizing:border-box !important;
width:40px !important;
min-width:40px !important;
max-width:40px !important;
height:24px !important;
min-height:24px !important;
padding:0 6px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
font-size:10px !important;
font-weight:900 !important;
line-height:1 !important;
}
}
/* ─────────────────────────────────────────────
V303-W3.35 — Mobile header chip width rollback/fix
목적: W3.32 size-lock가 앱 상단 메모장칩을 212px로 강제해 중앙 로고를 침범한 문제 복구.
범위: 모바일 헤더 표시 CSS만. 드롭다운 목록/저장/삭제/업로드/동기화/DB 로직 변경 없음.
───────────────────────────────────────────── */
@media (max-width:600px){
#tb .tb-active-chip-wrap-v274{
flex:1 1 0 !important;
min-width:0 !important;
max-width:126px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
z-index:2 !important;
}
#tb .mob-active-board-chip-v274,
#tb .chip.mob-active-board-chip-v274,
#tb .chip.chip-h.mob-active-board-chip-v274{
box-sizing:border-box !important;
height:24px !important;
min-height:24px !important;
width:118px !important;
min-width:0 !important;
max-width:118px !important;
padding:2px 7px 2px 8px !important;
border-radius:999px !important;
gap:4px !important;
align-self:center !important;
transform:none !important;
box-shadow:0 4px 11px rgba(15,23,42,.10) !important;
transition:background-color .18s ease, color .18s ease, opacity .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
#tb .mob-active-chip-label-v274{
flex:1 1 auto !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:10px !important;
font-weight:700 !important;
line-height:1 !important;
letter-spacing:-.02em !important;
}
#tb .mob-active-count-v303w3{
display:none !important;
}
#tb .mob-active-chip-caret-v274{
font-size:11px !important;
line-height:1 !important;
flex:0 0 auto !important;
}
}
/* ─ W3.36 로그인 진입부 정리: 소셜/찾기/회원가입 필드 ─ */
#auth-screen .setup-card { max-width: 420px; width: min(420px, calc(100vw - 28px)); }
.auth-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.auth-birth-row { display:flex; gap:6px; }
.auth-birth-row select { flex:1; min-width:0; }
.auth-optional { color:var(--txt3); font-size:10px; font-weight:400; }
.auth-phone-note { margin: -4px 0 9px; color:var(--txt3); font-size:11px; line-height:1.35; }
.auth-check { display:flex; gap:7px; align-items:flex-start; margin:8px 0 12px; color:var(--txt2); font-size:12px; line-height:1.35; cursor:pointer; }
.auth-check input { margin-top:2px; accent-color:#F97316; }
.auth-consent-box { margin:6px 0 8px; padding:9px 10px; border:1px solid var(--bdr2); border-radius:12px; background:rgba(249,115,22,.035); }
.auth-consent-box .auth-check { margin:4px 0; }
.auth-check b { color:#F97316; margin-right:3px; }
.auth-check-soft { color:var(--txt3); }
.auth-signup-note { margin:-2px 0 10px; color:var(--txt3); font-size:10.5px; line-height:1.35; }
.auth-links { display:flex; align-items:center; justify-content:center; gap:2px; margin:10px 0 4px; }
.auth-links button { border:0; background:none; color:#F97316; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; padding:5px 8px; }
.auth-link-sep { color:var(--txt3); font-size:11px; }
.auth-phone-row { display:flex; gap:6px; }
.auth-phone-row input { min-width:0; flex:1; }
.auth-phone-row button { flex:0 0 auto; padding:0 10px; border:1px solid var(--bdr2); border-radius:8px; background:var(--bg); color:#F97316; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.auth-phone-row button:hover { border-color:#F97316; background:rgba(249,115,22,.06); }
.auth-divider { display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--txt3); font-size:11px; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--bdr2); }
.auth-socials { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.auth-social { height:36px; border:1px solid var(--bdr2); border-radius:9px; background:var(--bg); color:var(--txt); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.auth-social:hover { border-color:#F97316; background:rgba(249,115,22,.06); }
.auth-social-pending { color:var(--txt2); background:rgba(148,163,184,.06); }
.auth-social-note { margin-top:8px; color:var(--txt3); font-size:10.5px; line-height:1.35; text-align:center; }
.auth-reset-panel { margin:10px 0 12px; padding:12px; border:1px solid var(--bdr2); border-radius:12px; background:rgba(249,115,22,.06); }
.auth-reset-title { font-size:13px; font-weight:800; color:var(--txt); margin-bottom:3px; }
.auth-reset-desc { font-size:11px; color:var(--txt2); line-height:1.35; margin-bottom:8px; }
.auth-reset-panel input { width:100%; margin:6px 0; }
.auth-reset-panel .btn-main { margin-top:8px; }
@media (max-width:480px) {
#auth-screen { align-items:flex-start; }
#auth-screen .setup-wrap { padding-top:18px; padding-bottom:24px; }
.auth-grid-2 { grid-template-columns:1fr; gap:0; }
}
/* W3.40 signup realtime guard */
.auth-email-row { display:flex; gap:6px; }
.auth-email-row input { min-width:0; flex:1; }
.auth-email-row button { flex:0 0 auto; padding:0 10px; border:1px solid var(--bdr2); border-radius:8px; background:var(--bg); color:#F97316; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.auth-email-row button:hover { border-color:#F97316; background:rgba(249,115,22,.06); }
.auth-live-hint { min-height:14px; margin-top:4px; color:var(--txt3); font-size:10.5px; line-height:1.25; }
.auth-live-hint.ok { color:#16a34a; }
.auth-live-hint.warn { color:#F97316; }
.auth-live-hint.bad { color:#dc2626; }
.auth-check-all { border-bottom:1px solid var(--bdr2); padding-bottom:7px; margin-bottom:3px; }
#auth-submit:disabled { opacity:.55; cursor:not-allowed; filter:grayscale(.2); }
@media(max-width:520px){ .auth-email-row { align-items:stretch; } .auth-email-row button { padding:0 9px; } }
/* ─────────────────────────────────────────────
W3.54 — 플랜 변경 진입 버튼 연결
범위: 우측 상단 메뉴 내 버튼 UI/진입만. Billing/DB/권한/저장공간 제한 로직 미수정.
───────────────────────────────────────────── */
.tb-settings-menu .nm-storage-plan-row-v354{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:9px;
}
.tb-settings-menu .nm-storage-plan-row-v354 .nm-storage-plan-v278{
margin-top:0;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.tb-settings-menu .nm-storage-plan-manage-v354{
flex:0 0 auto;
border:0;
background:rgba(249,115,22,.09);
color:#EA580C;
border-radius:999px;
padding:7px 11px 6px;
font-size:12px;
line-height:1;
font-weight:900;
letter-spacing:-.02em;
cursor:pointer;
}
.tb-settings-menu .nm-storage-plan-manage-v354:active{
transform:translateY(1px);
background:rgba(249,115,22,.14);
}
.tb-settings-menu .nm-account-mini-plan-btn-v354{
cursor:pointer;
font-family:inherit;
}
.tb-settings-menu .nm-account-mini-plan-btn-v354:active{
transform:translateY(1px);
}
/* ─────────────────────────────────────────────
W3.54 — 플랜 변경 페이지
범위: 플랜 페이지 UI. Billing/DB/권한/저장공간 제한 로직 미수정.
───────────────────────────────────────────── */
.nm-plan-page-w354{
position:fixed;
inset:0;
z-index:999950;
display:none;
background:linear-gradient(180deg,#FFFDFB 0%,#F8FAFC 100%);
color:var(--txt);
overflow:auto;
-webkit-overflow-scrolling:touch;
}
.nm-plan-page-w354.on{display:block;}
.nm-plan-shell-w354{
width:min(1120px,100%);
margin:0 auto;
box-sizing:border-box;
padding:calc(env(safe-area-inset-top,0px) + 26px) 30px 54px;
}
.nm-plan-top-w354{
display:flex;
align-items:flex-start;
gap:16px;
padding:6px 0 28px;
}
.nm-plan-back-w354{
flex:0 0 auto;
width:42px;
height:42px;
border:1px solid rgba(15,23,42,.08);
border-radius:15px;
background:rgba(255,255,255,.9);
color:#0F172A;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 8px 22px rgba(15,23,42,.055);
}
.nm-plan-back-w354 i{font-size:22px;stroke-width:2;}
.nm-plan-titlebox-w354{min-width:0;padding-top:1px;}
.nm-plan-titlebox-w354 h1{
margin:0;
font-size:31px;
line-height:1.12;
font-weight:950;
letter-spacing:-.055em;
color:#0F172A;
}
.nm-plan-titlebox-w354 p{
margin:9px 0 0;
font-size:15px;
line-height:1.62;
font-weight:650;
letter-spacing:-.02em;
color:#5F6B7A;
}
.nm-plan-titlebox-w354 p span{color:#7B8794;font-weight:650;}
.nm-plan-section-w354{display:grid;gap:20px;}
.nm-plan-card-w354{
border:1px solid rgba(15,23,42,.075);
border-radius:25px;
background:rgba(255,255,255,.94);
box-shadow:0 14px 34px rgba(15,23,42,.045);
padding:25px 28px;
box-sizing:border-box;
}
.nm-plan-card-head-w354{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}
.nm-plan-card-label-w354{
font-size:13px;
line-height:1.25;
font-weight:850;
letter-spacing:-.02em;
color:#64748B;
}
.nm-plan-current-name-w354{
margin-top:8px;
font-size:27px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
color:#0F172A;
}
.nm-plan-active-badge-w354,
.nm-plan-recommend-badge-w354,
.nm-plan-pro-badge-w354{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
min-height:29px;
padding:0 12px;
border-radius:999px;
font-size:12px;
font-weight:900;
letter-spacing:-.02em;
white-space:nowrap;
}
.nm-plan-active-badge-w354{background:rgba(255,122,0,.10);color:#F06400;}
.nm-plan-current-usage-row-w354{
display:flex;
align-items:baseline;
gap:6px;
margin-top:24px;
color:#0F172A;
font-size:19px;
line-height:1.2;
font-weight:850;
letter-spacing:-.035em;
}
.nm-plan-current-usage-row-w354 strong{color:#EF233C;font-weight:950;}
.nm-plan-current-usage-row-w354 em{
margin-left:auto;
color:#E11D2E;
font-style:normal;
font-size:18px;
font-weight:950;
}
.nm-plan-current-bar-w354{
height:11px;
margin-top:12px;
border-radius:999px;
background:#F1F5F9;
overflow:hidden;
}
.nm-plan-current-bar-w354 > div{
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#FB7185,#EF233C);
transition:width .25s ease;
}
.nm-plan-current-meta-w354{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-top:17px;
font-size:15px;
line-height:1.35;
color:#64748B;
font-weight:700;
letter-spacing:-.02em;
}
.nm-plan-current-meta-w354 span:first-child{display:inline-flex;align-items:center;gap:8px;color:#4B5563;}
.nm-plan-current-meta-w354 i{font-size:21px;color:#F97316;}
.nm-plan-current-meta-w354 b{font-weight:750;}
.nm-plan-options-grid-w354{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
}
.nm-plan-premium-card-w354,
.nm-plan-pro-card-w354{position:relative;overflow:hidden;}
.nm-plan-premium-card-w354{
border-color:rgba(249,115,22,.24);
background:
radial-gradient(circle at 82% 2%,rgba(255,122,0,.10),transparent 34%),
linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,251,247,.96));
}
.nm-plan-premium-name-w354,
.nm-plan-pro-name-w354{
font-size:22px;
line-height:1;
font-weight:950;
letter-spacing:-.035em;
}
.nm-plan-premium-name-w354{color:#F06400;}
.nm-plan-pro-name-w354{color:#8B5CF6;}
.nm-plan-recommend-badge-w354{background:linear-gradient(135deg,#FF8A1F,#F06400);color:#fff;}
.nm-plan-recommend-badge-w354 i{font-size:13px;}
.nm-plan-pro-badge-w354{background:rgba(139,92,246,.13);color:#8B5CF6;}
.nm-plan-premium-storage-w354,
.nm-plan-pro-storage-w354{
margin-top:22px;
font-size:43px;
line-height:1;
font-weight:950;
letter-spacing:-.06em;
color:#0F172A;
}
.nm-plan-pro-desc-w354{
margin:14px 0 0;
font-size:14.5px;
line-height:1.45;
font-weight:650;
letter-spacing:-.02em;
color:#64748B;
}
.nm-plan-price-grid-w354{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin-top:16px;
}
.nm-plan-price-grid-w354 > div{
position:relative;
border:1px solid rgba(15,23,42,.07);
border-radius:17px;
background:rgba(255,255,255,.74);
padding:13px 14px;
box-sizing:border-box;
}
.nm-plan-price-label-w354{
display:block;
margin-bottom:4px;
font-size:12px;
line-height:1.2;
font-weight:850;
color:#9CA3AF;
letter-spacing:-.02em;
}
.nm-plan-price-grid-w354 strong{
font-size:17px;
line-height:1.2;
font-weight:950;
color:#0F172A;
letter-spacing:-.035em;
}
.nm-plan-price-grid-w354 small{
float:right;
margin-top:-2px;
padding:5px 9px;
border-radius:999px;
background:rgba(249,115,22,.10);
color:#EA580C;
font-size:11px;
line-height:1;
font-weight:900;
}
.nm-plan-feature-list-w354{
list-style:none;
margin:19px 0 0;
padding:17px 0 0;
border-top:1px solid rgba(15,23,42,.06);
display:grid;
gap:11px;
}
.nm-plan-feature-list-w354 li{
display:flex;
align-items:center;
gap:9px;
font-size:14px;
line-height:1.38;
font-weight:750;
letter-spacing:-.02em;
color:#465266;
}
.nm-plan-feature-list-w354 i{
flex:0 0 auto;
width:21px;
height:21px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(249,115,22,.11);
color:#EA580C;
font-size:15px;
stroke-width:3;
}
.nm-plan-feature-list-pro-w354 i{background:rgba(139,92,246,.12);color:#8B5CF6;}
.nm-plan-premium-start-w354,
.nm-plan-pro-ready-w354{
width:100%;
height:49px;
margin-top:24px;
border:0;
border-radius:15px;
font-family:inherit;
font-size:15px;
font-weight:950;
letter-spacing:-.025em;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.nm-plan-premium-start-w354{
background:linear-gradient(135deg,#FF8A1F,#F06400);
color:#fff;
cursor:pointer;
box-shadow:0 12px 22px rgba(240,100,0,.18);
}
.nm-plan-premium-start-w354:active{transform:translateY(1px);}
.nm-plan-pro-ready-w354{
background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(15,23,42,.055));
color:#8B5CF6;
cursor:not-allowed;
opacity:.96;
}
.nm-plan-pro-note-w354{
margin:-4px 0 0;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:13px;
line-height:1.4;
font-weight:700;
color:#7B8794;
letter-spacing:-.02em;
}
@media(max-width:860px){
.nm-plan-shell-w354{width:min(760px,100%);}
.nm-plan-options-grid-w354{grid-template-columns:1fr;}
}
@media(max-width:600px){
.nm-plan-shell-w354{padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 40px;}
.nm-plan-top-w354{gap:12px;padding-bottom:24px;}
.nm-plan-back-w354{width:39px;height:39px;border-radius:14px;}
.nm-plan-titlebox-w354 h1{font-size:26px;}
.nm-plan-titlebox-w354 p{font-size:14px;line-height:1.58;}
.nm-plan-section-w354{gap:14px;}
.nm-plan-card-w354{border-radius:23px;padding:22px;}
.nm-plan-current-name-w354{font-size:24px;}
.nm-plan-active-badge-w354,
.nm-plan-recommend-badge-w354,
.nm-plan-pro-badge-w354{min-height:27px;padding:0 11px;font-size:11.5px;}
.nm-plan-current-usage-row-w354{font-size:16.5px;margin-top:20px;}
.nm-plan-current-usage-row-w354 em{font-size:16px;}
.nm-plan-current-meta-w354{font-size:13.5px;align-items:flex-start;}
.nm-plan-premium-name-w354,
.nm-plan-pro-name-w354{font-size:21px;}
.nm-plan-premium-storage-w354,
.nm-plan-pro-storage-w354{font-size:38px;margin-top:20px;}
.nm-plan-price-grid-w354{grid-template-columns:1fr;gap:8px;}
.nm-plan-premium-start-w354,
.nm-plan-pro-ready-w354{height:47px;margin-top:22px;}
}
/* ─────────────────────────────────────────────
W3.54-5 — 결제 준비 페이지 UI
범위: Premium 시작하기 후 안내 화면. Billing/DB/권한/저장공간 제한 미연결.
───────────────────────────────────────────── */
.nm-payment-ready-page-w354{
position:fixed;
inset:0;
z-index:999951;
display:none;
background:linear-gradient(180deg,#FFFDFB 0%,#F8FAFC 100%);
color:var(--txt);
overflow:auto;
-webkit-overflow-scrolling:touch;
}
.nm-payment-ready-page-w354.on{display:block;}
.nm-payment-ready-shell-w354{
width:min(760px,100%);
margin:0 auto;
box-sizing:border-box;
padding:calc(env(safe-area-inset-top,0px) + 26px) 30px 54px;
}
.nm-payment-ready-top-w354{
display:flex;
align-items:flex-start;
gap:16px;
padding:6px 0 28px;
}
.nm-payment-ready-card-w354{
position:relative;
overflow:hidden;
border:1px solid rgba(249,115,22,.20);
border-radius:28px;
background:
radial-gradient(circle at 82% 0%,rgba(255,122,0,.11),transparent 35%),
rgba(255,255,255,.96);
box-shadow:0 18px 38px rgba(15,23,42,.055);
padding:32px;
box-sizing:border-box;
}
.nm-payment-ready-badge-w354{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:30px;
padding:0 13px;
border-radius:999px;
background:rgba(255,122,0,.11);
color:#F06400;
font-size:12px;
font-weight:950;
letter-spacing:-.02em;
}
.nm-payment-ready-card-w354 h2{
margin:18px 0 0;
font-size:24px;
line-height:1;
font-weight:950;
letter-spacing:-.04em;
color:#F06400;
}
.nm-payment-ready-card-w354 > strong{
display:block;
margin-top:18px;
font-size:52px;
line-height:1;
font-weight:950;
letter-spacing:-.065em;
color:#0F172A;
}
.nm-payment-ready-card-w354 > p{
margin:18px 0 0;
font-size:15px;
line-height:1.62;
font-weight:650;
letter-spacing:-.02em;
color:#64748B;
}
.nm-payment-ready-summary-w354{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:24px;
}
.nm-payment-ready-summary-w354 > div{
border:1px solid rgba(15,23,42,.07);
border-radius:18px;
background:rgba(255,255,255,.78);
padding:15px 16px;
box-sizing:border-box;
}
.nm-payment-ready-summary-w354 span{
display:block;
margin-bottom:5px;
font-size:12px;
line-height:1.2;
font-weight:850;
color:#9CA3AF;
}
.nm-payment-ready-summary-w354 b{
font-size:18px;
line-height:1.2;
font-weight:950;
letter-spacing:-.035em;
color:#0F172A;
}
.nm-payment-ready-return-w354{
width:100%;
height:50px;
margin-top:26px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#FF8A1F,#F06400);
color:#fff;
font-family:inherit;
font-size:15px;
font-weight:950;
letter-spacing:-.025em;
cursor:pointer;
box-shadow:0 12px 22px rgba(240,100,0,.16);
}
.nm-payment-ready-note-w354{
margin:16px 0 0 !important;
display:flex;
align-items:flex-start;
gap:7px;
font-size:12.5px !important;
line-height:1.45 !important;
color:#7B8794 !important;
}
.nm-payment-ready-note-w354 i{flex:0 0 auto;margin-top:1px;font-size:15px;}
@media(max-width:600px){
.nm-payment-ready-shell-w354{padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 40px;}
.nm-payment-ready-top-w354{gap:12px;padding-bottom:24px;}
.nm-payment-ready-card-w354{border-radius:24px;padding:24px;}
.nm-payment-ready-card-w354 > strong{font-size:44px;}
.nm-payment-ready-summary-w354{grid-template-columns:1fr;gap:9px;}
}
/* ─────────────────────────────────────────────
W3.54-6 — Plan page final polish
범위: UI/반응형/문구 완성도. Billing/DB/권한/저장공간 제한 미연결.
───────────────────────────────────────────── */
.nm-plan-shell-w354{
width:min(1120px,100%);
padding:calc(env(safe-area-inset-top,0px) + 24px) 30px 52px;
}
.nm-plan-top-w354{padding-bottom:24px;}
.nm-plan-titlebox-w354 h1{font-size:32px;letter-spacing:-.06em;}
.nm-plan-titlebox-w354 p{margin-top:8px;line-height:1.58;}
.nm-plan-section-w354{gap:19px;}
.nm-plan-card-w354{
border-color:rgba(15,23,42,.068);
box-shadow:0 16px 34px rgba(15,23,42,.038);
}
.nm-plan-current-card-w354{padding:26px 29px 25px;}
.nm-plan-current-name-w354{font-size:26px;}
.nm-plan-current-usage-row-w354{margin-top:23px;}
.nm-plan-current-bar-w354{height:10px;margin-top:11px;background:#EEF2F7;}
.nm-plan-current-meta-w354{margin-top:16px;}
.nm-plan-options-grid-w354{align-items:stretch;}
.nm-plan-premium-card-w354,
.nm-plan-pro-card-w354{padding:28px;}
.nm-plan-premium-storage-w354,
.nm-plan-pro-storage-w354{font-size:42px;}
.nm-plan-price-grid-w354{gap:11px;margin-top:17px;}
.nm-plan-price-grid-w354 > div{min-height:69px;padding:14px 16px;}
.nm-plan-price-grid-w354 strong{font-size:18px;}
.nm-plan-feature-list-w354{margin-top:20px;padding-top:18px;gap:12px;}
.nm-plan-feature-list-w354 li{font-size:14.2px;}
.nm-plan-premium-start-w354,
.nm-plan-pro-ready-w354{height:50px;margin-top:25px;}
.nm-plan-pro-desc-w354{min-height:42px;}
.nm-plan-pro-note-w354{margin:-1px 0 0;}
.nm-payment-ready-card-w354{padding:34px;}
.nm-payment-ready-note-w354{margin-top:15px !important;}
.nm-payment-ready-platform-w354{
margin:8px 0 0 !important;
font-size:12.5px !important;
line-height:1.45 !important;
font-weight:700 !important;
color:#94A3B8 !important;
letter-spacing:-.02em !important;
}
@media(max-width:860px){
.nm-plan-shell-w354{width:min(760px,100%);}
.nm-plan-options-grid-w354{grid-template-columns:1fr;gap:16px;}
.nm-plan-pro-desc-w354{min-height:0;}
.nm-plan-pro-note-w354{margin:0;}
}
@media(max-width:600px){
.nm-plan-shell-w354{padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 38px;}
.nm-plan-top-w354{gap:11px;padding:4px 0 20px;}
.nm-plan-titlebox-w354 h1{font-size:27px;}
.nm-plan-titlebox-w354 p{font-size:13.6px;line-height:1.55;}
.nm-plan-section-w354{gap:13px;}
.nm-plan-card-w354{border-radius:22px;padding:21px;}
.nm-plan-current-card-w354{padding:21px;}
.nm-plan-current-name-w354{font-size:23px;}
.nm-plan-current-usage-row-w354{font-size:15.6px;margin-top:18px;gap:4px;}
.nm-plan-current-usage-row-w354 em{font-size:15.5px;}
.nm-plan-current-bar-w354{height:9px;margin-top:10px;}
.nm-plan-current-meta-w354{font-size:13px;margin-top:14px;gap:10px;}
.nm-plan-current-meta-w354 i{font-size:19px;}
.nm-plan-premium-card-w354,
.nm-plan-pro-card-w354{padding:22px;}
.nm-plan-premium-storage-w354,
.nm-plan-pro-storage-w354{font-size:37px;margin-top:19px;}
.nm-plan-price-grid-w354{grid-template-columns:1fr;gap:8px;margin-top:15px;}
.nm-plan-price-grid-w354 > div{min-height:auto;padding:13px 14px;}
.nm-plan-feature-list-w354{margin-top:18px;padding-top:16px;gap:10px;}
.nm-plan-feature-list-w354 li{font-size:13.6px;align-items:flex-start;}
.nm-plan-feature-list-w354 i{width:20px;height:20px;font-size:14px;margin-top:0;}
.nm-plan-premium-start-w354,
.nm-plan-pro-ready-w354{height:47px;margin-top:21px;border-radius:15px;font-size:14.2px;}
.nm-payment-ready-card-w354{padding:24px;}
.nm-payment-ready-platform-w354{font-size:12px !important;}
}
/* ─────────────────────────────────────────────
W3.54-7 — Release micro polish
범위: 플랜/결제 준비 화면의 마이크로 UX 보정만. Billing/DB/권한/저장공간 제한 로직 미수정.
───────────────────────────────────────────── */
.nm-plan-page-w354.on .nm-plan-card-w354,
.nm-payment-ready-page-w354.on .nm-payment-ready-card-w354{
animation:nmPlanFadeUpW354 .20s ease both;
}
@keyframes nmPlanFadeUpW354{
from{opacity:.0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
.nm-plan-card-w354,
.nm-payment-ready-card-w354{
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nm-plan-back-w354,
.nm-plan-premium-start-w354,
.nm-payment-ready-return-w354{
transition:transform .14s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.nm-plan-back-w354:hover{
box-shadow:0 10px 26px rgba(15,23,42,.075);
}
.nm-plan-back-w354:active,
.nm-payment-ready-return-w354:active{
transform:translateY(1px) scale(.99);
}
.nm-plan-premium-card-w354:hover{
border-color:rgba(249,115,22,.32);
box-shadow:0 18px 40px rgba(249,115,22,.075);
}
.nm-plan-premium-start-w354:hover{
filter:saturate(1.02) brightness(1.01);
box-shadow:0 15px 28px rgba(240,100,0,.20);
}
.nm-plan-premium-start-w354:active{
transform:translateY(1px) scale(.995);
}
.nm-plan-price-grid-w354 > div:first-child{
border-color:rgba(249,115,22,.13);
background:rgba(255,255,255,.86);
}
.nm-plan-price-grid-w354 > div:nth-child(2){
background:rgba(255,255,255,.68);
}
.nm-plan-current-usage-row-w354 strong,
.nm-plan-current-usage-row-w354 em{
text-shadow:0 1px 0 rgba(255,255,255,.72);
}
.nm-plan-pro-note-w354{
padding-bottom:8px;
}
.nm-payment-ready-platform-w354{
text-align:center;
}
@media(max-width:600px){
.nm-plan-page-w354.on .nm-plan-card-w354,
.nm-payment-ready-page-w354.on .nm-payment-ready-card-w354{
animation-duration:.16s;
}
.nm-plan-current-usage-row-w354{
align-items:center;
}
.nm-plan-pro-note-w354{
align-items:flex-start;
text-align:left;
padding:2px 4px 10px;
}
}
@media(prefers-reduced-motion:reduce){
.nm-plan-page-w354.on .nm-plan-card-w354,
.nm-payment-ready-page-w354.on .nm-payment-ready-card-w354{animation:none;}
.nm-plan-card-w354,
.nm-payment-ready-card-w354,
.nm-plan-back-w354,
.nm-plan-premium-start-w354,
.nm-payment-ready-return-w354{transition:none;}
}
/* W3.57 — current plan state button polish */
.nm-plan-premium-start-w354:disabled,
.nm-plan-premium-start-w354.nm-plan-current-disabled-w357,
.nm-plan-pro-ready-w354.nm-plan-current-disabled-w357{
cursor:default;
opacity:.78;
transform:none!important;
box-shadow:none!important;
}
.nm-plan-premium-start-w354:disabled{
background:#f4f5f7!important;
color:#6b7280!important;
border-color:#eceff3!important;
}
/* ─────────────────────────────────────────────
W3.61 — ProductCatalog / 결제 안내 진입 UI
범위: 결제 안내 페이지와 안내 버튼만. Billing/DB/권한/저장공간 제한 로직 미수정.
───────────────────────────────────────────── */
.nm-payment-guide-link-w361{
width:100%;
min-height:44px;
border:1px solid rgba(15,23,42,.08);
border-radius:16px;
background:rgba(255,255,255,.76);
color:#475569;
font-size:13.5px;
font-weight:850;
letter-spacing:-.02em;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
cursor:pointer;
margin-top:-4px;
transition:background .16s ease, border-color .16s ease, transform .14s ease, box-shadow .18s ease;
}
.nm-payment-guide-link-w361:hover{
background:#fff;
border-color:rgba(249,115,22,.20);
box-shadow:0 10px 24px rgba(15,23,42,.045);
}
.nm-payment-guide-link-w361:active{transform:translateY(1px) scale(.995);}
.nm-payment-guide-page-w361{
position:fixed;
inset:0;
z-index:999952;
display:none;
overflow:auto;
background:linear-gradient(180deg,#F8FAFC 0%,#FFF7ED 100%);
-webkit-overflow-scrolling:touch;
}
.nm-payment-guide-page-w361.on{display:block;}
.nm-payment-guide-shell-w361{
width:min(760px,100%);
margin:0 auto;
padding:clamp(18px,4vw,34px);
box-sizing:border-box;
}
.nm-payment-guide-card-w361{
border:1px solid rgba(15,23,42,.075);
border-radius:25px;
background:rgba(255,255,255,.95);
box-shadow:0 16px 34px rgba(15,23,42,.05);
padding:28px;
box-sizing:border-box;
animation:nmPlanFadeUpW354 .20s ease both;
}
.nm-payment-guide-card-w361 h2{
margin:14px 0 8px;
font-size:24px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
color:#0F172A;
}
.nm-payment-guide-list-w361{
list-style:none;
padding:18px 0 4px;
margin:0;
display:grid;
gap:12px;
}
.nm-payment-guide-list-w361 li{
display:flex;
align-items:flex-start;
gap:10px;
color:#475569;
font-size:14px;
line-height:1.55;
font-weight:650;
letter-spacing:-.02em;
}
.nm-payment-guide-list-w361 i{
flex:0 0 auto;
width:22px;
height:22px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(249,115,22,.10);
color:#F97316;
font-size:14px;
margin-top:1px;
}
@media(max-width:520px){
.nm-payment-guide-card-w361{border-radius:22px;padding:24px;}
.nm-payment-guide-card-w361 h2{font-size:22px;}
}
/* W3.77 — Android Google Play Billing minimum bridge */
.nm-billing-android-box-w377{display:none;margin:16px 0;padding:14px;border:1px solid rgba(249,115,22,.25);border-radius:18px;background:rgba(249,115,22,.06)}
.nm-billing-android-head-w377{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.nm-billing-android-head-w377 b{font-size:14px}.nm-billing-android-head-w377 span{font-size:12px;color:var(--muted,#64748b)}
.nm-billing-android-actions-w377{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.nm-billing-android-actions-w377 button{border:0;border-radius:12px;padding:11px 10px;font-weight:800;background:#f97316;color:#fff}.nm-billing-android-actions-w377 button:first-child,.nm-billing-android-actions-w377 button:last-child{background:#334155}
.nm-billing-status-w377{margin:10px 0 0;font-size:12px;line-height:1.45;color:#64748b}.nm-billing-status-w377[data-type="ok"]{color:#16a34a}.nm-billing-status-w377[data-type="warn"]{color:#d97706}.nm-billing-status-w377[data-type="error"]{color:#dc2626}.nm-billing-note-w377{margin:6px 0 0;font-size:11px;line-height:1.45;color:#94a3b8}
@media(max-width:520px){.nm-billing-android-actions-w377{grid-template-columns:1fr}}
/* W3.88.4 — unified orange back button for plan/contact-style pages */
.nm-plan-back-w354{
color:#f97316 !important;
background:#fff7ed !important;
border-color:#fed7aa !important;
box-shadow:0 8px 24px rgba(249,115,22,.10) !important;
}
.nm-plan-back-w354 i{color:#f97316 !important;}
.nm-plan-back-w354:hover{background:#ffedd5 !important;}
/* V303-W3.90.8 memo delete dialog premium layer polish
- 배경은 어둡게 유지하되 삭제 확인 카드 자체는 순백색으로 고정
- 팝업 폭/여백/버튼 크기를 줄여 모바일에서 더 고급스럽고 단정하게 표시
- 기존 삭제 로직(cDM/xDM) 변경 없음, CSS 표시 레이어만 보정
*/
.dc.on {
display:flex !important;
position:fixed !important;
left:50% !important;
top:50% !important;
transform:translate(-50%, -50%) !important;
z-index:1000900 !important;
width:min(276px, calc(100vw - 72px)) !important;
min-height:auto !important;
margin:0 !important;
padding:18px 18px 16px !important;
box-sizing:border-box !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
background:#ffffff !important;
color:#111827 !important;
border:1px solid rgba(15,23,42,.08) !important;
border-radius:20px !important;
box-shadow:0 22px 70px rgba(15,23,42,.28), 0 2px 8px rgba(15,23,42,.08) !important;
pointer-events:auto !important;
isolation:isolate !important;
}
.dc.on::before {
content:"";
position:fixed;
left:-100vw;
right:-100vw;
top:-100vh;
bottom:-100vh;
background:rgba(15,23,42,.34) !important;
z-index:-1;
pointer-events:none;
}
.dc.on p {
width:100%;
margin:0 0 15px !important;
font-size:16px !important;
line-height:1.25 !important;
font-weight:850 !important;
letter-spacing:-.02em !important;
color:#111827 !important;
text-align:center !important;
}
.dc.on .dcb {
width:100%;
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:10px !important;
}
.dc.on .dcbt {
flex:0 0 auto !important;
min-width:62px !important;
min-height:38px !important;
padding:8px 14px !important;
border-radius:11px !important;
font-size:14px !important;
line-height:1 !important;
font-weight:850 !important;
letter-spacing:-.02em !important;
border:1px solid rgba(15,23,42,.08) !important;
background:#ffffff !important;
color:#111827 !important;
box-shadow:0 3px 10px rgba(15,23,42,.08) !important;
}
.dc.on .dcbt.dng {
min-width:108px !important;
background:#ef4444 !important;
color:#ffffff !important;
border-color:#ef4444 !important;
box-shadow:0 8px 20px rgba(239,68,68,.24) !important;
}
/* V303-W3.90.9 memo delete dialog final polish
body 최상단 전역 모달: 배경만 dim, 카드 자체는 순백색/소형 프리미엄 팝업
*/
#nm-memo-delete-dialog-v3909{
position:fixed !important;
inset:0 !important;
z-index:2147483000 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
pointer-events:auto !important;
box-sizing:border-box !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-backdrop-v3909{
position:absolute !important;
inset:0 !important;
background:rgba(15,23,42,.38) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-card-v3909{
position:relative !important;
z-index:1 !important;
width:min(256px, 64vw) !important;
max-width:calc(100vw - 112px) !important;
min-width:218px !important;
box-sizing:border-box !important;
padding:18px 18px 16px !important;
border-radius:20px !important;
background:#ffffff !important;
background-color:#ffffff !important;
color:#111827 !important;
border:1px solid rgba(15,23,42,.08) !important;
box-shadow:0 20px 54px rgba(15,23,42,.24), 0 2px 8px rgba(15,23,42,.08) !important;
opacity:1 !important;
filter:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
transform:none !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-title-v3909{
margin:0 0 16px !important;
color:#111827 !important;
font-size:16px !important;
line-height:1.25 !important;
font-weight:850 !important;
letter-spacing:-.03em !important;
text-align:center !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-actions-v3909{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
width:100% !important;
}
#nm-memo-delete-dialog-v3909 button{
appearance:none !important;
-webkit-appearance:none !important;
border:0 !important;
cursor:pointer !important;
height:40px !important;
border-radius:12px !important;
padding:0 15px !important;
font-family:inherit !important;
font-size:14px !important;
font-weight:850 !important;
letter-spacing:-.03em !important;
line-height:40px !important;
white-space:nowrap !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-delete-v3909{
min-width:112px !important;
background:#ef4444 !important;
color:#ffffff !important;
box-shadow:0 8px 18px rgba(239,68,68,.24) !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-cancel-v3909{
min-width:70px !important;
background:#ffffff !important;
color:#111827 !important;
border:1px solid rgba(15,23,42,.10) !important;
box-shadow:0 4px 12px rgba(15,23,42,.10) !important;
}
/* 과거 row 내부 삭제창이 남더라도 전역 모달과 중복 표시되지 않게 방지 */
html.nm-delete-dialog-open-v3909 .row .dc.on{
display:none !important;
}
@media (max-width:420px){
#nm-memo-delete-dialog-v3909 .nm-md-card-v3909{
width:min(248px, 66vw) !important;
max-width:calc(100vw - 96px) !important;
padding:17px 16px 15px !important;
border-radius:19px !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-title-v3909{font-size:15.5px !important;margin-bottom:15px !important;}
#nm-memo-delete-dialog-v3909 button{height:39px !important;line-height:39px !important;font-size:13.5px !important;padding:0 13px !important;}
#nm-memo-delete-dialog-v3909 .nm-md-delete-v3909{min-width:106px !important;}
#nm-memo-delete-dialog-v3909 .nm-md-cancel-v3909{min-width:66px !important;}
}
/* V303-W3.90.10 memo delete dialog Android/WebView alignment final
배경만 dim, 카드/버튼은 중앙축 기준으로 고정 정렬한다. */
#nm-memo-delete-dialog-v3909{
position:fixed !important;
inset:0 !important;
z-index:2147483000 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
pointer-events:auto !important;
box-sizing:border-box !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-backdrop-v3909{
position:absolute !important;
inset:0 !important;
background:rgba(15,23,42,.38) !important;
opacity:1 !important;
filter:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-card-v3909{
position:relative !important;
z-index:1 !important;
width:min(244px, 68vw) !important;
min-width:226px !important;
max-width:calc(100vw - 96px) !important;
box-sizing:border-box !important;
padding:18px 18px 16px !important;
border-radius:20px !important;
background:#ffffff !important;
background-color:#ffffff !important;
color:#111827 !important;
border:1px solid rgba(15,23,42,.08) !important;
box-shadow:0 20px 54px rgba(15,23,42,.24), 0 2px 8px rgba(15,23,42,.08) !important;
opacity:1 !important;
filter:none !important;
transform:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-title-v3909{
display:block !important;
width:100% !important;
margin:0 0 16px !important;
color:#111827 !important;
font-size:16px !important;
line-height:1.25 !important;
font-weight:850 !important;
letter-spacing:-.03em !important;
text-align:center !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-actions-v3909{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
width:100% !important;
margin:0 auto !important;
padding:0 !important;
box-sizing:border-box !important;
text-align:center !important;
}
#nm-memo-delete-dialog-v3909 button{
appearance:none !important;
-webkit-appearance:none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 auto !important;
box-sizing:border-box !important;
height:40px !important;
margin:0 !important;
border-radius:12px !important;
padding:0 0 !important;
font-family:inherit !important;
font-size:14px !important;
font-weight:850 !important;
letter-spacing:-.03em !important;
line-height:1 !important;
white-space:nowrap !important;
vertical-align:middle !important;
cursor:pointer !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-delete-v3909{
width:116px !important;
min-width:116px !important;
max-width:116px !important;
border:1px solid #ef4444 !important;
background:#ef4444 !important;
color:#ffffff !important;
box-shadow:0 8px 18px rgba(239,68,68,.24) !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-cancel-v3909{
width:70px !important;
min-width:70px !important;
max-width:70px !important;
border:1px solid rgba(245,158,11,.95) !important;
background:#ffffff !important;
color:#111827 !important;
box-shadow:0 4px 12px rgba(15,23,42,.10) !important;
}
html.nm-delete-dialog-open-v3909 .row .dc.on{
display:none !important;
}
@media (max-width:420px){
#nm-memo-delete-dialog-v3909 .nm-md-card-v3909{
width:238px !important;
min-width:0 !important;
max-width:calc(100vw - 88px) !important;
padding:17px 16px 15px !important;
border-radius:19px !important;
}
#nm-memo-delete-dialog-v3909 .nm-md-title-v3909{font-size:15.5px !important;margin-bottom:15px !important;}
#nm-memo-delete-dialog-v3909 button{height:39px !important;font-size:13.5px !important;}
#nm-memo-delete-dialog-v3909 .nm-md-delete-v3909{width:112px !important;min-width:112px !important;max-width:112px !important;}
#nm-memo-delete-dialog-v3909 .nm-md-cancel-v3909{width:68px !important;min-width:68px !important;max-width:68px !important;}
}
/* V303-W3.90.13 memo image width containment
메모 첨부 이미지가 우측 확인/삭제 액션 레일을 침범하지 않도록
이미지/그리드 폭을 반드시 본문(.rb) 내부 폭 안에서만 맞춘다.
저장/삭제/업로드/동기화 로직 변경 없음. */
.row .rb{
min-width:0 !important;
max-width:100% !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.row .rb .pimg,
.row .rb .mig,
.row .rb .vmemo,
.row .rb .pdf-card{
max-width:100% !important;
box-sizing:border-box !important;
}
.row .rb .pimg{
width:fit-content !important;
max-width:min(270px, 100%) !important;
}
.row .rb .pimg img{
width:auto !important;
max-width:100% !important;
height:auto !important;
object-fit:contain !important;
box-sizing:border-box !important;
}
.row .rb .mig.c1{
width:min(270px, 100%) !important;
max-width:100% !important;
grid-template-columns:minmax(0, 1fr) !important;
}
.row .rb .mig.c1 .mc,
.row .rb .mig.c1 .mc img{
max-width:100% !important;
box-sizing:border-box !important;
}
.row .rb .mig.c1 .mc img{
width:100% !important;
height:auto !important;
object-fit:contain !important;
}
.row .rb .mig.c2,
.row .rb .mig.c3{
width:100% !important;
max-width:100% !important;
grid-template-columns:repeat(auto-fit, minmax(0, 1fr)) !important;
}
.row .rb .mig.c2 .mc,
.row .rb .mig.c3 .mc{
min-width:0 !important;
max-width:100% !important;
}
.row .rb .mig.c2 .mc img,
.row .rb .mig.c3 .mc img{
width:100% !important;
max-width:100% !important;
height:auto !important;
object-fit:contain !important;
}
/* W3.500: c5(3장 이상, 5칸+뱃지) — 사용자가 원한 최종 형태는 2열(줄바꿈)이 아니라
가로 한 줄로 5칸을 쭉 배열하는 것. 칸 모양(3:4)은 그대로 유지. */
.row .rb .mig.c5{
width:100% !important;
max-width:100% !important;
grid-template-columns:repeat(5, 1fr) !important;
}
.row .rb .mig.c5 .mc{
min-width:0 !important;
max-width:100% !important;
}
.row .rb .mig.c5 .mc img{
width:100% !important;
max-width:100% !important;
height:100% !important;
object-fit:contain !important;
}
.row .rm{
max-width:100% !important;
box-sizing:border-box !important;
}
.row .ra{
flex:0 0 auto !important;
min-width:20px !important;
z-index:2 !important;
}
@media (max-width:600px){
.row .rb .pimg,
.row .rb .mig.c1{
max-width:min(230px, 100%) !important;
}
.row .rb .pimg img,
.row .rb .mig.c1 .mc img{
max-width:100% !important;
max-height:300px !important;
}
}
/* V303-W3.90.18 Memo board calm frame design
CSS-only: 메모 저장/삭제/동기화/Auth/Billing/Storage/SQL 변경 없음.
목표: 샘플 방향 유지하되 쨍한 원색을 줄이고, 메모 하나하나를 회색 테두리 카드로 정리. */
:root{
--nm-w39018-card-border:#e5e7eb;
--nm-w39018-inner-border:#d6d9df;
--nm-w39018-text:#252a33;
--nm-w39018-muted:#8b94a3;
}
.win[style*="--board-color"],
.mobbrd[style*="--board-color"]{
/* 원색을 그대로 쓰지 않고, 회색/와인 톤을 섞어 차분하게 만든 메모장 프레임 */
--nm-w39018-frame:color-mix(in srgb, var(--board-color, #9f3f46) 62%, #334155 38%);
--nm-w39018-frame-dark:color-mix(in srgb, var(--board-color, #8f333b) 54%, #1f2937 46%);
--nm-w39018-frame-soft:color-mix(in srgb, var(--board-color, #9f3f46) 8%, #fff 92%);
--nm-w39018-frame-line:color-mix(in srgb, var(--board-color, #9f3f46) 20%, #cbd5e1 80%);
}
/* Web memo board frame */
body:not(.mobile-mode) .win[style*="--board-color"]{
background:#fff !important;
border:1px solid rgba(31,36,48,.12) !important;
border-radius:11px !important;
box-shadow:0 10px 28px rgba(15,23,42,.12), 0 1px 2px rgba(15,23,42,.08) !important;
overflow:hidden !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wi{
background:transparent !important;
border-radius:11px !important;
overflow:hidden !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh{
height:38px !important;
min-height:38px !important;
padding:0 12px 0 16px !important;
background:linear-gradient(180deg, color-mix(in srgb, var(--nm-w39018-frame) 92%, #fff 8%), var(--nm-w39018-frame-dark)) !important;
border:0 !important;
border-bottom:1px solid rgba(255,255,255,.20) !important;
color:#fff !important;
box-shadow:none !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh::before{display:none !important;content:none !important;}
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wtitle,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .whead,
body:not(.mobile-mode) .win[style*="--board-color"] .wh i,
body:not(.mobile-mode) .win[style*="--board-color"] .wh svg{
color:#fff !important;
fill:currentColor !important;
stroke:currentColor !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wtitle{
font-weight:850 !important;
font-size:13px !important;
letter-spacing:-.03em !important;
text-align:center !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wb2,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .ib,
body:not(.mobile-mode) .win[style*="--board-color"] .wh button{
width:28px !important;height:28px !important;
border:0 !important;
background:transparent !important;
color:#fff !important;
border-radius:999px !important;
box-shadow:none !important;
opacity:.96 !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wb2:hover,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .ib:hover,
body:not(.mobile-mode) .win[style*="--board-color"] .wh button:hover{
background:rgba(255,255,255,.14) !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wb{
margin:0 !important;
padding:0 !important;
background:#fff !important;
border:0 !important;
border-bottom:0 !important;
border-radius:0 !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.65) !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .winp{
margin:0 !important;
padding:0 0 10px 0 !important;
background:#fff !important;
border:0 !important;
border-top:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}
/* Memo item: each memo has its own quiet gray border */
.row{
background:#fff !important;
border:1px solid var(--nm-w39018-card-border) !important;
border-radius:12px !important;
margin:0 0 10px !important;
box-shadow:0 1px 2px rgba(15,23,42,.035) !important;
overflow:hidden !important;
}
.row:hover{
border-color:#d1d5db !important;
box-shadow:0 5px 14px rgba(15,23,42,.065) !important;
}
.row .rm{
padding:13px 12px 12px 0px !important;
align-items:flex-start !important;
}
.row .rb{padding:0 8px 0 8px !important;}
.row .rt,
.row .thread-text{
color:var(--nm-w39018-text) !important;
font-weight:650 !important;
line-height:1.58 !important;
}
.row .rsub{color:var(--nm-w39018-muted) !important;}
.row-tag-btn{
width:10px !important;
height:10px !important;
min-width:10px !important;
border-radius:50% !important;
margin:20px 0 0 12px !important;
align-self:flex-start !important;
flex-shrink:0 !important;
opacity:.88 !important;
}
.row-tag-btn:hover{width:12px !important;height:12px !important;min-width:12px !important;opacity:1 !important;}
.row .ra{padding-top:2px !important;}
.row .rbt{color:#9ca3af !important;background:transparent !important;border-radius:8px !important;}
.row .rbt:hover{background:#f3f4f6 !important;color:#374151 !important;}
.row .rbt.dl:hover{color:#ef4444 !important;background:#fef2f2 !important;}
/* Bottom input: sample처럼 깔끔한 흰색 입력 바 */
.memo-input,
.mob-textarea{
background:#fff !important;
border:1px solid #d9dde5 !important;
border-radius:5px !important;
min-height:36px !important;
padding:8px 13px !important;
color:#1f2937 !important;
box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
}
.memo-input:focus,
.mob-textarea:focus{
border-color:color-mix(in srgb, var(--nm-w39018-frame, var(--board-color, #9f3f46)) 45%, #d1d5db 55%) !important;
box-shadow:0 0 0 3px color-mix(in srgb, var(--nm-w39018-frame, var(--board-color, #9f3f46)) 12%, transparent) !important;
}
.ppb,
.mob-plus-btn{
width:30px !important;height:30px !important;
border-radius:999px !important;
background:#fff !important;
color:var(--nm-w39018-frame, var(--board-color, #9f3f46)) !important;
border:1.5px solid currentColor !important;
box-shadow:none !important;
}
.ppb i,.mob-plus-btn i{color:currentColor !important;stroke:currentColor !important;}
.send-btn,
.mob-send-btn{
width:32px !important;height:32px !important;
border-radius:999px !important;
background:#fff !important;
color:var(--nm-w39018-frame, var(--board-color, #9f3f46)) !important;
border:0 !important;
box-shadow:none !important;
}
.send-btn i,.mob-send-btn i{color:currentColor !important;stroke:currentColor !important;}
.ppb:hover,.mob-plus-btn:hover,.send-btn:hover,.mob-send-btn:hover{
background:color-mix(in srgb, var(--nm-w39018-frame, var(--board-color, #9f3f46)) 8%, #fff 92%) !important;
}
/* Mobile frame/header/body */
@media (max-width:700px){
.mobbrd[style*="--board-color"]{
background:#fff !important;
border:1px solid rgba(31,36,48,.12) !important;
border-radius:11px !important;
overflow:hidden !important;
box-shadow:0 8px 22px rgba(15,23,42,.10) !important;
}
.mob-unified-hdr[style*="--board-color"],
.mobbrd[style*="--board-color"] .mob-unified-hdr{
height:40px !important;
min-height:40px !important;
padding:0 10px !important;
background:linear-gradient(180deg, color-mix(in srgb, var(--nm-w39018-frame) 92%, #fff 8%), var(--nm-w39018-frame-dark)) !important;
border:0 !important;
border-top-left-radius:11px !important;
border-top-right-radius:11px !important;
border-bottom:1px solid rgba(255,255,255,.20) !important;
color:#fff !important;
box-shadow:none !important;
}
.mob-unified-hdr::before{display:none !important;content:none !important;}
.mob-unified-hdr .mob-board-name{
color:#fff !important;
font-weight:850 !important;
font-size:13px !important;
letter-spacing:-.03em !important;
text-align:center !important;
}
.mob-unified-hdr .mob-board-name i,
.mob-unified-hdr .mob-board-name .ti,
.mob-unified-hdr .mob-nav-btn,
.mob-unified-hdr .wb2,
.mob-unified-hdr .ib,
.mob-unified-hdr button:not(.bmi):not(.mam-item):not(.mob-media-btn),
.mob-unified-hdr .mob-nav-btn > i,
.mob-unified-hdr .wb2 > i,
.mob-unified-hdr .ib > i,
.mob-unified-hdr button:not(.bmi):not(.mam-item):not(.mob-media-btn) > i{
color:#fff !important;
stroke:currentColor !important;
fill:currentColor !important;
}
.mob-unified-hdr .mob-nav-btn,
.mob-unified-hdr .wb2,
.mob-unified-hdr .ib,
.mob-unified-hdr button:not(.bmi):not(.mam-item):not(.mob-media-btn){
background:transparent !important;
border:0 !important;
box-shadow:none !important;
border-radius:999px !important;
opacity:.96 !important;
}
.mob-unified-hdr .mob-nav-btn:hover,
.mob-unified-hdr .wb2:hover,
.mob-unified-hdr button:not(.bmi):not(.mam-item):not(.mob-media-btn):hover,
.mob-unified-hdr .mob-nav-btn:active,
.mob-unified-hdr .wb2:active,
.mob-unified-hdr button:not(.bmi):not(.mam-item):not(.mob-media-btn):active{
background:rgba(255,255,255,.14) !important;
}
.mobbrd[style*="--board-color"] .mobbdy{
margin:0 !important;
padding:0 0 12px 0 !important;
background:#fff !important;
border:0 !important;
border-bottom:0 !important;
border-radius:0 !important;
}
.mobbrd[style*="--board-color"] .mob-input-area{
margin:0 !important;
padding:8px 0 0 0 !important;
background:#fff !important;
border:0 !important;
border-top:0 !important;
border-bottom-left-radius:11px !important;
border-bottom-right-radius:11px !important;
box-shadow:none !important;
}
.mob-input-area .mob-input-row{
gap:9px !important;
align-items:center !important;
}
.mob-input-area .mob-input-row textarea.mob-textarea,
.mob-input-row textarea.mob-textarea{
min-height:36px !important;
height:36px !important;
border-radius:999px !important;
padding:8px 14px !important;
}
.mobbdy .row{
margin-bottom:12px !important;
border:1px solid var(--nm-w39018-card-border) !important;
border-radius:12px !important;
background:#fff !important;
}
}
/* V303-W3.90.19 Memo board finishing fixes
CSS-only: menu icon visibility, scrollbar inset, board chip polish, title contrast,
input placeholder alignment, plus-button square background removal. */
.win[style*="--board-color"],
.mobbrd[style*="--board-color"]{
--nm-w39019-frame:color-mix(in srgb, var(--board-color, #9f3f46) 58%, #374151 42%);
--nm-w39019-frame-dark:color-mix(in srgb, var(--board-color, #8f333b) 48%, #1f2937 52%);
--nm-w39019-frame-soft:color-mix(in srgb, var(--board-color, #9f3f46) 14%, #ffffff 86%);
--nm-w39019-gray-border:#d9dee7;
--nm-w39019-card-border:#e1e5ec;
}
/* 1) Board menu: never inherit white icon color from colored header */
.win[style*="--board-color"] .bmenu,
.mobbrd[style*="--board-color"] .bmenu{
background:#fff !important;
color:#243041 !important;
border:1px solid #e5e7eb !important;
border-radius:15px !important;
box-shadow:0 12px 32px rgba(15,23,42,.16) !important;
overflow:hidden !important;
}
.win[style*="--board-color"] .bmenu .msl,
.mobbrd[style*="--board-color"] .bmenu .msl{
color:#4b5563 !important;
background:#fff !important;
}
.win[style*="--board-color"] .bmenu .mi,
.mobbrd[style*="--board-color"] .bmenu .mi{
color:#263241 !important;
background:#fff !important;
}
.win[style*="--board-color"] .bmenu .mi i,
.mobbrd[style*="--board-color"] .bmenu .mi i{
color:#6b7280 !important;
stroke:currentColor !important;
fill:none !important;
}
.win[style*="--board-color"] .bmenu .mi:hover,
.mobbrd[style*="--board-color"] .bmenu .mi:hover{
background:#f8fafc !important;
}
.win[style*="--board-color"] .bmenu .mi.dng,
.mobbrd[style*="--board-color"] .bmenu .mi.dng,
.win[style*="--board-color"] .bmenu .mi.dng i,
.mobbrd[style*="--board-color"] .bmenu .mi.dng i{
color:#dc2626 !important;
}
.win[style*="--board-color"] .bmenu .mdv,
.mobbrd[style*="--board-color"] .bmenu .mdv{
background:#e5e7eb !important;
}
/* 2) Scrollbar top inset: keep scrollbar inside rounded white memo area */
.win[style*="--board-color"] .wb,
.mobbrd[style*="--board-color"] .mobbdy{
scrollbar-gutter:stable !important;
overflow:auto !important;
}
.win[style*="--board-color"] .wb::-webkit-scrollbar,
.mobbrd[style*="--board-color"] .mobbdy::-webkit-scrollbar{
width:8px !important;
}
.win[style*="--board-color"] .wb::-webkit-scrollbar-track,
.mobbrd[style*="--board-color"] .mobbdy::-webkit-scrollbar-track{
background:transparent !important;
margin-top:14px !important;
margin-bottom:14px !important;
}
.win[style*="--board-color"] .wb::-webkit-scrollbar-thumb,
.mobbrd[style*="--board-color"] .mobbdy::-webkit-scrollbar-thumb{
background:#9ca3af !important;
border-radius:999px !important;
border:2px solid #fff !important;
}
/* 3) Active board chip: app/web current design-compatible calm pill */
#tb .web-active-board-chip-v303w1,
#tb .chip.web-active-board-chip-v303w1,
#tb .chip.chip-h.web-active-board-chip-v303w1,
#tb .mob-active-board-chip-v274,
#tb .chip.mob-active-board-chip-v274,
#tb .chip.chip-h.mob-active-board-chip-v274{
background:linear-gradient(180deg,
color-mix(in srgb, var(--board-color, #9f3f46) 64%, #fff 36%),
color-mix(in srgb, var(--board-color, #9f3f46) 54%, #111827 46%)) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.55) !important;
border-radius:999px !important;
box-shadow:none !important;
height:28px !important;
min-height:28px !important;
padding:0 10px !important;
}
#tb .web-active-board-chip-v303w1 .chip-name,
#tb .web-active-board-chip-v303w1 .web-active-count-v303w1,
#tb .web-active-board-chip-v303w1 i,
#tb .mob-active-board-chip-v274 .mob-active-chip-label-v274,
#tb .mob-active-board-chip-v274 i{
color:#fff !important;
text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
opacity:1 !important;
}
#tb .web-active-board-chip-v303w1 .chip-name,
#tb .mob-active-board-chip-v274 .mob-active-chip-label-v274{
font-weight:800 !important;
letter-spacing:-.03em !important;
}
#tb .web-active-board-chip-v303w1 .web-active-count-v303w1{
background:rgba(255,255,255,.20) !important;
border:1px solid rgba(255,255,255,.24) !important;
border-radius:999px !important;
padding:1px 6px !important;
}
#tb .web-active-board-chip-v303w1 .chip-open-dot{
background:#fff !important;
opacity:.88 !important;
}
#tb .web-active-board-chip-v303w1:hover,
#tb .mob-active-board-chip-v274:hover{
filter:saturate(.96) brightness(.98) !important;
}
/* 4) Web board header title/icons contrast and enterprise-like finish */
body:not(.mobile-mode) .win[style*="--board-color"] .wh{
background:linear-gradient(180deg, color-mix(in srgb, var(--nm-w39019-frame) 95%, #fff 5%), var(--nm-w39019-frame-dark)) !important;
border-bottom:1px solid rgba(255,255,255,.20) !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wtitle,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .whead,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wb2,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .ib,
body:not(.mobile-mode) .win[style*="--board-color"] .wh button,
body:not(.mobile-mode) .win[style*="--board-color"] .wh i,
body:not(.mobile-mode) .win[style*="--board-color"] .wh svg{
color:#fff !important;
stroke:currentColor !important;
fill:none !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wtitle{
text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
}
/* Card borders: memo 하나하나 회색 테두리 유지 */
.win[style*="--board-color"] .row,
.mobbrd[style*="--board-color"] .row{
border:1px solid var(--nm-w39019-card-border) !important;
border-radius:12px !important;
background:#fff !important;
box-shadow:0 1px 2px rgba(15,23,42,.035) !important;
}
/* 5) Input placeholder vertical centering */
.winp .wir.web-input-row-v160,
.mob-input-area .mob-input-row{
align-items:center !important;
}
.winp .wir.web-input-row-v160 textarea.memo-input,
.winp textarea.memo-input,
.mob-input-area textarea.mob-textarea,
.mob-input-row textarea.mob-textarea{
min-height:38px !important;
max-height:200px !important;
line-height:20px !important;
padding:8px 14px !important;
display:block !important;
align-self:center !important;
border-radius:5px !important;
box-sizing:border-box !important;
}
.memo-input::placeholder,
.mob-textarea::placeholder{
color:#8b94a3 !important;
line-height:20px !important;
}
/* 6) Remove faint square background around plus button */
.win[style*="--board-color"] .web-plus-btn-v160,
.win[style*="--board-color"] .ppb,
.mobbrd[style*="--board-color"] .mob-plus-btn,
.mob-input-area .mob-plus-btn,
.web-plus-btn-v160{
background:transparent !important;
background-color:transparent !important;
border:0 !important;
box-shadow:none !important;
width:34px !important;
min-width:34px !important;
height:34px !important;
border-radius:999px !important;
color:var(--nm-w39019-frame, var(--board-color, #9f3f46)) !important;
}
.win[style*="--board-color"] .web-plus-btn-v160 i,
.win[style*="--board-color"] .ppb i,
.mobbrd[style*="--board-color"] .mob-plus-btn i,
.web-plus-btn-v160 i{
color:currentColor !important;
stroke:currentColor !important;
}
.win[style*="--board-color"] .web-plus-btn-v160:hover,
.win[style*="--board-color"] .ppb:hover,
.mobbrd[style*="--board-color"] .mob-plus-btn:hover{
background:rgba(255,255,255,.55) !important;
}
/* V303-W3.90.21 — Web/App memo composer final alignment fix
CSS-only: remove textarea inner scroll, center placeholder/text vertically, clean horizontal layout. */
.winp,
.mob-input-area{
overflow:visible !important;
}
.winp .wir.web-input-row-v160,
.winp .wir,
.mob-input-area .mob-input-row,
.mob-input-row{
display:flex !important;
align-items:center !important;
gap:10px !important;
min-height:46px !important;
}
.winp .wir.web-input-row-v160 textarea.memo-input,
.winp textarea.memo-input,
textarea.memo-input,
.mob-input-area .mob-input-row textarea.mob-textarea,
.mob-input-row textarea.mob-textarea,
textarea.mob-textarea{
min-height:38px !important;
max-height:200px !important;
line-height:20px !important;
padding:9px 16px !important;
margin:0 !important;
overflow-y:auto !important;
resize:none !important;
scrollbar-width:none !important;
-ms-overflow-style:none !important;
display:block !important;
align-self:center !important;
vertical-align:middle !important;
border-radius:5px !important;
box-sizing:border-box !important;
white-space:pre-wrap !important;
}
.winp .wir.web-input-row-v160 textarea.memo-input::-webkit-scrollbar,
.winp textarea.memo-input::-webkit-scrollbar,
textarea.memo-input::-webkit-scrollbar,
.mob-input-area .mob-input-row textarea.mob-textarea::-webkit-scrollbar,
.mob-input-row textarea.mob-textarea::-webkit-scrollbar,
textarea.mob-textarea::-webkit-scrollbar{
width:0 !important;
height:0 !important;
display:none !important;
}
.memo-input::placeholder,
.mob-textarea::placeholder{
color:#8b94a3 !important;
line-height:20px !important;
opacity:1 !important;
}
.winp .wir.web-input-row-v160 .web-plus-btn-v160,
.winp .wir.web-input-row-v160 .ppb,
.winp .wir .web-plus-btn-v160,
.winp .wir .ppb,
.mob-input-row .mob-plus-btn,
.mob-input-row .send-btn,
.mob-input-row .mob-send-btn,
.mob-input-area .mob-plus-btn,
.mob-input-area .send-btn,
.mob-input-area .mob-send-btn{
align-self:center !important;
margin-top:0 !important;
margin-bottom:0 !important;
flex-shrink:0 !important;
}
/* ═══════════════════════════════════════════════════════
V303-W3.90.22 — App/Web header title + composer hard fix
CSS-only. No JS/SQL/Auth/Billing/Storage/save/delete/sync changes.
- Mobile/App board title forced white and 1px smaller
- Header icons forced white after older mobile overrides
- Memo input textarea fixed one-line composer, no inner scrollbar
- Plus button square background removed
═══════════════════════════════════════════════════════ */
/* App/Web board title: final hard override */
.mob-unified-hdr .mob-board-name,
.mob-unified-hdr[style*="--board-color"] .mob-board-name,
.mobbrd[style*="--board-color"] .mob-unified-hdr .mob-board-name,
body.mobile-mode .mob-unified-hdr .mob-board-name,
body.mobile-mode .mob-unified-hdr[style*="--board-color"] .mob-board-name,
body.mobile-mode .mobbrd[style*="--board-color"] .mob-unified-hdr .mob-board-name,
html.capacitor .mob-unified-hdr .mob-board-name,
html.capacitor .mob-unified-hdr[style*="--board-color"] .mob-board-name,
html.capacitor .mobbrd[style*="--board-color"] .mob-unified-hdr .mob-board-name,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wtitle,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .whead{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
opacity:1 !important;
text-shadow:0 1px 1px rgba(0,0,0,.16) !important;
}
/* App title font 1px smaller than the prior 10.6px mobile rule */
.mob-unified-hdr .mob-board-name,
.mob-unified-hdr[style*="--board-color"] .mob-board-name,
.mobbrd[style*="--board-color"] .mob-unified-hdr .mob-board-name,
body.mobile-mode .mob-unified-hdr .mob-board-name,
html.capacitor .mob-unified-hdr .mob-board-name{
font-size:9.6px !important;
line-height:1 !important;
font-weight:800 !important;
letter-spacing:-.035em !important;
}
/* Web title: 1px down while keeping readability */
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wtitle,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .whead{
font-size:12px !important;
line-height:1 !important;
font-weight:800 !important;
}
/* Header icons must stay white on colored header */
.mob-unified-hdr .mob-nav-btn,
.mob-unified-hdr .wb2,
.mob-unified-hdr .ib,
.mob-unified-hdr button:not(.bmi):not(.mam-item):not(.mob-media-btn),
.mob-unified-hdr .mob-nav-btn > i,
.mob-unified-hdr .wb2 > i,
.mob-unified-hdr .ib > i,
.mob-unified-hdr button:not(.bmi):not(.mam-item):not(.mob-media-btn) > i,
.mob-unified-hdr .mob-nav-btn > i::before,
.mob-unified-hdr .wb2 > i::before,
.mob-unified-hdr .ib > i::before,
.mob-unified-hdr button:not(.bmi):not(.mam-item):not(.mob-media-btn) > i::before,
body:not(.mobile-mode) .win[style*="--board-color"] .wh button,
body:not(.mobile-mode) .win[style*="--board-color"] .wh button i,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wb2,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .wb2 i,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .ib,
body:not(.mobile-mode) .win[style*="--board-color"] .wh .ib i{
color:#fff !important;
-webkit-text-fill-color:#fff !important;
stroke:currentColor !important;
fill:currentColor !important;
opacity:1 !important;
}
/* Composer row: keep all controls horizontally centered */
.winp,
.mob-input-area{
overflow:visible !important;
}
.winp .wir,
.winp .wir.web-input-row-v160,
.mob-input-area .mob-input-row,
.mob-input-row{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
min-height:46px !important;
overflow:visible !important;
}
/* V303-W3.91.170: 장문 입력 시 좌우 텍스트 잘림/앞줄 안 보임 버그 수정.
기존에는 height/max-height를 38px로 고정하고 white-space:nowrap까지 강제해서,
이미 구현되어 있던 autoResizeInput()의 자동 확장(JS: el.style.height)이
!important 앞에서 전혀 반영되지 않고 있었다. 높이는 JS가 계속 관리하도록 열어주고
(min/max만 CSS로 가드), border-radius도 999px 캡슐에서 완화해 텍스트가
둥근 모서리에 가려지지 않게 했다.
W3.91.171: 1차 수정 후에도 보이는 줄 수가 부족하다는 피드백 반영 —
최대 확장 높이 120px→200px로 크게 늘리고(js/board.js autoResizeInput의 maxH도 동일하게 200 동기화),
line-height를 고정 px 대신 1.42 배수로 바꿔 폰트 크기 스테퍼 설정에 비례하게 하고,
W3.91.173: 사용자 피드백으로 모서리를 다시 10px 라운드(둥근 사각형)로 조정. */
.winp textarea.memo-input,
.winp .wir textarea.memo-input,
.winp .wir.web-input-row-v160 textarea.memo-input,
textarea.memo-input,
.mob-input-area textarea.mob-textarea,
.mob-input-area .mob-input-row textarea.mob-textarea,
.mob-input-row textarea.mob-textarea,
textarea.mob-textarea{
flex:1 1 auto !important;
min-height:38px !important;
max-height:200px !important;
line-height:1.42 !important;
padding:9px 16px !important;
margin:0 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
resize:none !important;
scrollbar-width:none !important;
-ms-overflow-style:none !important;
display:block !important;
align-self:center !important;
vertical-align:middle !important;
box-sizing:border-box !important;
border-radius:5px !important;
white-space:pre-wrap !important;
word-break:break-word !important;
overflow-wrap:break-word !important;
}
.winp textarea.memo-input::-webkit-scrollbar,
.winp .wir textarea.memo-input::-webkit-scrollbar,
.winp .wir.web-input-row-v160 textarea.memo-input::-webkit-scrollbar,
textarea.memo-input::-webkit-scrollbar,
.mob-input-area textarea.mob-textarea::-webkit-scrollbar,
.mob-input-area .mob-input-row textarea.mob-textarea::-webkit-scrollbar,
.mob-input-row textarea.mob-textarea::-webkit-scrollbar,
textarea.mob-textarea::-webkit-scrollbar{
display:none !important;
width:0 !important;
height:0 !important;
}
.memo-input::placeholder,
.mob-textarea::placeholder{
color:#8b94a3 !important;
opacity:1 !important;
line-height:18px !important;
}
/* Plus/send: no faint square behind plus, centered symbols only */
.winp .web-plus-btn-v160,
.winp .ppb,
.winp .send-btn,
.mob-input-row .mob-plus-btn,
.mob-input-row .send-btn,
.mob-input-row .mob-send-btn,
.mob-input-area .mob-plus-btn,
.mob-input-area .send-btn,
.mob-input-area .mob-send-btn{
align-self:center !important;
margin:0 !important;
flex-shrink:0 !important;
background:transparent !important;
background-color:transparent !important;
border:0 !important;
box-shadow:none !important;
outline:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
/* ═══════════════════════════════════════════════════════
V303-W3.90.26 — Web composer right legacy plus remove
CSS-only. Keeps left web-plus button; hides only legacy right plus.
No JS/SQL/Auth/Billing/Storage/save/delete/sync changes.
═══════════════════════════════════════════════════════ */
body:not(.mobile-mode) .winp .wir.web-input-row-v160 .web-legacy-plus-v160,
body:not(.mobile-mode) .winp .wir.web-input-row-v160 .ppb.web-legacy-plus-v160,
body:not(.mobile-mode) .winp .wir .web-legacy-plus-v160,
body:not(.mobile-mode) .web-legacy-plus-v160,
html:not(.capacitor) .winp .wir.web-input-row-v160 .web-legacy-plus-v160,
html:not(.capacitor) .web-legacy-plus-v160{
display:none !important;
visibility:hidden !important;
width:0 !important;
min-width:0 !important;
max-width:0 !important;
height:0 !important;
min-height:0 !important;
max-height:0 !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
opacity:0 !important;
pointer-events:none !important;
overflow:hidden !important;
flex:0 0 0 !important;
}
/* ═══════════════════════════════════════════════════════
V303-W3.90.39.2 — Header/frame seam remove
CSS-only: removes the divider between board header and top frame.
App/Web only, no save/delete/upload/sync/Auth/Billing/Storage changes.
═══════════════════════════════════════════════════════ */
.mob-unified-hdr,
.mob-unified-hdr[style*="--board-color"],
.mobbrd[style*="--board-color"] .mob-unified-hdr,
body:not(.mobile-mode) .win[style*="--board-color"] .wh{
border-bottom:0 !important;
box-shadow:none !important;
}
.mob-unified-hdr::after,
.mobbrd[style*="--board-color"] .mob-unified-hdr::after,
body:not(.mobile-mode) .win[style*="--board-color"] .wh::after{
display:none !important;
content:none !important;
border:0 !important;
box-shadow:none !important;
}
/* ─────────────────────────────────────────────
V303-W3.90.39.2 — Header / frame horizontal seam remove
목적: 상단 헤더(#tb)와 메모장 상단 프레임 사이에 남는 1px 수평 경계선 제거
범위: CSS only. 저장/삭제/업로드/동기화/Auth/Billing/Storage 로직 변경 없음.
───────────────────────────────────────────── */
#tb.tb{
border-bottom:0 !important;
box-shadow:none !important;
}
@media (max-width:700px){
#tb.tb{
border-bottom:0 !important;
box-shadow:none !important;
}
.mob-unified-hdr[style*="--board-color"],
.mobbrd[style*="--board-color"] .mob-unified-hdr{
border-bottom:0 !important;
box-shadow:none !important;
}
.mobbrd[style*="--board-color"] .mobbdy{
border-top:0 !important;
}
}
@media (min-width:601px){
body:not(.mobile-mode) .win[style*="--board-color"] .wh{
border-bottom:0 !important;
box-shadow:none !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wb{
border-top:0 !important;
}
}
/* ─────────────────────────────────────────────
W3.90.39 Memo Margin Light Gray — CSS only
목적: 메모 카드 바로 바깥 여백을 웹/앱 공통 연회색으로 통일
범위: CSS only. 저장/삭제/업로드/동기화/Auth/Billing/Storage 로직 변경 없음.
───────────────────────────────────────────── */
#app .wb,
#app .mobbdy,
body.mobile-mode #app .mobbdy,
body:not(.mobile-mode) #app .win[style*="--board-color"] .wb{
background:#f5f6f7 !important;
}
/* V303-W3.90.40 Corporate Muted Board Tone
CSS-only: 메모장 컬러에 회색을 섞어 예약업 카탈로그 톤으로 낮춤.
저장/삭제/업로드/동기화/Auth/Billing/Storage 로직 변경 없음. */
.win[style*="--board-color"],
.mobbrd[style*="--board-color"]{
--nm-corp-board-color:color-mix(in srgb, var(--board-color, #9f3f46) 76%, #6b7280 24%);
--nm-w39018-frame:color-mix(in srgb, var(--nm-corp-board-color) 62%, #334155 38%) !important;
--nm-w39018-frame-dark:color-mix(in srgb, var(--nm-corp-board-color) 54%, #1f2937 46%) !important;
--nm-w39018-frame-soft:color-mix(in srgb, var(--nm-corp-board-color) 8%, #fff 92%) !important;
--nm-w39018-frame-line:color-mix(in srgb, var(--nm-corp-board-color) 20%, #cbd5e1 80%) !important;
--nm-w39019-frame:color-mix(in srgb, var(--nm-corp-board-color) 58%, #374151 42%) !important;
--nm-w39019-frame-dark:color-mix(in srgb, var(--nm-corp-board-color) 48%, #1f2937 52%) !important;
--nm-w39019-frame-soft:color-mix(in srgb, var(--nm-corp-board-color) 14%, #ffffff 86%) !important;
}
.chip[style*="--board-color"]{
--nm-corp-board-color:color-mix(in srgb, var(--board-color, #F97316) 76%, #6b7280 24%);
background:color-mix(in srgb, var(--nm-corp-board-color) 14%, #fff) !important;
color:color-mix(in srgb, var(--nm-corp-board-color) 76%, #1f2430) !important;
border-color:color-mix(in srgb, var(--nm-corp-board-color) 31%, rgba(31,36,48,.12)) !important;
}
.chip[style*="--board-color"].fr,
.chip[style*="--board-color"]:hover{
background:color-mix(in srgb, var(--nm-corp-board-color) 19%, #fff) !important;
border-color:color-mix(in srgb, var(--nm-corp-board-color) 45%, rgba(31,36,48,.15)) !important;
color:color-mix(in srgb, var(--nm-corp-board-color) 84%, #151922) !important;
}
.wh[style*="--board-color"]{
background:linear-gradient(180deg, color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 16%, #fff), color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 11%, #fff)) !important;
border-bottom-color:color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 28%, rgba(31,36,48,.12)) !important;
}
.wh[style*="--board-color"] .wtitle{
color:color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 76%, #18202b) !important;
}
.wh[style*="--board-color"] .wb2,
.wh[style*="--board-color"] button{
color:color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 62%, #364152) !important;
border-color:color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 25%, rgba(31,36,48,.10)) !important;
}
.mob-unified-hdr[style*="--board-color"],
.mobbrd[style*="--board-color"] .mob-unified-hdr{
background:linear-gradient(180deg, color-mix(in srgb, var(--nm-w39018-frame) 92%, #fff 8%), var(--nm-w39018-frame-dark)) !important;
}
.web-board-dropdown-dot-v274,
.mob-board-dropdown-dot-v274,
.bc-dot-v235{
filter:saturate(.78) brightness(.96) !important;
}
/* V303-W3.90.41 Strong Corporate Gray Board Tone
CSS-only: 기존 보드 색에 회색 비율을 더 높게 섞어 한 단계 더 차분한 카탈로그 톤으로 조정.
저장/삭제/업로드/동기화/Auth/Billing/Storage 로직 변경 없음. */
.win[style*="--board-color"],
.mobbrd[style*="--board-color"]{
--nm-corp-board-color:color-mix(in srgb, var(--board-color, #9f3f46) 52%, #6b7280 48%);
--nm-w39018-frame:color-mix(in srgb, var(--nm-corp-board-color) 50%, #334155 50%) !important;
--nm-w39018-frame-dark:color-mix(in srgb, var(--nm-corp-board-color) 42%, #1f2937 58%) !important;
--nm-w39018-frame-soft:color-mix(in srgb, var(--nm-corp-board-color) 6%, #fff 94%) !important;
--nm-w39018-frame-line:color-mix(in srgb, var(--nm-corp-board-color) 14%, #cbd5e1 86%) !important;
--nm-w39019-frame:color-mix(in srgb, var(--nm-corp-board-color) 46%, #374151 54%) !important;
--nm-w39019-frame-dark:color-mix(in srgb, var(--nm-corp-board-color) 38%, #1f2937 62%) !important;
--nm-w39019-frame-soft:color-mix(in srgb, var(--nm-corp-board-color) 10%, #ffffff 90%) !important;
}
.chip[style*="--board-color"]{
--nm-corp-board-color:color-mix(in srgb, var(--board-color, #F97316) 52%, #6b7280 48%);
background:color-mix(in srgb, var(--nm-corp-board-color) 10%, #fff 90%) !important;
color:color-mix(in srgb, var(--nm-corp-board-color) 58%, #1f2430 42%) !important;
border-color:color-mix(in srgb, var(--nm-corp-board-color) 22%, rgba(31,36,48,.14)) !important;
}
.chip[style*="--board-color"].fr,
.chip[style*="--board-color"]:hover{
background:color-mix(in srgb, var(--nm-corp-board-color) 14%, #fff 86%) !important;
border-color:color-mix(in srgb, var(--nm-corp-board-color) 34%, rgba(31,36,48,.16)) !important;
color:color-mix(in srgb, var(--nm-corp-board-color) 66%, #151922 34%) !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh{
background:linear-gradient(180deg, color-mix(in srgb, var(--nm-w39018-frame) 88%, #fff 12%), var(--nm-w39018-frame-dark)) !important;
}
.mob-unified-hdr[style*="--board-color"],
.mobbrd[style*="--board-color"] .mob-unified-hdr{
background:linear-gradient(180deg, color-mix(in srgb, var(--nm-w39018-frame) 88%, #fff 12%), var(--nm-w39018-frame-dark)) !important;
}
.web-board-dropdown-dot-v274,
.mob-board-dropdown-dot-v274,
.bc-dot-v235{
filter:saturate(.52) brightness(.92) !important;
}
/* v303-w3.90.43 색상 테마 선택 UI */
.theme-grid-v303w43{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.theme-btn-v303w43{min-height:48px;border:1px solid var(--bdr2);border-radius:10px;background:var(--bg);color:var(--txt2);font-size:10px;font-weight:650;font-family:inherit;cursor:pointer;padding:6px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:border-color .12s,box-shadow .12s,background .12s,color .12s}
.theme-btn-v303w43:hover{background:var(--bg2);border-color:var(--acc)}
.theme-btn-v303w43.fp-active{background:color-mix(in srgb,var(--acc) 10%,#fff);border-color:var(--acc);color:var(--acc);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--acc) 28%,transparent)}
.theme-swatches-v303w43{display:flex;gap:2px;align-items:center;justify-content:center}
.theme-swatches-v303w43 i{width:10px;height:10px;border-radius:999px;display:block;border:1px solid rgba(0,0,0,.08)}
body[data-color-theme="dark"]{--bg:#111827;--bg2:#1F2937;--bg3:#273244;--txt:#F9FAFB;--txt2:#D1D5DB;--txt3:#9CA3AF;--bdr:#374151;--bdr2:#4B5563;--bdr3:#5B6472;--acc:#A8B5C8}
/* V303-W3.90.45 Design Palette Balance
목적: 회색 톤다운 과다로 테마/메모장 구분이 약해진 문제를 보정.
레이아웃/아이콘/저장·삭제·업로드·동기화/Auth/Billing/Storage 로직 미수정. */
.win[style*="--board-color"],
.mobbrd[style*="--board-color"]{
--nm-corp-board-color:color-mix(in srgb, var(--board-color, #4E79A7) 84%, #6b7280 16%) !important;
--nm-w39018-frame:color-mix(in srgb, var(--nm-corp-board-color) 72%, #273244 28%) !important;
--nm-w39018-frame-dark:color-mix(in srgb, var(--nm-corp-board-color) 62%, #1f2937 38%) !important;
--nm-w39018-frame-soft:color-mix(in srgb, var(--nm-corp-board-color) 14%, #fff 86%) !important;
--nm-w39018-frame-line:color-mix(in srgb, var(--nm-corp-board-color) 30%, #cbd5e1 70%) !important;
--nm-w39019-frame:color-mix(in srgb, var(--nm-corp-board-color) 68%, #303846 32%) !important;
--nm-w39019-frame-dark:color-mix(in srgb, var(--nm-corp-board-color) 56%, #1f2937 44%) !important;
--nm-w39019-frame-soft:color-mix(in srgb, var(--nm-corp-board-color) 18%, #ffffff 82%) !important;
}
.chip[style*="--board-color"]{
--nm-corp-board-color:color-mix(in srgb, var(--board-color, #4E79A7) 84%, #6b7280 16%) !important;
background:color-mix(in srgb, var(--nm-corp-board-color) 18%, #fff 82%) !important;
color:color-mix(in srgb, var(--nm-corp-board-color) 86%, #151922 14%) !important;
border-color:color-mix(in srgb, var(--nm-corp-board-color) 42%, rgba(31,36,48,.14)) !important;
}
.chip[style*="--board-color"].fr,
.chip[style*="--board-color"]:hover{
background:color-mix(in srgb, var(--nm-corp-board-color) 28%, #fff 72%) !important;
border-color:color-mix(in srgb, var(--nm-corp-board-color) 62%, rgba(31,36,48,.16)) !important;
color:color-mix(in srgb, var(--nm-corp-board-color) 92%, #111827 8%) !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh,
.wh[style*="--board-color"]{
background:linear-gradient(180deg, color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 92%, #fff 8%), color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 82%, #1f2937 18%)) !important;
border-bottom-color:color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 42%, rgba(31,36,48,.14)) !important;
}
.wh[style*="--board-color"] .wtitle{
color:#ffffff !important;
text-shadow:0 1px 2px rgba(0,0,0,.18) !important;
}
.wh[style*="--board-color"] .wb2,
.wh[style*="--board-color"] button{
color:rgba(255,255,255,.92) !important;
border-color:rgba(255,255,255,.24) !important;
}
.mob-unified-hdr[style*="--board-color"],
.mobbrd[style*="--board-color"] .mob-unified-hdr{
background:linear-gradient(180deg, color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 90%, #fff 10%), color-mix(in srgb, var(--nm-corp-board-color, var(--board-color)) 80%, #111827 20%)) !important;
}
.web-board-dropdown-dot-v274,
.mob-board-dropdown-dot-v274,
.bc-dot-v235{
filter:saturate(1.08) brightness(1.02) !important;
}
body[data-color-theme="dark"]{--bg:#111827;--bg2:#1F2937;--bg3:#273244;--txt:#F9FAFB;--txt2:#D1D5DB;--txt3:#9CA3AF;--bdr:#374151;--bdr2:#4B5563;--bdr3:#5B6472;--acc:#9DB4D0}
/* V303-W3.90.46 Theme Palette Tone Restore
목적: W3.90.40~45에서 누적된 회색 톤다운을 되돌리고, 테마별/메모판별 색상 구분을 명확하게 복원.
레이아웃/아이콘/저장·삭제·업로드·동기화/Auth/Billing/Storage 로직 미수정. */
.win[style*="--board-color"],
.mobbrd[style*="--board-color"]{
--nm-corp-board-color:var(--board-color, #4E79A7) !important;
--nm-w39018-frame:color-mix(in srgb, var(--board-color, #4E79A7) 76%, #1f2937 24%) !important;
--nm-w39018-frame-dark:color-mix(in srgb, var(--board-color, #4E79A7) 66%, #111827 34%) !important;
--nm-w39018-frame-soft:color-mix(in srgb, var(--board-color, #4E79A7) 15%, #ffffff 85%) !important;
--nm-w39018-frame-line:color-mix(in srgb, var(--board-color, #4E79A7) 36%, #cbd5e1 64%) !important;
--nm-w39019-frame:color-mix(in srgb, var(--board-color, #4E79A7) 76%, #1f2937 24%) !important;
--nm-w39019-frame-dark:color-mix(in srgb, var(--board-color, #4E79A7) 66%, #111827 34%) !important;
--nm-w39019-frame-soft:color-mix(in srgb, var(--board-color, #4E79A7) 15%, #ffffff 85%) !important;
}
body:not(.mobile-mode) .win[style*="--board-color"] .wh,
.wh[style*="--board-color"],
.mob-unified-hdr[style*="--board-color"],
.mobbrd[style*="--board-color"] .mob-unified-hdr{
background:linear-gradient(180deg,
color-mix(in srgb, var(--board-color, #4E79A7) 94%, #ffffff 6%),
color-mix(in srgb, var(--board-color, #4E79A7) 82%, #111827 18%)) !important;
}
.web-board-dropdown-dot-v274,
.mob-board-dropdown-dot-v274,
.bc-dot-v235,
.cc{
filter:none !important;
}
.bc-pal .bc-dot-v235{
width:30px !important;
height:30px !important;
border-radius:999px !important;
box-shadow:0 2px 10px rgba(15,23,42,.12), inset 0 0 0 1px rgba(255,255,255,.24) !important;
}
.bc-pal .bc-dot-v235.on{
outline:2px solid #ffffff !important;
box-shadow:0 0 0 3px color-mix(in srgb, var(--bc, #4E79A7) 64%, #111827 36%), 0 8px 18px rgba(15,23,42,.20) !important;
}
/* V303-W3.90.47 — 디자인/메뉴 정리: 아이콘 색상, 글꼴 드롭다운 미리보기 */
.bmenu .mi i{ color:currentColor !important; opacity:.92; }
.bmenu .mi:not(.dng){ color:var(--txt) !important; }
.bmenu .mi.dng, .bmenu .mi.dng i{ color:var(--danger) !important; }
.tb-settings-menu button i{ color:currentColor !important; opacity:.92; }
.fp-select, .fp-select option{ font-size:14px; line-height:1.7; }
.theme-grid-v303w43{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:420px){ .theme-grid-v303w43{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
/* v303-w3.90.48: 글씨 두께 적용 복구 + 추가메모 진한 그레이 구분 */
.rt, .rt-line .rt, .row .rt, .ea, .memo-input, .mobi, .mob-textarea {
font-family: var(--memo-family) !important;
font-weight: var(--memo-weight) !important;
font-style: var(--memo-style) !important;
}
.row .rt, .rt {
font-size: var(--memo-size) !important;
line-height:1.58 !important;
}
.row .thread-text, .thread-text {
font-family: var(--memo-family) !important;
font-size: calc(var(--memo-size) + 1px) !important;
font-weight: var(--memo-weight) !important;
font-style: var(--memo-style) !important;
color:#4B5563 !important;
}
.thread-entry::before { color:#4B5563 !important; font-weight:700 !important; }
.thread-inp { color:#4B5563 !important; font-family:var(--memo-family) !important; font-weight:var(--memo-weight) !important; font-style:var(--memo-style) !important; }
.thread-inp::placeholder { color:rgba(75,85,99,.48) !important; }
.fp-select option { padding:7px 8px; }
/* v303-w3.90.49: 추가메모 크기/두께 연동 + 보드메뉴 아이콘 가시성 + 앱 글꼴 미리보기 */
.rt, .rt *, .ea, .rsub, .rsub *, .thread-text, .thread-text *, .mobi, .mob-textarea, .memo-input {
font-family: var(--memo-family) !important;
font-weight: var(--memo-weight) !important;
font-style: var(--memo-style) !important;
}
.thread-entry, .thread-entry * { font-family: var(--memo-family) !important; }
.thread-text, .rsub { font-size: calc(var(--memo-size) - 1.5px) !important; color:#4b5563 !important; }
.mi { color: var(--txt); }
.mi .mi-ico { width:16px; min-width:16px; display:inline-flex; align-items:center; justify-content:center; color:currentColor; opacity:.78; font-size:13px; line-height:1; }
.mi.dng .mi-ico { color:currentColor; opacity:1; }
.mi i { color:currentColor !important; opacity:.78; }
.fp-font-trigger { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--bdr2); border-radius:8px; background:var(--bg); color:var(--txt); display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; cursor:pointer; font-family:var(--memo-family); }
.fp-font-trigger:focus { outline:none; border-color:#F97316; }
.fp-font-list { display:none; margin-top:6px; max-height:310px; overflow:auto; border:1px solid var(--bdr2); border-radius:10px; background:var(--bg); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.fp-font-list.open { display:block; }
.fp-font-option { width:100%; border:0; border-bottom:1px solid var(--bdr); background:var(--bg); color:var(--txt); padding:10px 12px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:3px; font-size:15px; line-height:1.25; }
.fp-font-option:last-child { border-bottom:0; }
.fp-font-option span { font-size:11px; opacity:.68; font-family:inherit; }
.fp-font-option.fp-active { background:rgba(249,115,22,.10); color:#F97316; font-weight:800; }
.fp-font-option[data-family="default"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;}
.fp-font-option[data-family="pretendard"]{font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;}
.fp-font-option[data-family="suit"]{font-family:'SUIT','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;}
.fp-font-option[data-family="jua"]{font-family:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;}
.fp-font-option[data-family="dongle"]{font-family:'Dongle','Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:23px;}
.fp-font-option[data-family="gaegu"]{font-family:'Gaegu','Nanum Pen Script','Apple SD Gothic Neo','Malgun Gothic',cursive;font-size:18px;}
.fp-font-option[data-family="bagel"]{font-family:'Bagel Fat One','Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:16px;}
.fp-font-option[data-family="single"]{font-family:'Single Day','Gaegu','Apple SD Gothic Neo','Malgun Gothic',cursive;font-size:18px;}
.fp-font-option[data-family="myeongjo"]{font-family:'Noto Serif KR','MaruBuri','KoPub Batang','Nanum Myeongjo','Apple Myungjo',serif;}
.fp-font-option[data-family="mono"]{font-family:'D2Coding','SF Mono',Consolas,'Courier New',monospace;}
/* v303-w3.90.50: 추가메모 글씨크기/두께 최종 보정
- 이전 .row .thread-text 규칙(+1px, 650)이 specificity로 남는 문제 제거
- 본메모보다 항상 1.5px 작고, 디자인 글씨 두께/글꼴/기울기와 함께 연동 */
.row .thread-text,
.row .thread-text *,
.thread-list .thread-text,
.thread-list .thread-text *,
.thread-entry .thread-text,
.thread-entry .thread-text *,
.rsub,
.rsub * {
font-family: var(--memo-family) !important;
font-size: calc(var(--memo-size) - 1.5px) !important;
font-weight: var(--memo-weight) !important;
font-style: var(--memo-style) !important;
line-height: 1.48 !important;
}
.row .thread-text,
.thread-list .thread-text,
.thread-entry .thread-text,
.rsub {
color:#4B5563 !important;
}
.thread-entry::before {
font-size: calc(var(--memo-size) - 2px) !important;
color:#4B5563 !important;
font-weight: var(--memo-weight) !important;
line-height:1.48 !important;
}
/* v303-w3.90.51: 추가메모/메모판 메뉴 디자인 최종 보정
- 추가메모는 본메모보다 확실히 작게 고정
- 추가메모 색상은 본메모와 구분되는 중간 회색
- 추가메모 표식은 간결한 꺾은 화살표로 통일
- 메모판 메뉴 아이콘은 고급스러운 slate 계열 아이콘으로 통일 */
:root{
--nm-thread-size: max(11px, calc(var(--memo-size) - 2px));
--nm-thread-color: #6B7280;
--nm-thread-arrow: #FF5A3D;
--nm-menu-icon: #64748B;
--nm-menu-icon-soft: #475569;
--nm-menu-danger: #EF4444;
}
.row .rt,
.row .rt *,
.rt,
.rt *{
font-size: var(--memo-size) !important;
font-family: var(--memo-family) !important;
font-weight: var(--memo-weight) !important;
font-style: var(--memo-style) !important;
line-height: 1.58 !important;
}
.row .thread-list{
margin: 6px 0 1px !important;
gap: 5px !important;
}
.row .thread-entry,
.thread-list .thread-entry{
display:flex !important;
align-items:flex-start !important;
gap:6px !important;
padding-left: 0 !important;
}
.row .thread-entry::before,
.thread-list .thread-entry::before{
content:'↳' !important;
display:inline-flex !important;
align-items:flex-start !important;
justify-content:center !important;
width:14px !important;
min-width:14px !important;
margin-top:.05em !important;
color:var(--nm-thread-arrow) !important;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif !important;
font-size:var(--nm-thread-size) !important;
font-weight:800 !important;
line-height:1.45 !important;
}
.row .thread-body,
.thread-list .thread-body{
min-width:0 !important;
flex:1 1 auto !important;
}
.row .thread-text,
.row .thread-text *,
.thread-list .thread-text,
.thread-list .thread-text *,
.thread-entry .thread-text,
.thread-entry .thread-text *,
.rsub,
.rsub *{
font-family: var(--memo-family) !important;
font-size: var(--nm-thread-size) !important;
font-weight: var(--memo-weight) !important;
font-style: var(--memo-style) !important;
line-height: 1.45 !important;
color: var(--nm-thread-color) !important;
letter-spacing: -0.01em !important;
}
.thread-inp{
font-family:var(--memo-family) !important;
font-size:var(--nm-thread-size) !important;
font-weight:var(--memo-weight) !important;
font-style:var(--memo-style) !important;
color:var(--nm-thread-color) !important;
}
.thread-inp::placeholder{ color:rgba(107,114,128,.55) !important; }
.mi{
color:#374151 !important;
font-weight:600 !important;
}
.mi .mi-ico{
width:18px !important;
min-width:18px !important;
height:18px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
color:var(--nm-menu-icon) !important;
opacity:1 !important;
font-size:16px !important;
line-height:1 !important;
}
.mi .mi-ico i{
color:currentColor !important;
opacity:1 !important;
font-size:16px !important;
stroke-width:1.9 !important;
}
.mi.mi-lock .mi-ico{ color:#475569 !important; }
.mi.mi-copy .mi-ico{ color:#64748B !important; }
.mi.mi-restore .mi-ico{ color:#64748B !important; }
.mi.mi-done .mi-ico{ color:#475569 !important; }
.mi.mi-palette .mi-ico{ color:#64748B !important; }
.mi.dng{ color:var(--nm-menu-danger) !important; }
.mi.dng .mi-ico{ color:var(--nm-menu-danger) !important; }
.mi:hover{ background:rgba(15,23,42,.035) !important; }
.mi.dng:hover{ background:rgba(239,68,68,.06) !important; }
/* W3.90.52 - 추가메모 표시/추가 버튼 polish
- 기존 ㄴ 텍스트 표시 제거
- 곡선형 L 커넥터를 CSS로 렌더링
- 추가 메모 입력 버튼은 주황 포인트의 댓글 추가 버튼으로 정리 */
.thread-list{
margin:6px 0 2px !important;
display:flex !important;
flex-direction:column !important;
gap:6px !important;
border-left:none !important;
padding-left:0 !important;
}
.thread-entry{
display:flex !important;
align-items:center !important;
gap:8px !important;
padding-left:4px !important;
}
.thread-entry::before{
content:'' !important;
display:block !important;
flex:0 0 18px !important;
width:18px !important;
height:13px !important;
border-left:2px solid #F97316 !important;
border-bottom:2px solid #F97316 !important;
border-radius:0 0 0 7px !important;
transform:translateY(-1px) !important;
opacity:.95 !important;
}
.thread-body{
display:flex !important;
align-items:center !important;
gap:4px !important;
flex:1 1 auto !important;
min-width:0 !important;
}
.thread-text{
display:block !important;
flex:1 1 auto !important;
min-width:0 !important;
color:#6B7280 !important;
line-height:1.5 !important;
white-space:pre-wrap !important;
word-break:break-word !important;
}
.thread-inp-wrap{
display:none;
align-items:center !important;
gap:6px !important;
margin-top:6px !important;
}
.thread-inp-wrap[style*="display: block"],
.thread-inp-wrap[style*="display:block"],
.thread-inp-wrap.is-open{
display:flex !important;
}
.thread-inp-wrap .thread-inp{
flex:1 1 auto !important;
min-width:0 !important;
width:auto !important;
box-sizing:border-box !important;
}
.thread-inp-wrap .thread-btn{
flex:0 0 auto !important;
}
.thread-toggle{
width:28px !important;
height:24px !important;
min-width:28px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
border-radius:8px !important;
border:1px solid rgba(249,115,22,.28) !important;
background:linear-gradient(180deg, rgba(255,247,237,.96), rgba(255,237,213,.82)) !important;
color:#F97316 !important;
box-shadow:0 1px 2px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.72) !important;
opacity:1 !important;
}
.thread-toggle i{
display:none !important;
}
.thread-toggle::before{
content:'' !important;
width:14px !important;
height:11px !important;
border:1.8px solid currentColor !important;
border-radius:4px !important;
box-sizing:border-box !important;
position:relative !important;
}
.thread-toggle::after{
content:'+' !important;
position:absolute !important;
transform:translate(7px,-6px) !important;
width:12px !important;
height:12px !important;
border-radius:50% !important;
background:#F97316 !important;
color:#fff !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:10px !important;
font-weight:800 !important;
line-height:12px !important;
box-shadow:0 1px 2px rgba(249,115,22,.35) !important;
}
.thread-btn{
width:34px !important;
height:30px !important;
min-width:34px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:10px !important;
border:1px solid rgba(249,115,22,.32) !important;
background:linear-gradient(180deg,#FF8A2A,#F97316) !important;
color:#fff !important;
box-shadow:0 2px 6px rgba(249,115,22,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
cursor:pointer !important;
}
.thread-btn i{
font-size:17px !important;
line-height:1 !important;
}
.thread-btn:hover,
.thread-toggle:hover{
filter:brightness(.98) !important;
}
@media (max-width:600px){
.thread-entry{ gap:7px !important; padding-left:3px !important; }
.thread-entry::before{ width:16px !important; flex-basis:16px !important; height:12px !important; }
.thread-toggle{ width:27px !important; min-width:27px !important; height:23px !important; }
}
/* W3.90.53 - 추가메모/댓글 아이콘 최종 정리
목적: 기존 기능은 유지하고 시각 표현만 정리
- ㄴ 텍스트/중복 표시 제거
- 절제된 곡선 커넥터 1개만 표시
- 추가메모 수정/삭제 버튼을 SVG 기반 주황 포인트 아이콘으로 고정
- 추가메모 추가 버튼은 날짜/시간 옆에서 이질감 없도록 축소 */
.thread-list{
margin:6px 0 2px !important;
padding-left:0 !important;
border-left:0 !important;
display:flex !important;
flex-direction:column !important;
gap:7px !important;
}
.row .thread-entry,
.thread-list .thread-entry{
position:relative !important;
display:grid !important;
grid-template-columns:22px minmax(0,1fr) !important;
column-gap:6px !important;
align-items:center !important;
padding-left:0 !important;
margin-left:0 !important;
}
.row .thread-entry::before,
.thread-list .thread-entry::before{
content:'' !important;
display:block !important;
grid-column:1 !important;
width:16px !important;
height:11px !important;
justify-self:center !important;
align-self:center !important;
box-sizing:border-box !important;
border-left:1.7px solid #FF6B1A !important;
border-bottom:1.7px solid #FF6B1A !important;
border-radius:0 0 0 6px !important;
transform:none !important;
background:transparent !important;
font-size:0 !important;
line-height:0 !important;
color:transparent !important;
opacity:.96 !important;
}
.thread-body{
grid-column:2 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
column-gap:6px !important;
align-items:center !important;
min-width:0 !important;
}
.thread-text,
.thread-entry .thread-text,
.thread-entry .thread-text *{
color:#6B7280 !important;
line-height:1.48 !important;
white-space:pre-wrap !important;
word-break:break-word !important;
}
.thread-acts{
display:inline-flex !important;
align-items:center !important;
gap:3px !important;
flex-shrink:0 !important;
opacity:0 !important;
transition:opacity .14s ease !important;
margin:0 !important;
}
.thread-entry:hover .thread-acts,
.thread-entry:focus-within .thread-acts{
opacity:1 !important;
}
.th-act{
width:22px !important;
height:22px !important;
min-width:22px !important;
padding:0 !important;
border-radius:7px !important;
border:1px solid rgba(255,107,26,.20) !important;
background:rgba(255,107,26,.055) !important;
color:#F97316 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
box-shadow:none !important;
opacity:.9 !important;
}
.th-act:hover{
background:rgba(255,107,26,.11) !important;
border-color:rgba(255,107,26,.34) !important;
opacity:1 !important;
}
.th-act svg{
width:13px !important;
height:13px !important;
display:block !important;
fill:currentColor !important;
stroke:none !important;
}
.th-delete,
.th-act.dng{
color:#EF5B2A !important;
background:rgba(239,91,42,.055) !important;
border-color:rgba(239,91,42,.20) !important;
}
.th-delete:hover,
.th-act.dng:hover{
background:rgba(239,91,42,.12) !important;
border-color:rgba(239,91,42,.35) !important;
}
.thread-toggle{
position:relative !important;
width:22px !important;
height:20px !important;
min-width:22px !important;
padding:0 !important;
margin-left:4px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
vertical-align:middle !important;
border-radius:7px !important;
border:1px solid rgba(249,115,22,.23) !important;
background:linear-gradient(180deg,rgba(255,247,237,.95),rgba(255,237,213,.78)) !important;
color:#F97316 !important;
box-shadow:0 1px 2px rgba(17,24,39,.045) !important;
opacity:.94 !important;
}
.thread-toggle i{ display:none !important; }
.thread-toggle::before{
content:'' !important;
width:11px !important;
height:8px !important;
border:1.5px solid currentColor !important;
border-radius:3.5px !important;
box-sizing:border-box !important;
background:transparent !important;
}
.thread-toggle::after{
content:'+' !important;
position:absolute !important;
right:-3px !important;
top:-4px !important;
width:10px !important;
height:10px !important;
border-radius:50% !important;
background:#F97316 !important;
color:#fff !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:8px !important;
font-weight:800 !important;
line-height:10px !important;
box-shadow:0 1px 2px rgba(249,115,22,.28) !important;
}
.thread-toggle:hover{
opacity:1 !important;
filter:none !important;
background:linear-gradient(180deg,rgba(255,247,237,1),rgba(255,237,213,.9)) !important;
}
.thread-btn{
width:30px !important;
height:28px !important;
min-width:30px !important;
border-radius:9px !important;
border:1px solid rgba(249,115,22,.30) !important;
background:linear-gradient(180deg,#FF8A2A,#F97316) !important;
color:#fff !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
box-shadow:0 2px 5px rgba(249,115,22,.18), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.thread-btn i{ font-size:15px !important; }
@media (max-width:600px){
.row .thread-entry,
.thread-list .thread-entry{ grid-template-columns:21px minmax(0,1fr) !important; column-gap:5px !important; }
.row .thread-entry::before,
.thread-list .thread-entry::before{ width:15px !important; height:10px !important; }
.thread-toggle{ width:21px !important; min-width:21px !important; height:19px !important; }
.th-act{ width:21px !important; min-width:21px !important; height:21px !important; }
}
/* W3.90.54 - 추가메모 커넥터/추가 버튼 최종 단순화
- 추가메모 표시는 주황색 'ㄴ' 문자 1개만 사용
- 'ㄴ'의 끝 기준이 추가메모 첫 줄과 어색하지 않도록 같은 라인 높이로 정렬
- 추가 댓글 버튼은 말풍선/배지 제거, 주황색 '+'만 표시 */
.row .thread-entry,
.thread-list .thread-entry{
display:grid !important;
grid-template-columns:20px minmax(0,1fr) !important;
column-gap:6px !important;
align-items:start !important;
padding-left:0 !important;
margin-left:0 !important;
}
.row .thread-entry::before,
.thread-list .thread-entry::before{
content:'ㄴ' !important;
display:block !important;
grid-column:1 !important;
width:20px !important;
height:auto !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#F97316 !important;
font-family:var(--memo-family), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size:calc(var(--nm-thread-size, calc(var(--memo-size) - 1.5px)) + 1px) !important;
font-weight:700 !important;
line-height:1.48 !important;
letter-spacing:-.03em !important;
text-align:right !important;
opacity:1 !important;
transform:none !important;
box-sizing:border-box !important;
justify-self:end !important;
align-self:start !important;
padding:0 !important;
margin:0 !important;
}
.thread-body{
grid-column:2 !important;
align-items:start !important;
}
.thread-text,
.thread-entry .thread-text,
.thread-entry .thread-text *{
color:#6B7280 !important;
line-height:1.48 !important;
}
.thread-toggle{
position:relative !important;
width:auto !important;
min-width:0 !important;
height:auto !important;
padding:0 2px !important;
margin-left:3px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
vertical-align:baseline !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#F97316 !important;
opacity:1 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
}
.thread-toggle i{ display:none !important; }
.thread-toggle::before{
content:'+' !important;
display:block !important;
width:auto !important;
height:auto !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#F97316 !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
box-shadow:none !important;
}
.thread-toggle::after{ content:none !important; display:none !important; }
.thread-toggle:hover{
background:transparent !important;
color:#EA580C !important;
opacity:1 !important;
filter:none !important;
}
@media (max-width:600px){
.row .thread-entry,
.thread-list .thread-entry{ grid-template-columns:19px minmax(0,1fr) !important; column-gap:5px !important; }
.row .thread-entry::before,
.thread-list .thread-entry::before{ width:19px !important; font-size:calc(var(--nm-thread-size, calc(var(--memo-size) - 1.5px)) + 1px) !important; }
.thread-toggle,
.thread-toggle::before{ font-size:12.5px !important; }
}
/* W3.90.55 - 추가댓글 레이아웃/편집 UX 최소 패치
기준: V303-W3.90.54 유지, 저장/삭제/동기화 로직 미변경
1) 추가메모 + 버튼: 둥근 사각 테두리 + 약한 주황 투명 배경
2) ㄴ 커넥터: 현재보다 위로 올려 첫 줄 세로 중앙에 더 가깝게 정렬
3) 추가댓글 우측 공간: 액션 버튼 세로 배치 + 폭 최소화
4) 수정 모드: 우측 액션 버튼 숨김, Enter 저장 / Esc 취소 유지 */
.thread-toggle{
width:22px !important;
min-width:22px !important;
height:20px !important;
padding:0 !important;
margin-left:4px !important;
border:1px solid rgba(249,115,22,.34) !important;
border-radius:7px !important;
background:rgba(249,115,22,.075) !important;
box-shadow:none !important;
cursor:pointer !important;
vertical-align:middle !important;
}
.thread-toggle::before{
content:'+' !important;
font-size:13px !important;
font-weight:800 !important;
line-height:1 !important;
color:#F97316 !important;
}
.thread-toggle:hover{
background:rgba(249,115,22,.12) !important;
border-color:rgba(249,115,22,.48) !important;
color:#EA580C !important;
}
.row .thread-entry,
.thread-list .thread-entry{
grid-template-columns:18px minmax(0,1fr) !important;
column-gap:4px !important;
align-items:start !important;
}
.row .thread-entry::before,
.thread-list .thread-entry::before{
width:18px !important;
line-height:1.18 !important;
transform:translateY(-2px) !important;
text-align:right !important;
}
.thread-body{
grid-template-columns:minmax(0,1fr) 22px !important;
column-gap:3px !important;
align-items:start !important;
}
.thread-acts{
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:2px !important;
width:22px !important;
min-width:22px !important;
margin-top:0 !important;
}
.th-act{
width:20px !important;
min-width:20px !important;
height:20px !important;
border-radius:6px !important;
}
.th-act svg{
width:12px !important;
height:12px !important;
}
.thread-body.is-thread-editing,
.thread-body:has(.thread-edit-wrap){
grid-template-columns:minmax(0,1fr) !important;
}
.thread-body.is-thread-editing .thread-acts,
.thread-body:has(.thread-edit-wrap) .thread-acts{
display:none !important;
}
.thread-edit-wrap{
display:flex !important;
width:100% !important;
max-width:100% !important;
}
.thread-edit-inp{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
}
.thread-edit-ok{
display:none !important;
}
@media (max-width:600px){
.row .thread-entry,
.thread-list .thread-entry{ grid-template-columns:17px minmax(0,1fr) !important; column-gap:3px !important; }
.row .thread-entry::before,
.thread-list .thread-entry::before{ width:17px !important; transform:translateY(-2px) !important; }
.thread-body{ grid-template-columns:minmax(0,1fr) 21px !important; column-gap:2px !important; }
.thread-acts{ width:21px !important; min-width:21px !important; }
.th-act{ width:19px !important; min-width:19px !important; height:19px !important; }
}
/* W3.90.56 - 추가메모 커넥터 상향 + Web 가로폭 확장 보정
- 기존 저장/삭제/동기화 로직은 건드리지 않고 CSS 레이아웃만 최소 보정
- ㄴ 커넥터를 첫 줄 중앙에 맞도록 추가 상향
- Web에서 추가댓글 본문 폭이 불필요하게 좁아지지 않도록 grid 폭을 100% 사용 */
.row .thread-list,
.thread-list{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
.row .thread-entry,
.thread-list .thread-entry{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
grid-template-columns:16px minmax(0,1fr) !important;
column-gap:3px !important;
}
.row .thread-entry::before,
.thread-list .thread-entry::before{
width:16px !important;
line-height:1.05 !important;
transform:translateY(-4px) !important;
}
.thread-body{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
grid-template-columns:minmax(0,1fr) 21px !important;
column-gap:2px !important;
}
.thread-text,
.thread-entry .thread-text{
display:block !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
box-sizing:border-box !important;
overflow-wrap:anywhere !important;
}
.thread-acts{
width:21px !important;
min-width:21px !important;
max-width:21px !important;
}
@media (min-width:601px){
.row .thread-entry,
.thread-list .thread-entry{
grid-template-columns:15px minmax(0,1fr) !important;
column-gap:3px !important;
}
.row .thread-entry::before,
.thread-list .thread-entry::before{
width:15px !important;
transform:translateY(-4px) !important;
}
.thread-body{
grid-template-columns:minmax(0,1fr) 21px !important;
column-gap:2px !important;
}
}
@media (max-width:600px){
.row .thread-entry,
.thread-list .thread-entry{
grid-template-columns:16px minmax(0,1fr) !important;
column-gap:3px !important;
}
.row .thread-entry::before,
.thread-list .thread-entry::before{
width:16px !important;
transform:translateY(-4px) !important;
}
}
/* W3.90.57 - 추가댓글 액션 버튼 inline-end 배치 + 커넥터 정렬 미세 보정
- 수정/삭제 버튼을 우측 고정 폭으로 예약하지 않고 추가댓글 마지막 글자 뒤에 붙임
- 버튼 영역 때문에 추가댓글 줄 수가 불필요하게 늘어나는 문제 완화
- ㄴ 커넥터는 첫 줄 중앙에 더 가깝게 상향 미세 보정
- 저장/삭제/동기화/Realtime 로직 미수정, CSS 레이아웃 최소 보정 */
.row .thread-entry,
.thread-list .thread-entry{
display:grid !important;
grid-template-columns:15px minmax(0,1fr) !important;
column-gap:3px !important;
align-items:start !important;
}
.row .thread-entry::before,
.thread-list .thread-entry::before{
width:15px !important;
line-height:1.05 !important;
transform:translateY(-5px) !important;
}
.thread-body{
display:block !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
.thread-text,
.thread-entry .thread-text{
display:inline !important;
width:auto !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
white-space:pre-wrap !important;
word-break:break-word !important;
overflow-wrap:anywhere !important;
}
.thread-acts{
display:inline-flex !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
gap:3px !important;
margin:0 0 0 6px !important;
padding:0 !important;
vertical-align:-3px !important;
opacity:0 !important;
transition:opacity .15s ease !important;
}
.thread-entry:hover .thread-acts{
opacity:1 !important;
}
.th-act{
width:20px !important;
min-width:20px !important;
height:20px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 auto !important;
}
.thread-body.is-thread-editing .thread-acts,
.thread-body:has(.thread-edit-wrap) .thread-acts{
display:none !important;
}
.thread-body.is-thread-editing,
.thread-body:has(.thread-edit-wrap){
display:block !important;
}
.thread-edit-wrap{
display:flex !important;
width:100% !important;
max-width:100% !important;
}
@media (max-width:600px){
.row .thread-entry,
.thread-list .thread-entry{
grid-template-columns:16px minmax(0,1fr) !important;
column-gap:3px !important;
}
.row .thread-entry::before,
.thread-list .thread-entry::before{
width:16px !important;
transform:translateY(-5px) !important;
}
.thread-acts{
margin-left:5px !important;
vertical-align:-4px !important;
}
.th-act{
width:19px !important;
min-width:19px !important;
height:19px !important;
}
}
/* W3.90.58 - 추가댓글 수정 버튼 제거 + 삭제 버튼 첫 줄 배치
- 추가댓글 클릭 편집 흐름을 유지하므로 중복 수정 버튼은 제거(JS 렌더링에서 삭제)
- 삭제 버튼 1pt 축소, hover 시 첫 번째 줄 우측에만 노출
- 저장/삭제/동기화/Realtime 로직 미수정, 렌더링/스타일 최소 보정 */
.thread-body{
display:block !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
.thread-acts{
float:right !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
gap:0 !important;
margin:0 0 0 7px !important;
padding:0 !important;
vertical-align:middle !important;
opacity:0 !important;
transition:opacity .15s ease !important;
}
.thread-entry:hover .thread-acts,
.thread-entry:focus-within .thread-acts{
opacity:1 !important;
}
.th-act.th-edit{ display:none !important; }
.th-act.th-delete{
width:19px !important;
min-width:19px !important;
height:19px !important;
border-radius:6px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 auto !important;
}
.th-act.th-delete svg{
width:11px !important;
height:11px !important;
}
.thread-body.is-thread-editing .thread-acts,
.thread-body:has(.thread-edit-wrap) .thread-acts{
display:none !important;
}
@media (max-width:600px){
.thread-acts{ margin-left:6px !important; }
.th-act.th-delete{ width:18px !important; min-width:18px !important; height:18px !important; }
.th-act.th-delete svg{ width:10.5px !important; height:10.5px !important; }
}
/* W3.90.59 - 추가댓글 ㄴ 커넥터 위치 미세 조정
- W3.90.58 기준 커넥터가 첫 줄보다 과하게 위로 올라간 문제만 보정
- Web: 현재보다 2px 아래, Android/mobile: 현재보다 1px 아래
- 삭제 버튼 첫 줄 배치/수정 버튼 제거/저장·삭제·동기화 로직은 미변경 */
@media (min-width:601px){
.row .thread-entry::before,
.thread-list .thread-entry::before{
transform:translateY(-3px) !important;
}
}
@media (max-width:600px){
.row .thread-entry::before,
.thread-list .thread-entry::before{
transform:translateY(-4px) !important;
}
}
/* W3.90.60 - Web 추가댓글 ㄴ 커넥터 위치만 추가 미세 조정
- Android/mobile은 W3.90.59 상태가 적절하므로 그대로 유지
- Web(601px 이상)만 현재보다 2px 아래로 이동: -3px → -1px
- 삭제 버튼/수정 버튼 제거/저장·삭제·동기화 로직 미변경 */
@media (min-width:601px){
.row .thread-entry::before,
.thread-list .thread-entry::before{
transform:translateY(-1px) !important;
}
}
/* W3.90.61 - 메모판 메뉴 아이콘/타이포 정돈
- Tabler 웹폰트 로딩 여부와 무관하게 inline SVG 아이콘을 안정 표시
- 앱/웹 공통 좌측 아이콘 칼럼 고정, 텍스트 겹침 방지
- 메뉴 글씨 굵기 한 단계 완화 */
.bmenu .mi{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
min-height:43px !important;
padding:10px 14px !important;
font-weight:500 !important;
letter-spacing:-0.015em !important;
line-height:1.25 !important;
color:#334155 !important;
text-align:left !important;
}
.bmenu .mi-label{
display:block !important;
flex:1 1 auto !important;
min-width:0 !important;
font-weight:500 !important;
line-height:1.25 !important;
text-align:left !important;
}
.bmenu .mi-ico{
flex:0 0 18px !important;
width:18px !important;
min-width:18px !important;
height:18px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
position:static !important;
color:#64748B !important;
opacity:1 !important;
line-height:1 !important;
}
.bmenu .mi-ico .nm-menu-svg{
display:block !important;
width:18px !important;
height:18px !important;
stroke:currentColor !important;
fill:none !important;
flex:0 0 18px !important;
}
.bmenu .mi-lock .mi-ico,
.bmenu .mi-done .mi-ico{ color:#475569 !important; }
.bmenu .mi-copy .mi-ico,
.bmenu .mi-restore .mi-ico,
.bmenu .mi-palette .mi-ico{ color:#64748B !important; }
.bmenu .mi.dng,
.bmenu .mi.dng .mi-label,
.bmenu .mi.dng .mi-ico{ color:#EF4444 !important; }
.bmenu .msl{
font-weight:500 !important;
letter-spacing:-0.01em !important;
text-transform:none !important;
}
html.capacitor .bmenu .mi{
justify-content:flex-start !important;
text-align:left !important;
gap:10px !important;
padding-left:14px !important;
padding-right:14px !important;
}
html.capacitor .bmenu .mi-ico{
position:static !important;
transform:none !important;
margin:0 !important;
}
/* W3.90.62 - Web only board menu icon render fix
- Android assets intentionally untouched to preserve the already-correct app menu
- Forces web board menu rows into a stable icon column + left label layout
- Inline SVG icons are displayed independent of Tabler font loading/cache */
@media (min-width:601px){
.bmenu .mi{
display:grid !important;
grid-template-columns:20px minmax(0, 1fr) !important;
align-items:center !important;
justify-content:start !important;
column-gap:10px !important;
min-height:43px !important;
padding:10px 14px !important;
text-align:left !important;
font-weight:500 !important;
letter-spacing:-0.015em !important;
color:#334155 !important;
}
.bmenu .mi-label{
display:block !important;
grid-column:2 !important;
min-width:0 !important;
text-align:left !important;
justify-self:start !important;
font-weight:500 !important;
line-height:1.25 !important;
color:currentColor !important;
}
.bmenu .mi-ico{
grid-column:1 !important;
width:18px !important;
min-width:18px !important;
height:18px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
justify-self:center !important;
align-self:center !important;
position:static !important;
transform:none !important;
margin:0 !important;
padding:0 !important;
color:#64748B !important;
opacity:1 !important;
visibility:visible !important;
overflow:visible !important;
line-height:1 !important;
}
.bmenu .mi-ico svg,
.bmenu .mi-ico .nm-menu-svg{
display:block !important;
width:18px !important;
height:18px !important;
min-width:18px !important;
stroke:currentColor !important;
fill:none !important;
opacity:1 !important;
visibility:visible !important;
overflow:visible !important;
}
.bmenu .mi > i{
grid-column:1 !important;
justify-self:center !important;
width:18px !important;
min-width:18px !important;
height:18px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
color:#64748B !important;
opacity:1 !important;
font-size:17px !important;
}
.bmenu .mi-lock .mi-ico,
.bmenu .mi-done .mi-ico,
.bmenu .mi-lock > i,
.bmenu .mi-done > i{ color:#475569 !important; }
.bmenu .mi-copy .mi-ico,
.bmenu .mi-restore .mi-ico,
.bmenu .mi-palette .mi-ico,
.bmenu .mi-copy > i,
.bmenu .mi-restore > i,
.bmenu .mi-palette > i{ color:#64748B !important; }
.bmenu .mi.dng,
.bmenu .mi.dng .mi-label,
.bmenu .mi.dng .mi-ico,
.bmenu .mi.dng > i{ color:#EF4444 !important; }
}
/* W3.90.63 web menu icon color hard fix */
@media (min-width:601px){
.bmenu .mi{color:#334155!important;}
.bmenu .mi-label{color:#334155!important;}
.bmenu .mi-ico,
.bmenu .mi-ico svg,
.bmenu .mi-ico .nm-menu-svg{
color:#64748B!important;
stroke:#64748B!important;
fill:none!important;
}
.bmenu .mi.dng .mi-ico,
.bmenu .mi.dng .mi-ico svg,
.bmenu .mi.dng .nm-menu-svg{
color:#EF4444!important;
stroke:#EF4444!important;
}
}
/* W3.90.64 - Web board menu SVG icon color final hard-fix
- 앱 레이아웃/아이콘 구조 변경 없음
- 웹에서 흰색으로 렌더링되던 non-danger SVG 색상만 최종 고정
- 삭제 아이콘은 기존 빨강 유지 */
@media (min-width:601px){
.bmenu .mi:not(.dng) .mi-ico,
.bmenu .mi:not(.dng) .mi-ico svg,
.bmenu .mi:not(.dng) .mi-ico .nm-menu-svg,
.bmenu .mi:not(.dng) .mi-ico .nm-menu-svg *{
color:#64748B !important;
stroke:#64748B !important;
fill:none !important;
opacity:1 !important;
visibility:visible !important;
}
.bmenu .mi.dng .mi-ico,
.bmenu .mi.dng .mi-ico svg,
.bmenu .mi.dng .mi-ico .nm-menu-svg,
.bmenu .mi.dng .mi-ico .nm-menu-svg *{
color:#EF4444 !important;
stroke:#EF4444 !important;
fill:none !important;
}
}
/* ─────────────────────────────────────────────
V303-W3.90.67 — Header board chip symmetry polish
목적: 좌측 현재 메모장칩을 우측 메인메뉴 버튼과 대칭 크기로 축소하고,
제목 대신 겹친 메모 아이콘으로 표시한다.
범위: 헤더 표시 UI만. 메모장 전환/드롭다운/저장/삭제/동기화 로직 변경 없음.
───────────────────────────────────────────── */
#tb .web-active-board-chip-v303w1.nm-header-board-chip-v303w67,
#tb .chip.web-active-board-chip-v303w1.nm-header-board-chip-v303w67,
#tb .chip.chip-h.web-active-board-chip-v303w1.nm-header-board-chip-v303w67{
box-sizing:border-box !important;
flex:0 0 34px !important;
width:34px !important;
min-width:34px !important;
max-width:34px !important;
height:34px !important;
min-height:34px !important;
max-height:34px !important;
padding:0 !important;
gap:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
overflow:hidden !important;
}
#tb .web-active-board-chip-v303w1.nm-header-board-chip-v303w67 .chip-name,
#tb .web-active-board-chip-v303w1.nm-header-board-chip-v303w67 .web-active-count-v303w1,
#tb .web-active-board-chip-v303w1.nm-header-board-chip-v303w67 .chip-open-dot{
display:none !important;
}
#tb .nm-header-note-stack-icon-v303w67{
width:18px !important;
height:18px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
color:#fff !important;
opacity:.96 !important;
flex:0 0 18px !important;
margin:0 !important;
filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)) !important;
}
#tb .nm-header-note-stack-icon-v303w67 svg{
width:18px !important;
height:18px !important;
display:block !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.9 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
#tb .nm-header-chip-caret-v303w67,
#tb .web-active-chip-caret-v303w1.nm-header-chip-caret-v303w67{
position:absolute !important;
right:4px !important;
bottom:4px !important;
width:8px !important;
min-width:8px !important;
height:8px !important;
font-size:8px !important;
line-height:8px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:rgba(255,255,255,.88) !important;
text-shadow:none !important;
opacity:.95 !important;
margin:0 !important;
}
@media (max-width:600px){
#tb .mob-active-board-chip-v274.nm-header-board-chip-v303w67,
#tb .chip.mob-active-board-chip-v274.nm-header-board-chip-v303w67,
#tb .chip.chip-h.mob-active-board-chip-v274.nm-header-board-chip-v303w67{
box-sizing:border-box !important;
flex:0 0 30px !important;
width:30px !important;
min-width:30px !important;
max-width:30px !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
padding:0 !important;
gap:0 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
overflow:hidden !important;
}
#tb .mob-active-board-chip-v274.nm-header-board-chip-v303w67 .mob-active-chip-label-v274,
#tb .mob-active-board-chip-v274.nm-header-board-chip-v303w67 .mob-active-count-v303w3{
display:none !important;
}
#tb .mob-active-board-chip-v274.nm-header-board-chip-v303w67 .nm-header-note-stack-icon-v303w67{
width:16px !important;
height:16px !important;
flex-basis:16px !important;
}
#tb .mob-active-board-chip-v274.nm-header-board-chip-v303w67 .nm-header-note-stack-icon-v303w67 svg{
width:16px !important;
height:16px !important;
stroke-width:1.9 !important;
}
#tb .mob-active-board-chip-v274.nm-header-board-chip-v303w67 .nm-header-chip-caret-v303w67{
right:3px !important;
bottom:3px !important;
width:7px !important;
min-width:7px !important;
height:7px !important;
font-size:7px !important;
line-height:7px !important;
}
}
/* W3.90.70 — NuMemo header logo click refresh */
.mobile-header-logo-v303w3.nm-app-refresh-logo-v303w68,
.web-header-logo-v303w2.nm-web-refresh-logo-v303w69{
cursor:pointer;
}
/* 웹 헤더 로고 기존 중앙정렬 CSS의 pointer-events:none을 클릭 가능 상태로 되돌림 */
#tb .web-header-logo-v303w2.nm-web-refresh-logo-v303w69,
#tb .web-header-logo-v303w3.nm-web-refresh-logo-v303w69{
pointer-events:auto !important;
z-index:3 !important;
}
/* ─────────────────────────────────────────────
NuMemo W3-90-79 광고 플레이어 1단계
- 하단 광고영역 우→좌 반복 흐름
- PC hover preview / 모바일 longpress preview
- 기존 레이아웃 높이 60px 유지
───────────────────────────────────────────── */
#ad-bar {
position: relative !important;
overflow: hidden !important;
flex: 0 0 60px !important;
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
padding: 0 !important;
background: #fff !important;
border-top: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#ad-bar .nm-ad-viewport {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: stretch;
}
#ad-bar .nm-ad-track {
display: flex;
align-items: stretch;
gap: 10px;
width: max-content;
min-width: 100%;
animation: nmAdMarqueeW39079 34s linear infinite;
will-change: transform;
}
#ad-bar.paused .nm-ad-track,
#ad-bar:hover .nm-ad-track {
animation-play-state: paused;
}
.nm-ad-item {
width: 132px;
height: 100%;
flex: 0 0 auto;
border: 0;
border-radius: 12px;
background: transparent;
padding: 0;
overflow: hidden;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
position: relative;
}
.nm-ad-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* W3.91.60: 예약중(공개예정) 광고 — 대기업 티저 광고 스타일 */
.nm-ad-item-scheduled img {
filter: grayscale(45%) brightness(.55);
}
.nm-ad-scheduled-badge {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 4px;
text-align: center;
background: linear-gradient(180deg, rgba(10,14,26,.15) 0%, rgba(8,10,20,.72) 100%);
}
.nm-ad-scheduled-eyebrow {
font-size: 8px;
font-weight: 800;
letter-spacing: .14em;
color: #d4b96a;
text-transform: uppercase;
white-space: nowrap;
}
.nm-ad-scheduled-date {
font-size: 11px;
font-weight: 800;
color: #fff;
letter-spacing: -.01em;
text-shadow: 0 1px 6px rgba(0,0,0,.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.nm-ad-preview-scheduled {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(120% 140% at 50% 0%, #1b2440 0%, #0a0e1a 70%);
}
.nm-ad-scheduled-preview {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px;
text-align: center;
}
.nm-ad-scheduled-preview .nm-ad-scheduled-eyebrow {
font-size: 11px;
position: relative;
padding-bottom: 10px;
}
.nm-ad-scheduled-preview .nm-ad-scheduled-eyebrow::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 34px;
height: 2px;
background: linear-gradient(90deg, transparent, #d4b96a, transparent);
}
.nm-ad-scheduled-date-lg {
font-size: 26px;
font-weight: 900;
color: #fff;
letter-spacing: -.02em;
}
.nm-ad-scheduled-sub {
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,.62);
letter-spacing: -.01em;
}
@keyframes nmAdMarqueeW39079 {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
#nm-ad-preview {
position: fixed;
z-index: 2147483000;
left: 50%;
bottom: 78px;
width: min(360px, calc(100vw - 22px));
transform: translateX(-50%) translateY(8px);
border-radius: 18px;
background: rgba(255,255,255,.98);
border: 1px solid rgba(0,0,0,.12);
box-shadow: 0 12px 36px rgba(0,0,0,.24);
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity .14s ease, transform .14s ease;
}
#nm-ad-preview.show {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
#nm-ad-preview[style*="left"]:not([style*="50%"]).show {
transform: none;
}
.nm-ad-preview-close {
position: absolute;
right: 8px;
top: 8px;
width: 28px;
height: 28px;
border: 0;
border-radius: 999px;
background: rgba(0,0,0,.45);
color: #fff;
font-size: 20px;
line-height: 26px;
cursor: pointer;
z-index: 2;
}
.nm-ad-preview-media {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #111827;
}
.nm-ad-preview-media img,
.nm-ad-preview-media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* W3.91.132: 유튜브 iframe 등이 터치를 가로채는 문제를 막기 위한 투명 터치 감지 레이어.
컨트롤 버튼(z-index 2~3)보다는 아래, 실제 영상(z-index 자동=0)보다는 위에 위치. */
.nm-ad-preview-tapcatch {
position: absolute;
inset: 0;
z-index: 1;
background: transparent;
}
.nm-ad-video-ready {
position: absolute;
left: 10px;
bottom: 10px;
padding: 5px 9px;
border-radius: 999px;
background: rgba(0,0,0,.54);
color: #fff;
font-size: 11px;
font-weight: 700;
}
.nm-ad-preview-controls {
position: absolute;
right: 8px;
bottom: 8px;
display: flex;
gap: 6px;
z-index: 3;
}
.nm-ad-preview-ctrl-btn {
width: 30px;
height: 30px;
border: 0;
border-radius: 999px;
background: rgba(0,0,0,.56);
color: #fff;
font-size: 15px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.nm-ad-preview-ctrl-btn:active {
background: rgba(0,0,0,.75);
}
.nm-ad-preview-vol-slider {
width: 70px;
accent-color: #F97316;
cursor: pointer;
}
/* W3.91.109: 마우스 호버 환경(데스크톱 웹)에서는 닫기/음소거/전체화면 버튼이
평소엔 숨어있다가, 광고 팝업에 마우스를 올렸을 때만 나타나 시청을 방해하지 않는다.
터치 기기(모바일 앱 등)는 hover 개념이 없으므로 이 규칙이 적용되지 않고
기존처럼 항상 보이는 그대로 유지된다. */
@media (hover: hover) and (pointer: fine) {
.nm-ad-preview-close,
.nm-ad-preview-controls {
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
#nm-ad-preview:hover .nm-ad-preview-close,
#nm-ad-preview:hover .nm-ad-preview-controls {
opacity: 1;
pointer-events: auto;
}
}
/* W3.91.131: 터치 기기(모바일 앱 등)에서도 평소엔 닫기/음소거/전체화면 버튼을 숨기고,
화면을 터치했을 때만 잠깐 나타났다가, 계속 안 만지면 다시 사라지게 한다.
위 PC 마우스 hover 규칙과는 완전히 별개이며, JS가 붙이는 클래스(nm-ad-touch-hide/-show)로만 제어된다. */
#nm-ad-preview.nm-ad-touch-hide .nm-ad-preview-close,
#nm-ad-preview.nm-ad-touch-hide .nm-ad-preview-controls {
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
#nm-ad-preview.nm-ad-touch-hide.nm-ad-touch-show .nm-ad-preview-close,
#nm-ad-preview.nm-ad-touch-hide.nm-ad-touch-show .nm-ad-preview-controls {
opacity: 1;
pointer-events: auto;
}
.nm-ad-fs-exit-btn {
display: none;
position: fixed;
top: max(14px, env(safe-area-inset-top, 14px));
right: 14px;
z-index: 2147483647;
padding: 10px 14px;
border: 0;
border-radius: 999px;
background: rgba(0,0,0,.72);
color: #fff;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.nm-ad-fs-exit-btn.show {
display: block;
}
.nm-ad-preview-title {
padding: 9px 12px 11px;
font-size: 13px;
font-weight: 800;
color: #222;
text-align: center;
}
.nm-ad-preview-more {
display: block;
width: 100%;
padding: 11px 12px;
border: 0;
border-top: 1px solid rgba(0,0,0,.08);
background: #fff;
color: #222;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.nm-ad-preview-more:active {
background: #f2f2f2;
}
@media (max-width: 600px) {
#ad-bar {
display: flex !important;
flex: 0 0 60px !important;
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
}
.nm-ad-item {
width: 118px;
height: 100%;
border-radius: 11px;
}
#ad-bar .nm-ad-track {
gap: 8px;
animation-duration: 30s;
}
#nm-ad-preview {
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
width: min(330px, calc(100vw - 20px));
}
}
/* ═══════════════════════════════════════════════════════
NuMemo W3-90-91 — 광고판 16:9 + 광고영역 세로 꽉 채움
- 광고영역 높이는 유지
- 광고판 자체를 16:9 비율로 고정
- 위/아래 여백 없이 영역 높이 100% 사용
- 터치 팝업 / 원터치 URL / 이동 기능 유지
═══════════════════════════════════════════════════════ */
#ad-bar .nm-ad-viewport{
height:100% !important;
padding:0 !important;
margin:0 !important;
align-items:stretch !important;
}
#ad-bar .nm-ad-track{
height:100% !important;
padding:0 !important;
margin:0 !important;
align-items:stretch !important;
}
#ad-bar .nm-ad-item{
box-sizing:border-box !important;
height:100% !important;
min-height:100% !important;
max-height:100% !important;
width:107px !important;
min-width:107px !important;
max-width:107px !important;
flex:0 0 107px !important;
aspect-ratio:16 / 9 !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:stretch !important;
justify-content:stretch !important;
overflow:hidden !important;
}
#ad-bar .nm-ad-item img{
display:block !important;
width:100% !important;
height:100% !important;
margin:0 !important;
padding:0 !important;
object-fit:cover !important;
}
@media (max-width:600px){
#ad-bar .nm-ad-item{
width:121px !important;
min-width:121px !important;
max-width:121px !important;
flex-basis:121px !important;
}
}
/* ═══════════════════════════════════════════════════════
NuMemo W3-90-92 — Web 전용 광고판 이동 속도 소폭 감소
- Android/Capacitor 앱 속도는 유지
- 웹 브라우저에서만 광고 트랙 animation-duration 증가
═══════════════════════════════════════════════════════ */
html:not(.capacitor) body:not(.capacitor) #ad-bar .nm-ad-track{
animation-duration:42s !important;
}
/* ═══════════════════════════════════════════════════════
NuMemo W3-90-94 — 광고판 축소 + 임시 알록달록 색상 제거
- 광고영역 높이는 유지
- 광고판 자체만 상하좌우 여백을 두고 축소
- 앱/웹 동일하게 16:9 유지
- 광고 이동/팝업/URL/NuCore Admin 유지
═══════════════════════════════════════════════════════ */
#ad-bar .nm-ad-viewport{
height:100% !important;
padding:0 !important;
margin:0 !important;
display:flex !important;
align-items:center !important;
}
#ad-bar .nm-ad-track{
height:100% !important;
padding:0 !important;
margin:0 !important;
align-items:center !important;
}
#ad-bar .nm-ad-item{
box-sizing:border-box !important;
height:52px !important;
min-height:52px !important;
max-height:52px !important;
width:92px !important;
min-width:92px !important;
max-width:92px !important;
flex:0 0 92px !important;
aspect-ratio:16 / 9 !important;
margin:4px 0 !important;
padding:0 !important;
border-radius:11px !important;
background:#fff !important;
box-shadow:0 1px 3px rgba(15,23,42,.12) !important;
border:1px solid rgba(148,163,184,.38) !important;
overflow:hidden !important;
}
#ad-bar .nm-ad-item img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
margin:0 !important;
padding:0 !important;
}
@media (max-width:600px){
#ad-bar .nm-ad-item{
height:52px !important;
min-height:52px !important;
max-height:52px !important;
width:92px !important;
min-width:92px !important;
max-width:92px !important;
flex:0 0 92px !important;
margin:4px 0 !important;
}
}
/* ═══════════════════════════════════════════════════════
NuMemo W3-91-04-FIX3 — 앱/웹 광고 완전 무한 루프
- 광고 목록 1묶음을 화면 폭에 맞게 충분히 복제
- 실제 첫 묶음 픽셀폭만큼 이동
- 마지막 광고 다음 첫 광고가 바로 이어지도록 빈칸/튐 방지
═══════════════════════════════════════════════════════ */
#ad-bar .nm-ad-track.nm-ad-track-seamless,
html.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless{
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:0 !important;
width:max-content !important;
min-width:0 !important;
height:100% !important;
padding:0 !important;
margin:0 !important;
animation:nmAdSeamlessLoopW39104Fix3 var(--nm-ad-loop-duration, 42s) linear infinite !important;
will-change:transform !important;
}
#ad-bar .nm-ad-loop-set,
html.capacitor #ad-bar .nm-ad-loop-set,
body.capacitor #ad-bar .nm-ad-loop-set{
display:flex !important;
flex:0 0 auto !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:10px !important;
height:100% !important;
padding:0 10px 0 0 !important;
margin:0 !important;
}
@keyframes nmAdSeamlessLoopW39104Fix3{
from{ transform:translate3d(0,0,0); }
to{ transform:translate3d(calc(-1 * var(--nm-ad-loop-distance, 1020px)),0,0); }
}
#ad-bar.paused .nm-ad-track.nm-ad-track-seamless,
#ad-bar:hover .nm-ad-track.nm-ad-track-seamless,
html.capacitor #ad-bar.paused .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar.paused .nm-ad-track.nm-ad-track-seamless{
animation-play-state:paused !important;
}
html.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless{
--nm-ad-loop-duration:30s;
}
html:not(.capacitor) body:not(.capacitor) #ad-bar .nm-ad-track.nm-ad-track-seamless{
--nm-ad-loop-duration:42s;
}
/* ═══════════════════════════════════════════════════════
NuMemo W3-91-04-FIX4 — 웹/앱 광고 끊김 없는 무한 반복 최종 보강
- 1묶음 폭만큼 이동 후 동일 묶음으로 자연스럽게 이어짐
- 웹 넓은 화면에서도 끝 공백 방지
- 빈 광고영역 hover 때문에 웹에서 멈춘 것처럼 보이는 현상 방지
═══════════════════════════════════════════════════════ */
#ad-bar .nm-ad-track.nm-ad-track-seamless,
html.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless{
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:0 !important;
width:max-content !important;
min-width:0 !important;
height:100% !important;
padding:0 !important;
margin:0 !important;
animation:nmAdSeamlessLoopW39104Fix4 var(--nm-ad-loop-duration, 42s) linear infinite !important;
will-change:transform !important;
}
#ad-bar .nm-ad-loop-set,
html.capacitor #ad-bar .nm-ad-loop-set,
body.capacitor #ad-bar .nm-ad-loop-set{
display:flex !important;
flex:0 0 auto !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:10px !important;
height:100% !important;
padding:0 10px 0 0 !important;
margin:0 !important;
}
@keyframes nmAdSeamlessLoopW39104Fix4{
from{ transform:translate3d(0,0,0); }
to{ transform:translate3d(calc(-1 * var(--nm-ad-loop-distance, 1020px)),0,0); }
}
#ad-bar:hover .nm-ad-track.nm-ad-track-seamless{
animation-play-state:running !important;
}
#ad-bar.paused .nm-ad-track.nm-ad-track-seamless,
html.capacitor #ad-bar.paused .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar.paused .nm-ad-track.nm-ad-track-seamless{
animation-play-state:paused !important;
}
html.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless{
--nm-ad-loop-duration:30s;
}
html:not(.capacitor) body:not(.capacitor) #ad-bar .nm-ad-track.nm-ad-track-seamless{
--nm-ad-loop-duration:42s;
}
/* ═══════════════════════════════════════════════════════
NuMemo W3-91-04-FIX5 — 광고 팝업 표시 중 흐름 정지 복구
- 웹: 광고 위 마우스 hover로 팝업 표시 시 즉시 정지
- 앱: 광고 터치/롱프레스 팝업 표시 시 즉시 정지
- 팝업 종료 후 기존 무한 반복 재개
═══════════════════════════════════════════════════════ */
#ad-bar .nm-ad-track.nm-ad-track-seamless,
html.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar .nm-ad-track.nm-ad-track-seamless{
animation:nmAdSeamlessLoopW39104Fix5 var(--nm-ad-loop-duration, 42s) linear infinite !important;
}
@keyframes nmAdSeamlessLoopW39104Fix5{
from{ transform:translate3d(0,0,0); }
to{ transform:translate3d(calc(-1 * var(--nm-ad-loop-distance, 1020px)),0,0); }
}
#ad-bar.paused .nm-ad-track.nm-ad-track-seamless,
#ad-bar:hover .nm-ad-track.nm-ad-track-seamless,
html.capacitor #ad-bar.paused .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar.paused .nm-ad-track.nm-ad-track-seamless{
animation-play-state:paused !important;
}
/* ═══════════════════════════════════════════════════════
NuMemo W3-91-04-FIX6 — Android popup hard pause
앱에서 광고 팝업 표시 중 광고 흐름 강제 정지
═══════════════════════════════════════════════════════ */
#ad-bar.paused .nm-ad-track.nm-ad-track-seamless,
#ad-bar[data-nm-ad-paused="1"] .nm-ad-track.nm-ad-track-seamless,
html.capacitor #ad-bar.paused .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar.paused .nm-ad-track.nm-ad-track-seamless,
html.capacitor #ad-bar[data-nm-ad-paused="1"] .nm-ad-track.nm-ad-track-seamless,
body.capacitor #ad-bar[data-nm-ad-paused="1"] .nm-ad-track.nm-ad-track-seamless{
animation-play-state:paused !important;
-webkit-animation-play-state:paused !important;
}
@keyframes nmAdSeamlessLoopW39104Fix6{
from{ transform:translate3d(0,0,0); }
to{ transform:translate3d(calc(-1 * var(--nm-ad-loop-distance, 1020px)),0,0); }
}
/* ─ W3.91.121 로그인 화면 콤팩트 정리 + 소셜 브랜드 로고 ─ */
#auth-screen .setup-wrap{padding-top:14px;padding-bottom:14px;}
#auth-screen .setup-logo{margin-bottom:12px;}
#auth-screen .setup-logo-combined{max-width:142px;}
#auth-screen .setup-logo p{margin-top:7px;font-size:13px;line-height:1.25;}
#auth-screen .setup-card{padding:18px 20px 16px;}
#auth-screen .auth-tabs{margin-bottom:10px;}
#auth-screen .auth-tab{padding:8px 9px;}
#auth-screen .auth-recent-account{margin:-1px 0 9px;padding:6px 8px;}
#auth-screen .sf{margin-bottom:10px;}
#auth-screen .sf label{margin-bottom:5px;}
#auth-screen .sf input{height:43px;}
#auth-screen .auth-live-hint:empty{display:none;}
#auth-screen .auth-login-options{margin:4px 0 7px;gap:4px;}
#auth-screen .auth-check{margin:5px 0 7px;}
#auth-screen .setup-err:empty{display:none;}
#auth-screen .btn-main{margin-top:4px;min-height:46px;}
#auth-screen .auth-links{margin:6px 0 1px;}
#auth-screen .auth-divider{margin:9px 0 8px;}
#auth-screen .auth-socials{gap:7px;}
#auth-screen .auth-social{height:40px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 9px;background:#fff;color:var(--txt2);}
#auth-screen .auth-social:hover{border-color:var(--bdr2);background:#f8fafc;}
#auth-screen .auth-social-logo{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;}
#auth-screen .auth-social-logo svg{width:100%;height:100%;display:block;}
#auth-screen .auth-social-logo-naver{background:#03c75a;color:#fff;font-size:13px;font-weight:900;line-height:1;border-radius:2px;font-family:Arial,sans-serif;}
#auth-screen .auth-social-logo-kakao{background:#fee500;border-radius:50%;padding:2px;box-sizing:border-box;}
#auth-screen .auth-social-note{margin-top:6px;font-size:9.8px;line-height:1.3;}
@media(max-width:600px){
#auth-screen .setup-wrap{padding-top:10px;padding-bottom:12px;}
#auth-screen .setup-logo{margin-bottom:10px;}
#auth-screen .setup-logo-combined{max-width:132px;}
#auth-screen .setup-logo p{margin-top:5px;font-size:12px;}
#auth-screen .setup-card{padding:16px 18px 14px;}
#auth-screen .auth-login-options{flex-direction:row;align-items:center;justify-content:space-between;}
#auth-screen .auth-login-option-note{font-size:10.5px;white-space:nowrap;}
}
/* ─ W3.91.122 Android 로그인 화면 세로 중앙 정렬 ─
- 콤팩트 로그인 화면을 기기 가용 높이의 중앙에 배치
- 회원가입처럼 내용이 길어지는 경우에는 자연스럽게 세로 스크롤 유지
*/
@media (max-width:480px){
#auth-screen{
align-items:stretch !important;
}
#auth-screen .setup-wrap{
min-height:100%;
box-sizing:border-box;
display:flex;
flex-direction:column;
justify-content:center;
margin:0 auto;
padding-top:max(14px, env(safe-area-inset-top)) !important;
padding-bottom:max(14px, env(safe-area-inset-bottom)) !important;
}
}
/* ─ W3.91.130 로그인/회원가입 화면 상하 여백 정리 ─
1) 상단 상태바(시계·배터리 등)와 겹치던 문제를 최소 여백을 넉넉히 올려서 해결.
2) 카드 내부/필드 사이 간격을 살짝 키워서 더 정돈된 느낌으로 정리.
기존 W3.91.121/122 규칙 뒤에 추가되는 규칙이라 값만 갱신되고, 로직/구조는 그대로다. */
#auth-screen .setup-card{padding:24px 22px 20px;}
#auth-screen .sf{margin-bottom:14px;}
#auth-screen .auth-consent-box{padding:12px 12px;margin:9px 0 11px;}
#auth-screen .auth-check{margin:7px 0 9px;}
@media (max-width:600px){
#auth-screen .setup-wrap{padding-top:max(18px, env(safe-area-inset-top)) !important;padding-bottom:max(16px, env(safe-area-inset-bottom)) !important;}
#auth-screen .setup-logo{margin-bottom:16px;}
}
@media (max-width:480px){
#auth-screen .setup-wrap{
padding-top:max(30px, calc(env(safe-area-inset-top) + 12px)) !important;
padding-bottom:max(20px, calc(env(safe-area-inset-bottom) + 10px)) !important;
}
}
/* ─ W3.91.143 회원가입 화면 전용 여백 압축 (로그인 화면은 그대로 유지) ─
휴대전화 필드를 제거한 김에, 남은 필드들의 세로 여백도 같이 좁혀서
전체 폼이 더 짧고 정돈된 인상을 주도록 조정한다.
상단/하단 safe-area 여백(setup-wrap)은 상태바 겹침 방지용이라 그대로 둔다. */
#auth-screen[data-auth-mode="signup"] .sf{margin-bottom:11px;}
#auth-screen[data-auth-mode="signup"] .auth-grid-2{gap:10px;}
#auth-screen[data-auth-mode="signup"] .auth-consent-box{padding:9px 10px;margin:7px 0 9px;}
#auth-screen[data-auth-mode="signup"] .auth-check{margin:5px 0 6px;}
/* ─ W3.91.145 회원가입 화면 상단 정렬로 전환 (진짜 원인 수정) ─
W3.91.122의 '세로 중앙 정렬'은 내용이 화면보다 길어지면 위/아래로 똑같이
넘치게 만든다. 회원가입 폼은 로그인 폼보다 길어서, 위쪽 절반(로고/탭)이
화면 위로 밀려나 상태바와 겹쳐 보이는 게 진짜 원인이었다.
회원가입 모드에서는 중앙 정렬 대신 상단부터 쌓아서 아래로만 스크롤되게 한다. */
@media (max-width:480px){
#auth-screen[data-auth-mode="signup"] .setup-wrap{
justify-content:flex-start !important;
}
}
/* ─ W3.91.146 480px보다 넓은 화면(일반 웹브라우저)에서도 동일하게 적용 ─
W3.91.145는 좁은 화면(≤480px, 안드로이드 앱 등)만 다뤘다. 그보다 넓은 창에서는
#auth-screen 자체의 세로 중앙정렬(492번째 줄, align-items:center)이 여전히
적용되고 있어서, 같은 원리로 회원가입 폼 위쪽이 화면 밖으로 밀려 올라가는
문제가 그대로 남아있었다. 회원가입 모드에서는 이 폭에서도 상단 정렬로 바꾼다. */
@media (min-width:481px){
#auth-screen[data-auth-mode="signup"]{
align-items:flex-start !important;
}
}
#auth-screen[data-auth-mode="signup"] .auth-signup-note{margin:-2px 0 6px;}
#auth-screen[data-auth-mode="signup"] .setup-card{padding-bottom:16px;}
/* ─ W3.91.123 앱 플랜 관리 화면 폰트 3px 축소 ─
범위: 모바일 플랜 변경 화면의 타이포그래피만 조정.
카드 크기, 여백, 버튼 동작, 결제/플랜 로직은 변경하지 않음.
*/
@media (max-width:600px){
.nm-plan-titlebox-w354 h1{font-size:24px;}
.nm-plan-titlebox-w354 p{font-size:10.6px;}
.nm-plan-card-label-w354{font-size:10px;}
.nm-plan-current-name-w354{font-size:20px;}
.nm-plan-active-badge-w354,
.nm-plan-recommend-badge-w354,
.nm-plan-pro-badge-w354{font-size:8.5px;}
.nm-plan-current-usage-row-w354{font-size:12.6px;}
.nm-plan-current-usage-row-w354 em{font-size:12.5px;}
.nm-plan-current-meta-w354{font-size:10px;}
.nm-plan-premium-name-w354,
.nm-plan-pro-name-w354{font-size:18px;}
.nm-plan-premium-storage-w354,
.nm-plan-pro-storage-w354{font-size:34px;}
.nm-plan-pro-desc-w354{font-size:11.5px;}
.nm-plan-price-label-w354{font-size:9px;}
.nm-plan-price-grid-w354 strong{font-size:15px;}
.nm-plan-price-grid-w354 small{font-size:8px;}
.nm-plan-feature-list-w354 li{font-size:10.6px;}
.nm-plan-premium-start-w354,
.nm-plan-pro-ready-w354{font-size:11.2px;}
.nm-plan-pro-note-w354{font-size:10px;}
}
/* ═══════════════════════════════════════════════════════════════
V303-W3.91.174 — 메모 입력창 마감일(달력) 기능 1단계
중요도 선택 바를 좌측, 마감일 입력을 우측에 대칭으로 배치.
기존 저장/Realtime/Shift+Enter/Tab-중요도순환 로직 위에 3단계(텍스트→중요도→마감일)로 확장.
CSS ONLY 추가 — 기존 규칙은 건드리지 않음.
═══════════════════════════════════════════════════════════════ */
.web-draft-tags,
.mob-draft-tags{
justify-content:space-between !important;
flex-wrap:nowrap !important;
gap:10px !important;
padding-left:6px !important;
padding-right:6px !important;
}
.draft-tagbar-left{
display:flex;
align-items:center;
gap:4px;
flex:0 1 auto;
min-width:0;
}
.draft-duebox{
display:flex;
align-items:center;
gap:3px;
flex:0 0 auto;
padding:4px 7px;
border-radius:999px;
border:1px solid var(--bdr2);
background:var(--bg);
transition:border-color .12s ease, background .12s ease;
}
.draft-duebox.has-due{
border-color:#F97316;
background:rgba(249,115,22,.08);
}
.draft-due-label{
font-size:9.5px;
font-weight:700;
color:var(--txt3);
white-space:nowrap;
flex:0 0 auto;
}
/* V303-W3.91.179: 입력창 폭이 플레이스홀더("__년 __월 __일")가 아니라
실제로 완성되는 값("2026년 07월 27일", 4자리 연도라 더 길다) 기준으로 잘리지 않게 재계산.
그만큼 주변(패딩/칩 크기)을 더 압축해서 좁은 폰 화면에서도 한 줄에 들어가도록 했다. */
.draft-due-input{
width:112px;
flex:0 0 auto;
border:0;
background:transparent;
outline:none;
font-size:9.5px;
color:var(--txt);
font-family:inherit;
padding:0;
}
.draft-due-input::placeholder{ color:var(--txt3); opacity:.85; font-size:9.5px; }
.draft-due-clear{
display:none;
align-items:center;
justify-content:center;
width:13px;
height:13px;
border:0;
border-radius:999px;
background:rgba(148,163,184,.24);
color:var(--txt3);
cursor:pointer;
padding:0;
flex:0 0 auto;
}
.draft-duebox.has-due .draft-due-clear{ display:flex; }
.draft-due-clear i{ font-size:8px; }
/* 메모 타임스탬프 옆 마감일 표시 — 배경/아이콘 없이 심플하게, 빨간 텍스트.
V303-W3.91.186: 배지형(배경+아이콘)에서 "(~2026.07.31)" 텍스트형으로 다시 변경.
V303-W3.91.183: .rsub *{font-weight:var(--memo-weight) !important} 같은 전역 폰트 강제 규칙이
나중에 로드되는 하위 셀렉터라 !important 없이는 절대 못 이겼다. 그래서 여기도 !important로 맞섰다. */
.memo-due-suffix{
display:inline !important;
margin-left:5px !important;
padding:0 !important;
background:none !important;
border-radius:0 !important;
color:#dc2626 !important;
font-weight:800 !important;
font-size:9.5px !important;
font-style:normal !important;
letter-spacing:-.01em !important;
}
.edit-due-suffix-btn{
border:0 !important;
cursor:pointer !important;
font-family:inherit !important;
}
.edit-due-suffix-btn:hover{
text-decoration:underline;
}
/* 중요도 칩 자체 크기도 좁은 화면 기준으로 축소해 마감일 입력창에 공간을 더 내준다 */
.web-draft-tags .mob-draft-tag,
.mob-draft-tags .mob-draft-tag{
width:22px !important;
min-width:22px !important;
flex:0 0 22px !important;
}
@media (max-width:420px){
.web-draft-tags,
.mob-draft-tags{
gap:6px !important;
padding-left:5px !important;
padding-right:5px !important;
}
.draft-tagbar-left{ gap:3px; }
.web-draft-tags .mob-draft-tag,
.mob-draft-tags .mob-draft-tag{
width:19px !important;
min-width:19px !important;
flex:0 0 19px !important;
}
.draft-duebox{ padding:3px 5px; gap:2px; }
.draft-due-label{ font-size:8.5px; }
.draft-due-input{ width:100px; font-size:8.5px; }
}
/* V303-W3.91.175: Tab/화살표로 이동한 포커스 위치를 주황 테두리로 시각화.
V303-W3.91.184: 전체 그룹을 감싸는 테두리 대신, 지금 선택돼 있는 중요도 칩 하나에만
표시되도록 변경. 처음 진입 시 기본값이 '일반'이면 그 칩(.on)에 테두리가 붙는다. */
.draft-tagbar-left.kbd-focus .mob-draft-tag.on{
outline:2px solid #F97316;
outline-offset:2px;
border-radius:999px;
}
.draft-duebox.kbd-focus{
border-color:#F97316 !important;
box-shadow:0 0 0 2px rgba(249,115,22,.22);
}
/* V303-W3.91.182/187: 마감일 박스 정렬 재정비.
1) 중요도 바와 마감일 박스 사이 가운데 여백을 gap 하나에만 의존하지 않고
margin-left로 한 번 더 확실하게 보장한다.
2) input의 텍스트가 테두리 기준 수직 중앙에서 미묘하게 떠 보이던 문제 —
line-height를 span/input에 각각 줘봐도 브라우저가 입력창 내부 여백을 조금씩 다르게 처리해서
완전히 안 맞았다. 그래서 라벨(span)과 입력(input) 둘 다 정확히 같은 고정 height/line-height로
강제해서, 폰트 메트릭 차이와 상관없이 같은 기준선에 오도록 만들었다. */
.draft-duebox{
margin-left:12px;
}
.draft-due-label{
line-height:normal;
margin:0;
padding:0;
align-self:center;
color:#ff3b30 !important;
font-weight:700;
}
.draft-due-input{
line-height:normal;
margin:0;
padding:0;
border:0;
align-self:center;
vertical-align:middle;
color:#ff3b30;
font-weight:700 !important;
font-size:9.5px !important;
}
.draft-due-input::placeholder{
color:#ff3b30;
opacity:.7;
}
.draft-due-clear{
align-self:center;
}
/* ═══════════════════════════════════════════════════════════════
V303-W3.91.180 — 마감일 달력 팝업 (대기업 캘린더 톤: 흰 배경, 얇은 테두리, 절제된 그림자)
오늘 = 연회색, 지정 마감일 = 브랜드 오렌지.
═══════════════════════════════════════════════════════════════ */
.draft-duebox{ position:relative; }
/* W3.91.257: 메모 수정 중 마감일 — 날짜(왼쪽) + 마감일 입력창(오른쪽, 수정란 우측 끝과 맞춤) */
.rsub-editing{
display:flex !important;
align-items:center;
justify-content:space-between;
gap:8px;
}
.rsub-editing .rsub-date{ flex:0 0 auto; white-space:nowrap; }
.edit-duebox{
margin-left:auto !important;
flex:0 0 auto;
}
.due-cal-popup{
position:absolute;
right:0;
bottom:calc(100% + 8px);
z-index:200;
width:212px;
padding:10px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
box-shadow:0 10px 28px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06);
cursor:default;
}
.draft-duebox .draft-due-label{
font-size:calc(var(--memo-size) - 1.5px) !important;
color:var(--txt3) !important;
}
.draft-duebox .draft-due-input,
.draft-duebox .draft-due-input::placeholder{
font-size:calc(var(--memo-size) - 1.5px) !important;
color:var(--txt3) !important;
}
/* W3.91.260: 앵커 팝업 위치 계산이 계속 불안정해서, 화면 정중앙에 뜨는 모달로 교체.
위치 계산이 필요 없어 카드/목록의 overflow와 완전히 무관하다. */
.edit-due-modal-backdrop{
position:fixed !important;
inset:0 !important;
z-index:99999 !important;
background:rgba(15,23,42,.32);
display:flex;
align-items:center;
justify-content:center;
}
.edit-due-modal-backdrop .due-cal-popup{
position:static !important;
width:240px;
}
.due-cal-popup-fixed{
position:fixed !important;
right:auto !important;
bottom:auto !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
opacity:1 !important;
}
.due-cal-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:8px;
}
.due-cal-title{
font-size:12px;
font-weight:700;
color:#1f2933;
letter-spacing:-.01em;
}
.due-cal-nav{
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:6px;
background:transparent;
color:#6b7280;
cursor:pointer;
padding:0;
}
.due-cal-nav:hover{ background:#f3f4f6; color:#1f2933; }
.due-cal-nav i{ font-size:13px; }
.due-cal-weekdays{
display:grid;
grid-template-columns:repeat(7,1fr);
margin-bottom:2px;
}
.due-cal-wd{
text-align:center;
font-size:9.5px;
font-weight:700;
color:#9aa3af;
}
.due-cal-wd.is-sun{ color:#dc2626; }
.due-cal-wd.is-sat{ color:#2563eb; }
.due-cal-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
row-gap:2px;
}
.due-cal-cell{
width:100%;
aspect-ratio:1/1;
display:flex;
align-items:center;
justify-content:center;
border:0;
border-radius:50%;
background:transparent;
color:#374151;
font-size:10.5px;
font-weight:600;
cursor:pointer;
padding:0;
}
.due-cal-cell.is-sun{ color:#dc2626; }
.due-cal-cell.is-sat{ color:#2563eb; }
.due-cal-cell.due-cal-empty{ cursor:default; pointer-events:none; }
.due-cal-cell:not(.due-cal-empty):hover{ background:#f3f4f6; }
.due-cal-cell.is-today{
background:#e5e7eb;
color:#374151;
font-weight:700;
}
.due-cal-cell.is-selected{
background:#F97316 !important;
color:#fff !important;
font-weight:800;
}
/* V303-W3.91.210: 기간 팝업 달력 — 시작~종료 사이 날짜도 옅은 색으로 이어진 띠처럼 보이게.
행(row) 안에서는 열 사이 gap이 없어서 배경색만으로 자연스럽게 연결된다. */
.due-cal-cell.is-range-mid,
.due-cal-cell.is-range-start,
.due-cal-cell.is-range-end,
.due-cal-cell.is-range-solo{
background:rgba(249,115,22,.16);
}
.due-cal-cell.is-range-mid{ border-radius:0; }
.due-cal-cell.is-range-start{ border-radius:50% 0 0 50%; }
.due-cal-cell.is-range-end{ border-radius:0 50% 50% 0; }
.due-cal-cell.is-range-solo{ border-radius:50%; }
/* W3.472: 마감일 달력 박스 우측 하단 "마감일 삭제" 버튼 — 웹에서는 롱프레스 대신
눌러서 바로 지울 수 있게 한다. 대기업 제품(구글 캘린더 등) 다이얼로그 하단 버튼처럼
또렷한 크기·폰트에 여백을 넉넉히 준 스타일. 마감일이 지정돼 있을 때만 나타난다. */
.due-cal-footer{
display:flex;
justify-content:flex-end;
margin-top:10px;
padding-top:8px;
border-top:1px solid #f1f2f4;
}
.due-cal-delete-btn{
display:inline-flex;
align-items:center;
gap:5.6px;
height:29.8px;
padding:0 13px;
border:1px solid #fecaca;
border-radius:6.3px;
background:#fff5f5;
color:#dc2626;
font-size:10.5px;
font-weight:700;
letter-spacing:-.01em;
cursor:pointer;
transition:background .12s ease, border-color .12s ease;
}
.due-cal-delete-btn:hover{ background:#fee2e2; border-color:#fca5a5; }
.due-cal-delete-btn:active{ background:#fecaca; }
.due-cal-delete-btn i{ font-size:13px; }
/* ═══════════════════════════════════════════════════════════════
V303-W3.91.189 — 누메모 캘린더 (계정당 1개)
웹: 메모장 드롭다운에서 켜고 끄는, 보드처럼 캔버스 위에서 드래그로 옮기는 3:4 비율의 떠 있는 창.
모바일: 드롭다운에서 선택하면 화면 전체가 캘린더로 전환(보드 전환과 동일한 자리).
여백/숫자/글씨는 최소화하고, 날짜 칸의 실제 입력 공간을 최대화한다.
브랜드 오렌지 포인트, 여백 없는 그리드로 심플하고 고급스럽게.
═══════════════════════════════════════════════════════════════ */
/* ── 웹: 보드처럼 캔버스 위에 뜨는 3:4 창 ── */
.win.nm-cal-win{
min-width:0;
min-height:0;
position:absolute;
overflow:hidden;
}
.win.nm-cal-win.nm-cal-dragging{
opacity:.92;
box-shadow:0 12px 32px rgba(15,23,42,.22) !important;
}
.nm-cal-win-hdr{
flex:0 0 auto;
height:0;
cursor:grab;
background:transparent !important;
border:0 !important;
}
.nm-cal-win-hdr:active{ cursor:grabbing; }
.nm-cal-win-body{
flex:1 1 auto;
min-height:0;
padding:0;
box-sizing:border-box;
display:flex;
flex-direction:column;
}
.nm-cal-win-body .nm-cal-box{
width:100%;
height:100%;
aspect-ratio:unset;
border:0;
box-shadow:none;
border-radius:0;
padding:0;
}
/* ── 모바일: 화면 전체를 대체하는 캘린더 뷰 ── */
.nm-cal-view{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:0;
box-sizing:border-box;
background:#fff;
overflow:auto;
z-index:5;
}
.nm-cal-box{
width:100%;
height:100%;
max-height:100%;
display:flex;
flex-direction:column;
background:#fff;
border:0;
border-radius:0;
box-shadow:none;
overflow:hidden;
padding:8px;
box-sizing:border-box;
}
/* ── 공용: 달력 그리드 (웹 떠있는 창 / 모바일 전체화면 둘 다 동일) ── */
.nm-cal-head{
display:flex;
align-items:center;
justify-content:space-between;
flex:0 0 auto;
padding:2px 2px 6px;
}
.nm-cal-nav{
width:22px; height:22px;
display:flex; align-items:center; justify-content:center;
border:0; border-radius:6px;
background:transparent; color:#6b7280;
cursor:pointer; padding:0;
}
.nm-cal-nav:hover{ background:#f3f4f6; color:#1f2933; }
/* W3.91.245: 데스크톱 캘린더 헤더를 메모장 헤더(.wh)와 정확히 같은 크기/형태로 맞춤
(높이 38px, 패딩 동일, 위쪽 둥근 모서리 동일). 이 줄 전체가 드래그 손잡이이고,
전달/다음달 화살표만 클릭 기능을 유지한다. */
.nm-cal-win .nm-cal-head{
height:34px !important;
min-height:34px !important;
padding:0 12px 0 16px !important;
margin:0 !important;
background:#F97316 !important;
border-radius:var(--radius) var(--radius) 0 0 !important;
cursor:grab;
box-sizing:border-box !important;
}
.nm-cal-win.nm-cal-dragging .nm-cal-head{ cursor:grabbing; }
.nm-cal-win .nm-cal-title{
color:#fff !important;
font-size:14px !important;
font-weight:700 !important;
}
.nm-cal-win .nm-cal-nav{ color:#fff !important; }
.nm-cal-win .nm-cal-nav:hover{ background:rgba(255,255,255,.22) !important; color:#fff !important; }
.nm-cal-nav i{ font-size:14px; }
.nm-cal-title{
font-size:calc(var(--memo-size, 11px) + 2px); font-weight:800; color:#1f2933;
letter-spacing:-.01em; cursor:pointer;
font-family:var(--memo-family, inherit) !important;
}
.nm-cal-weekdays{
display:grid;
grid-template-columns:repeat(7,1fr);
flex:0 0 auto;
margin-bottom:2px;
}
.nm-cal-wd{
text-align:center;
font-size:var(--memo-size, 11px);
font-weight:700;
color:#9aa3af;
padding-bottom:2px;
font-family:var(--memo-family, inherit) !important;
}
.nm-cal-wd.is-sun{ color:#dc2626; }
.nm-cal-wd.is-sat{ color:#2563eb; }
.nm-cal-grid{
flex:1 1 auto;
display:grid;
grid-template-columns:repeat(7,1fr);
grid-auto-rows:1fr;
gap:0;
background:#fff;
border-top:none;
border-left:none;
min-height:0;
}
.nm-cal-cell{
background:#fff;
padding:2px;
display:flex;
flex-direction:column;
min-width:0;
min-height:0;
overflow:hidden;
cursor:pointer;
border-right:1px solid #eef0f3;
border-bottom:1px solid #eef0f3;
}
.nm-cal-cell-empty{ background:#fafafa; cursor:default; }
.nm-cal-cell-outside{ background:#fafafa; }
.nm-cal-cell-outside .nm-cal-daynum{ color:#c1c5cb !important; }
.nm-cal-cell-outside .nm-cal-item-text{ color:#b9bec5 !important; }
.nm-cal-cell-outside .nm-cal-item-dot{ opacity:.45; }
.nm-cal-cell-outside .nm-cal-item-own.nm-cal-item-fill{ opacity:.55; }
.nm-cal-cell-outside .nm-cal-item-del{ display:none !important; }
.nm-cal-cell.is-today{ box-shadow:inset 0 0 0 1.5px #C1272D; }
.nm-cal-daynum-row{
display:flex;
align-items:baseline;
gap:4px;
flex:0 0 auto;
margin-bottom:1px;
min-width:0;
max-width:100%;
overflow:hidden;
}
.nm-cal-today-label{
font-size:7px;
font-weight:800;
color:#C1272D;
line-height:1;
letter-spacing:.02em;
font-family:var(--memo-family, inherit) !important;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
min-width:0;
}
/* W3.91.248: 태블릿 고정 크기 */
@media (min-width: 601px) {
html.capacitor .nm-cal-today-label{
font-size:5px !important;
}
}
/* W3.91.249: 앱(폰, 좁은 화면) 고정 크기 */
@media (max-width: 600px) {
html.capacitor .nm-cal-today-label{
font-size:2px !important;
}
}
.nm-cal-daynum{
font-size:var(--memo-size, 11px);
font-weight:700;
color:#9aa3af;
line-height:1;
font-family:var(--memo-family, inherit) !important;
}
.nm-cal-cell.is-today .nm-cal-daynum{ font-weight:800; }
.nm-cal-daynum.is-sun{ color:#dc2626; }
.nm-cal-daynum.is-sat{ color:#2563eb; }
.nm-cal-items{
flex:1 1 auto;
display:flex;
flex-direction:column;
gap:1px;
min-height:0;
overflow:hidden;
}
.nm-cal-item{
display:flex;
align-items:center;
gap:2px;
font-size:var(--memo-size, 11px);
line-height:1.25;
border-radius:2px;
padding:0 2px;
min-height:0;
cursor:pointer;
font-family:var(--memo-family, inherit) !important;
}
.nm-cal-item-text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
flex:1 1 auto;
min-width:0;
}
.nm-cal-item-own{
background:transparent;
color:#1f2933;
font-weight:600;
}
.nm-cal-item-own:hover .nm-cal-item-del{ display:flex; }
.nm-cal-item-del{
display:none;
flex:0 0 auto;
align-items:center; justify-content:center;
width:9px; height:9px;
border:0; border-radius:50%;
background:rgba(31,41,51,.14);
color:#1f2933;
padding:0;
cursor:pointer;
}
.nm-cal-item-del i{ font-size:6px; }
.nm-cal-item-memo{ color:#6b7280; }
.nm-cal-item-memo.is-done{ color:#c7ccd3; text-decoration:line-through; }
.nm-cal-item-memo.is-done .nm-cal-item-dot{ background:#c7ccd3; }
.nm-cal-item-dot{
flex:0 0 auto;
width:4px; height:4px; border-radius:50%;
background:#F97316;
}
.nm-cal-item-add{
display:flex; align-items:center; justify-content:center;
color:#c9ccd2;
opacity:0;
min-height:9px;
}
.nm-cal-cell:hover .nm-cal-item-add{ opacity:1; }
.nm-cal-item-add i{ font-size:8px; }
/* V303-W3.91.213: 이번 주 다른 날짜에서는 쓰이는 레인인데 오늘은 비어있는 자리 —
보이지는 않지만 높이는 유지해서 여러 날짜에 걸친 띠들의 줄 정렬이 흐트러지지 않게 한다. */
.nm-cal-item-lane-empty{
min-height:1.3em;
visibility:hidden;
}
.nm-cal-item-editing{ padding:0; }
.nm-cal-item-input{
width:100%;
border:1px solid #F97316;
border-radius:2px;
background:#fff;
font-size:var(--memo-size, 11px);
line-height:1.3;
padding:0 2px;
outline:none;
font-family:var(--memo-family, inherit) !important;
color:#1f2933;
}
/* ── 드롭다운 안의 "캘린더" 항목: 보드 항목과 완전히 동일한 스타일을 그대로 물려받는다 (별도 CSS 불필요) ── */
.mob-cal-dropdown-item-v303w188{ border-top:0; }
@media (max-width:600px){
.nm-cal-box{ width:100%; }
.nm-cal-daynum{ font-size:var(--memo-size, 11px); }
.nm-cal-item{ font-size:var(--memo-size, 11px); }
}
/* V303-W3.91.192: 상단바 메모장칩 바로 옆 캘린더 토글 아이콘 (웹/앱 공용) */
.tb-cal-toggle-v303w192{
background:none;
border:none;
cursor:pointer;
color:#6b7280;
width:30px; height:30px;
display:flex; align-items:center; justify-content:center;
border-radius:8px;
padding:0;
margin-left:6px;
flex:0 0 auto;
}
.tb-cal-toggle-v303w192:hover{ background:rgba(148,163,184,.16); }
.tb-cal-toggle-v303w192 i{ font-size:16px; }
.tb-cal-toggle-v303w192.on{
background:#F97316;
color:#fff;
}
.tb-cal-toggle-v303w192.on:hover{ background:#EA580C; }
.tb-active-chip-wrap-v274,
.web-active-chip-wrap-v303w1{
display:flex;
align-items:center;
}
/* V303-W3.91.194: 모바일 캘린더 — 실제 메모장(mobbrd/mob-unified-hdr/mobbdy)과 동일한 프레임을
그대로 재사용해서 "메모장 자리에 캘린더가 꽉 들어찬" 모양이 되도록 한다. */
.nm-cal-mob-board .mob-unified-hdr .mob-board-name{ cursor:default; }
.nm-cal-mob-body{
padding:0 !important;
display:flex !important;
overflow:hidden !important;
}
.nm-cal-mob-body .nm-cal-box{
width:100%;
height:100%;
border:0;
box-shadow:none;
border-radius:0;
padding:0;
}
/* ═══════════════════════════════════════════════════════════════
V303-W3.91.200 — 캘린더 날짜별 입력 팝업
캘린더의 70% 크기, 중앙 배치. 위: 그 날짜의 전체 일정 목록. 아래: 기간(선택) + 입력칸.
대기업스럽게: 여백/색 절제, 기간과 입력칸만 남긴 심플한 구성.
═══════════════════════════════════════════════════════════════ */
.nm-cal-day-modal-backdrop{
position:absolute;
inset:0;
background:rgba(15,23,42,.38);
display:flex;
align-items:center;
justify-content:center;
z-index:60;
border-radius:inherit;
}
.nm-cal-day-modal{
width:70%;
height:70%;
min-width:200px;
min-height:180px;
background:#fff;
border-radius:12px;
box-shadow:0 16px 40px rgba(15,23,42,.22);
display:flex;
flex-direction:column;
overflow:hidden;
}
.nm-cal-day-modal-head{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px;
border-bottom:1px solid #eef0f3;
}
.nm-cal-day-modal-date{
font-size:calc(var(--memo-size, 11px) + 2px);
font-weight:800;
color:#1f2933;
font-family:var(--memo-family, inherit) !important;
letter-spacing:-.01em;
}
.nm-cal-day-modal-close{
width:24px; height:24px;
display:flex; align-items:center; justify-content:center;
border:0; border-radius:7px;
background:transparent; color:#6b7280;
cursor:pointer; padding:0;
}
.nm-cal-day-modal-close:hover{ background:#f3f4f6; color:#1f2933; }
.nm-cal-day-modal-close i{ font-size:13px; }
.nm-cal-day-modal-list{
flex:1 1 auto;
overflow-y:auto;
padding:6px 8px;
}
.nm-cal-modal-empty{
display:flex;
align-items:center;
justify-content:center;
height:100%;
color:#9aa3af;
font-size:calc(var(--memo-size, 11px) - 0.5px);
font-family:var(--memo-family, inherit) !important;
}
.nm-cal-modal-row{
display:flex;
align-items:center;
gap:8px;
padding:9px 8px;
border-radius:8px;
font-size:var(--memo-size, 11px);
font-family:var(--memo-family, inherit) !important;
color:#1f2933;
cursor:pointer;
}
.nm-cal-modal-row:hover{ background:#fafafa; }
.nm-cal-modal-row.is-editing{ background:rgba(249,115,22,.08); }
.nm-cal-modal-row-text{
flex:1 1 auto;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.nm-cal-modal-row-period{
flex:0 0 auto;
font-size:calc(var(--memo-size, 11px) - 1px);
color:#F97316;
font-weight:700;
}
.nm-cal-modal-row-del{
flex:0 0 auto;
width:20px; height:20px;
display:flex; align-items:center; justify-content:center;
border:0; border-radius:50%;
background:transparent; color:#9aa3af;
cursor:pointer; padding:0;
}
.nm-cal-modal-row-del:hover{ background:#f3f4f6; color:#1f2933; }
.nm-cal-modal-row-del i{ font-size:10px; }
.nm-cal-modal-row-memo{ color:#6b7280; cursor:default; }
.nm-cal-modal-row-memo.is-done{ color:#c7ccd3; text-decoration:line-through; }
.nm-cal-modal-row-memo.is-done .nm-cal-item-dot{ background:#c7ccd3; }
.nm-cal-day-modal-footer{
flex:0 0 auto;
border-top:1px solid #eef0f3;
padding:10px 12px;
display:flex;
flex-direction:column;
gap:8px;
}
.nm-cal-day-modal-period{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 8px;
}
.nm-cal-day-modal-period-label{
flex:0 0 auto;
font-size:calc(var(--memo-size, 11px) - 1px);
font-weight:700;
color:#9aa3af;
font-family:var(--memo-family, inherit) !important;
}
.nm-cal-day-modal-period-wrap{
position:relative;
flex:1 1 160px;
min-width:0;
}
.nm-cal-day-modal-period-input{
width:100%;
box-sizing:border-box;
border:1px solid #e5e7eb;
border-radius:7px;
padding:5px 8px;
font-size:var(--memo-size, 11px);
font-family:var(--memo-family, inherit) !important;
color:#1f2933;
outline:none;
}
.nm-cal-day-modal-period-input:focus{ border-color:#F97316; }
.nm-cal-period-popup{
z-index:70;
}
.nm-cal-period-hint{
margin-top:6px;
text-align:center;
font-size:9px;
color:#9aa3af;
font-family:var(--memo-family, inherit) !important;
}
.nm-cal-day-modal-period-clear{
flex:0 0 auto;
width:20px; height:20px;
display:flex; align-items:center; justify-content:center;
border:0; border-radius:50%;
background:rgba(148,163,184,.2); color:#6b7280;
cursor:pointer; padding:0;
}
.nm-cal-day-modal-period-clear i{ font-size:9px; }
/* V303-W3.91.202: 기간 우측 색상 태그(빨/주/노/초/파) — 얇은 구분선으로 기간칸과 분리해서 깔끔하게.
V303-W3.91.206: 좁은 화면에서 잘려서 안 보이던 문제 — 행이 wrap 되면서 자연스럽게 아래 줄로 내려가도록 수정. */
.nm-cal-color-strip{
display:flex;
align-items:center;
gap:6px;
flex:0 0 auto;
padding:4px 6px;
border-left:1px solid #eef0f3;
border-radius:2px;
}
.nm-cal-color-chip{
width:14px;
height:14px;
border-radius:50%;
border:0;
padding:0;
cursor:pointer;
background:var(--chip-color);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.nm-cal-color-chip.on{
box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--chip-color);
}
.nm-cal-color-strip.kbd-focus{
outline:2px solid #F97316;
outline-offset:3px;
border-radius:8px;
}
@media (max-width:420px){
.nm-cal-day-modal-period-label{ flex-basis:100%; }
.nm-cal-color-strip{
flex-basis:100%;
border-left:0;
border-top:1px solid #eef0f3;
padding-top:6px;
justify-content:flex-end;
}
}
.nm-cal-modal-row-color{
flex:0 0 auto;
width:8px; height:8px;
border-radius:50%;
}
.nm-cal-day-modal-input-row{
display:flex;
align-items:center;
gap:8px;
}
.nm-cal-day-modal-input{
flex:1 1 auto;
min-width:0;
border:1px solid #e5e7eb;
border-radius:9px;
padding:9px 12px;
font-size:var(--memo-size, 11px);
font-family:var(--memo-family, inherit) !important;
color:#1f2933;
outline:none;
}
.nm-cal-day-modal-input:focus{ border-color:#F97316; }
.nm-cal-day-modal-submit{
flex:0 0 auto;
width:36px; height:36px;
display:flex; align-items:center; justify-content:center;
border:0; border-radius:9px;
background:#F97316; color:#fff;
cursor:pointer; padding:0;
}
.nm-cal-day-modal-submit:hover{ background:#EA580C; }
.nm-cal-day-modal-submit i{ font-size:15px; }
.nm-cal-day-modal-submit.is-editing{ background:#1f2933; }
.nm-cal-day-modal-submit.is-editing:hover{ background:#374151; }
.nm-cal-day-modal-cancel-edit{
flex:0 0 auto;
width:36px; height:36px;
display:flex; align-items:center; justify-content:center;
border:1px solid #e5e7eb; border-radius:9px;
background:#fff; color:#6b7280;
cursor:pointer; padding:0;
}
.nm-cal-day-modal-cancel-edit:hover{ background:#f3f4f6; }
.nm-cal-day-modal-cancel-edit i{ font-size:14px; }
/* 여러 날에 걸친 일정임을 셀 안에서도 살짝 표시 */
/* V303-W3.91.203: 색상 태그 — 왼쪽 얇은 줄 대신 형광펜처럼 배경 전체를 칠한다.
기간이 여러 날이면 그 날짜들의 칸이 서로 이어져 보이도록, 시작/중간/끝에 따라
모서리를 다르게 둥글리고(주가 바뀌는 경계에서만 다시 끊김) 칸 패딩(2px) 밖으로 살짝 밀어서 붙인다. */
.nm-cal-item-fill{
color:#1f2933 !important;
font-weight:700;
/* V303-W3.91.208: 글자가 없는 "중간" 칸은 부모(.nm-cal-item)의 min-height:0 때문에
실제 높이가 0으로 찌그러져서 색 띠가 안 보이던 버그가 있었다(기간 중 시작/주경계 칸만
보이던 원인). 최소 높이를 줘서 글자 유무와 상관없이 항상 한 줄 높이만큼 보이게 한다. */
min-height:1.3em;
}
.nm-cal-item-fill.is-solo{
margin:0;
border-radius:4px;
}
.nm-cal-item-fill.is-start{
margin-left:0;
margin-right:-2px;
padding-right:4px;
border-radius:4px 0 0 4px;
}
.nm-cal-item-fill.is-end{
margin-left:-2px;
margin-right:0;
padding-left:4px;
border-radius:0 4px 4px 0;
}
.nm-cal-item-fill.is-mid{
margin-left:-2px;
margin-right:-2px;
padding-left:4px;
padding-right:4px;
border-radius:0;
}
/* V303-W3.91.218: 입력창 배경(.winp)과 중요도/마감일 바(.web-draft-tags, .mob-draft-tags, .draft-duebox)를
지금 지정된 보드 색상으로 아주 연하게 물들여서 고급스럽고 정돈된 느낌으로. 여러 곳에 흩어진 기존
규칙들(일부는 배경을 흰색으로 강제)을 확실히 이기도록 !important로 맨 마지막에 지정한다. */
/* V303-W3.91.219: 입력창/버튼/마감일칩/중요도칩 자체 색은 그대로 두고, 그 바깥을 감싸는
배경(.winp, .web-draft-tags/.mob-draft-tags)만 보드 색상으로 아주 연하게 물들인다. */
.winp,
.win[style*="--board-color"] .winp,
body:not(.mobile-mode) .win[style*="--board-color"] .winp{
background: color-mix(in srgb, var(--board-color, #F97316) 6%, #ffffff) !important;
}
.web-draft-tags,
.mob-draft-tags{
background: color-mix(in srgb, var(--board-color, #F97316) 5%, #ffffff) !important;
}
/* V303-W3.91.222: 명시도를 기존 경쟁 규칙과 동일하게 맞춤.
V303-W3.91.226: 여백 오버라이드는 되돌린다 — 배경색만 바꾸고 여백은 건드리지 않는다. */
.mobbrd[style*="--board-color"] .mob-input-area{
background: color-mix(in srgb, var(--board-color, #F97316) 6%, #ffffff) !important;
}
/* ═══════════════════════════════════════════════════════════════
V303-W3.91.230 — 중요도/마감일 한 줄 재정리 (대기업스럽게 심플하게)
"일반" 알약+색상 막대 방식을 없애고, 4개 모두 균일한 원형 점으로 통일.
선택된 점만 확실한 주황 링으로 표시. 마감일도 값이 있을 때만 주황+굵게.
기존에 쌓인 여러 겹의 .mob-draft-tag 규칙을 다 뒤집기보다, 여기서 명시도를 맞춰 확실히 덮어쓴다.
═══════════════════════════════════════════════════════════════ */
.draft-row-label-v230{
flex:0 0 auto;
font-size:9.5px;
font-weight:700;
color:var(--txt3);
white-space:nowrap;
}
.web-draft-tags .mob-draft-tag,
.mob-draft-tags .mob-draft-tag{
width:16px !important;
height:16px !important;
min-width:16px !important;
min-height:16px !important;
flex:0 0 16px !important;
border-radius:50% !important;
background:var(--tag) !important;
border:0 !important;
padding:0 !important;
}
.web-draft-tags .mob-draft-tag.on,
.mob-draft-tags .mob-draft-tag.on{
box-shadow:0 0 0 2px color-mix(in srgb, var(--board-color, #fff) 5%, #fff), 0 0 0 3.5px #F97316 !important;
}
.web-draft-tags .nm-normal-tag-text-v303w8,
.mob-draft-tags .nm-normal-tag-text-v303w8{
display:none !important;
}
.draft-tagbar-left.kbd-focus .mob-draft-tag.on{
outline:0 !important;
}
.draft-duebox{
background:transparent !important;
border:0 !important;
padding:0 !important;
gap:6px !important;
}
.draft-duebox.kbd-focus{
border:0 !important;
box-shadow:none !important;
outline:2px solid #F97316 !important;
outline-offset:3px !important;
border-radius:6px !important;
}
.draft-duebox .draft-due-input{
color:var(--txt3) !important;
font-weight:600 !important;
}
.draft-duebox.has-due .draft-due-input{
color:var(--txt3) !important;
font-weight:800 !important;
}
/* V303-W3.91.231: 중요도 점 사이 간격 확보, +/전송 버튼 크기를 통일해서 좌우 대칭으로,
마감일 텍스트 가운데 정렬. (이전 230번 수정 이후 남은 다듬기) */
.draft-tagbar-left{
gap:5px !important;
}
.draft-row-label-v230{
margin-right:1px;
}
.mob-plus-btn{
width:28px !important;
height:28px !important;
}
.send-btn,
.mob-send-btn{
width:28px !important;
height:28px !important;
}
.draft-due-input{
text-align:center !important;
}
/* V303-W3.91.232: 마감일 텍스트만 따로 가운데 정렬했더니 "마감일" 라벨은 그대로 왼쪽에 남아서
같이 안 움직이는 것처럼 보였다. 라벨+값+지우기 버튼을 한 덩어리로 보고, 그 덩어리 전체가
가운데로 오도록 폭을 확보하고 그룹 자체를 가운데 정렬한다.
중요도 점 사이 간격도 더 넓혀서(8px) 선택하기 편하게 한다. */
.draft-tagbar-left{
gap:8px !important;
}
.draft-duebox{
min-width:150px;
justify-content:center !important;
}
.draft-due-input{
width:auto !important;
flex:0 1 auto !important;
}
@media (max-width:420px){
.draft-duebox{ min-width:120px; }
}
/* V303-W3.91.240: 239번의 negative margin 임시방편 대신, 입력창이 자연스럽게 가운데를 차지하고
"+" 버튼은 필요한 만큼만 줄여서 남은 자리에 들어가도록 재구성. 전송 버튼을 새로 추가해서
[+ 버튼][입력창][전송 버튼] 3분할 구조로 좌우 균형을 맞춘다. */
.web-plus-btn-v160{
width:28px !important;
min-width:28px !important;
height:28px !important;
}
.web-send-btn-v160{
flex:0 0 auto;
width:28px;
height:28px;
min-width:28px;
border-radius:50%;
border:0;
background:transparent;
color:var(--nm-w39019-frame, var(--board-color, #F97316));
display:flex;
align-items:center;
justify-content:center;
align-self:center;
cursor:pointer;
padding:0;
}
.web-send-btn-v160:hover{ background:color-mix(in srgb, var(--board-color, #F97316) 12%, transparent); }
.web-send-btn-v160 i{ font-size:16px; position:relative; left:-5px; }
.memo-input{
margin-left:0 !important;
}
/* V303-W3.91.241 메모장 컬러 테두리(프레임) 제거
목적: 상태바(제목/메뉴) 색상은 그대로 두고, 그 아래 메모장을 감싸던
컬러 프레임(바깥 배경색 + 여백)만 제거해서 흰색 메모 영역을 카드 끝까지 넓게 쓴다.
저장/삭제/업로드/동기화/Auth/Billing/Storage 로직 미수정, CSS only. */
.win[style*="--board-color"],
body:not(.mobile-mode) .win[style*="--board-color"]{
background:#ffffff !important;
border:1px solid #e5e7eb !important;
}
.win[style*="--board-color"] .wb,
body:not(.mobile-mode) .win[style*="--board-color"] .wb{
margin:0 !important;
padding:0 0 0 8px !important;
background:#ffffff !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}
.win[style*="--board-color"] .winp,
body:not(.mobile-mode) .win[style*="--board-color"] .winp{
margin:0 !important;
padding:0 0 10px 8px !important;
background:#ffffff !important;
border:0 !important;
border-top:1px solid #eef0f3 !important;
border-radius:0 !important;
box-shadow:none !important;
}
@media (max-width:700px){
.mobbrd[style*="--board-color"]{
background:#ffffff !important;
border:1px solid #e5e7eb !important;
}
.mobbrd[style*="--board-color"] .mobbdy{
margin:0 !important;
padding:0 0 10px 0 !important;
background:#ffffff !important;
border:0 !important;
border-radius:0 !important;
}
.mobbrd[style*="--board-color"] .mob-input-area{
margin:0 !important;
padding:8px 0 0 0 !important;
background:#ffffff !important;
border:0 !important;
border-top:1px solid #eef0f3 !important;
border-bottom-left-radius:11px !important;
border-bottom-right-radius:11px !important;
box-shadow:none !important;
}
}
/* V303-W3.91.242 모바일 메모장 헤더 — 오늘마감 흰색 깜빡이(wdot) 추가
.mob-unified-hdr는 4칸 고정 grid(nav/이름/버튼/nav)라 새 flow 아이템을 넣으면
컬럼이 밀리므로, 흰 점은 absolute로 빼서 grid 배치에 영향 안 주게 처리.
저장/삭제/업로드/동기화 로직 미수정, 표시 여부는 기존 isUrg() 그대로 사용. */
.mob-unified-hdr{ position:relative !important; }
.mob-unified-hdr .wdot{
position:absolute !important;
top:4px !important;
left:38px !important;
margin:0 !important;
z-index:20 !important;
}
/* V303-W3.91.246 메모장 헤더(상태바) 배경 순정색 복원
filter만 검색해서 놓쳤던 부분: 헤더 배경이 color-mix()로
위쪽 94%+흰6%, 아래쪽 82%+검정18% 그라데이션으로 섞여있었음.
이제 원본 hex를 그대로, 그라데이션 없이 단색으로 표시. */
body:not(.mobile-mode) .win[style*="--board-color"] .wh,
.wh[style*="--board-color"],
.mob-unified-hdr[style*="--board-color"],
.mobbrd[style*="--board-color"] .mob-unified-hdr{
background:var(--board-color) !important;
}
/* V303-W3.91.243 색상 테마 원본 복원 요청
그동안(v3.90.40~46, v3.91.77 등) 여러 패치를 거치며 메모장 칩/스와치 점에
filter:saturate()/brightness() 가 겹겹이 쌓여 실제 팔레트 원색보다 탁하게/과하게
보정된 상태였다. 팔레트 hex 값(js/app.js COLOR_THEME_PALETTES) 자체는 이미 선명한
색으로 복원돼 있었지만, 화면에 실제로 그려질 때 이 필터들이 덧씌워지고 있었음.
여기서는 그 필터를 전부 제거해서 팔레트 hex 값이 가공 없이 그대로 보이게 한다.
(숨김 보드 상태(.chip-hidden), 비활성 버튼, 광고 예약 썸네일 등 "상태 표시용" 흐림
효과는 색상 디자인과 무관한 기능이라 그대로 둠) */
.chip,
.chip.fr,
.chip:hover,
#tb .chip-visible,
#tb .web-active-board-chip-v303w1:hover,
#tb .mob-active-board-chip-v274:hover,
.web-board-dropdown-dot-v274,
.mob-board-dropdown-dot-v274,
.bc-dot-v235{
filter:none !important;
}
/* W3.91.250: 캘린더가 열려있을 때는 메모 입력창용 하단 여백(광고판 위 공간 확보용)이
필요 없으므로 없애고, 캘린더 바깥 테두리도 흰색으로 바꿔서 테스트해본다. */
.mobv:has(.nm-cal-mob-board){
margin-bottom: 0 !important;
}
.nm-cal-mob-board{
border-color:#fff !important;
}
.nm-cal-mob-board[style*="--board-color"]{
border-color:#fff !important;
}
/* W3.443 - 추가메모(댓글) 수정 모드 완료(✓) 버튼 복구
- W3.90.58에서 "수정 버튼 제거"로 .thread-edit-ok를 display:none 처리하고
editThread()도 버튼을 안 만들게 되어 있었는데, "새 추가메모 입력" 행에는 여전히
보내기 버튼이 남아 있어서 "기존 추가메모를 다시 고칠 때만 완료 버튼이 없다"는
혼란을 줬다(버튼이 사라진 게 아니라 애초에 렌더링되지 않고 있었음).
- editThread()가 다시 만들어주는 .thread-edit-ok 버튼을 여기서 다시 보이게 하고,
입력칸(.thread-edit-inp)이 남는 폭을 쓰고 버튼은 줄어들지 않도록 flex 레이아웃을 정리한다.
- 이 블록이 파일 맨 끝에 있는 이유: 위쪽에 동일 selector(.thread-edit-ok 등)의
display:none/width 규칙들이 여러 번 있고, CSS는 동일 우선순위면 "더 뒤에 있는" 규칙이
이기기 때문 (인수인계서 5-3 참고). 다음에 이 근처를 또 고칠 일이 있으면 반드시 이 블록보다
"더 아래"에 새 규칙을 추가할 것. */
.thread-edit-wrap{
display:flex !important;
align-items:center !important;
gap:4px !important;
}
.thread-edit-inp{
flex:1 1 auto !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
}
.thread-edit-ok{
display:inline-flex !important;
flex:0 0 auto !important;
align-items:center !important;
justify-content:center !important;
width:24px !important;
height:24px !important;
min-width:24px !important;
background:#F97316 !important;
color:#fff !important;
border:0 !important;
border-radius:6px !important;
padding:0 !important;
cursor:pointer !important;
opacity:1 !important;
pointer-events:auto !important;
touch-action:manipulation !important;
-webkit-tap-highlight-color:transparent !important;
position:relative !important;
z-index:5 !important;
}
.thread-edit-ok i,
.thread-edit-ok svg{ display:block !important; }
@media (max-width:600px){
.thread-edit-ok{ width:28px !important; height:28px !important; min-width:28px !important; }
.thread-edit-ok svg{ width:16px !important; height:16px !important; }
}
/* W3.443-2 - 위 .thread-body.is-thread-editing .thread-acts 규칙이
", .thread-body:has(.thread-edit-wrap) .thread-acts"와 콤마로 묶여 있었는데,
Android WebView는 :has()를 모르는 셀렉터로 취급해서 콤마로 묶인 규칙 전체(앞의
.is-thread-editing 부분까지)를 통째로 무효 처리해버린다(인수인계서 5-5 항목과 동일한 함정).
그 결과 앱/태블릿에서는 수정 모드에 들어가도 삭제 버튼(.thread-acts)이 안 숨겨져서
방금 만든 완료 버튼 자리에 삭제 버튼이 겹쳐 보이고, 눌러도 삭제 확인창이 떴다.
:has() 없이 .is-thread-editing 단독 셀렉터로 다시 한번 명시해서 확실히 숨긴다. */
.thread-body.is-thread-editing .thread-acts{
display:none !important;
}
.thread-body.is-thread-editing{
display:block !important;
}
/* W3.443-4 - 추가메모 수정칸을 (한 줄 고정) 대신