/* ═══════════════════════════════════════════════ 우리 가족 홈페이지 — 디자인 시스템 테마는 로 전환됩니다. ═══════════════════════════════════════════════ */ /* ── 1. 테마 토큰 ─────────────────────────────── */ :root{ --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px; --f-sans:'Pretendard Variable',Pretendard,'Noto Sans KR','Malgun Gothic',-apple-system,system-ui,sans-serif; --f-serif:'Nanum Myeongjo','Gowun Batang','Batang',Georgia,serif; --f-round:'Gowun Dodum','Pretendard Variable',sans-serif; --sp:clamp(16px,3vw,34px); --ease:cubic-bezier(.22,.9,.28,1); --blur:22px; } html[data-radius="sharp"]{ --r-xs:3px;--r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:10px;--r-pill:6px; } html[data-radius="round"]{ --r-xs:14px;--r-sm:20px;--r-md:28px;--r-lg:38px;--r-xl:46px; } html[data-font="sans"]{ --f-body:var(--f-sans); } html[data-font="serif"]{ --f-body:var(--f-serif); } html[data-font="round"]{ --f-body:var(--f-round); } /* 포근한 오후 */ /* ───────────────────────────────────────────── 여섯 가지 화면. 사진첩이라 화면은 뒤로 물러나고 사진이 앞에 나서도록, 바탕을 차분하게 잡았습니다. ───────────────────────────────────────────── */ /* 정갈한 흰빛 — 전시장 벽처럼 */ html[data-theme="studio"]{ --bg:#fbfbfa; --panel:rgba(255,255,255,.86); --panel-solid:#ffffff; --panel-2:rgba(23,23,26,.035); --line:rgba(23,23,26,.10); --txt:#17171a; --txt-2:#6e6e73; --accent:#1c1c1e; --accent-2:#8a8a8f; --accent-soft:rgba(28,28,30,.06); --on-accent:#ffffff; --shadow:0 1px 2px rgba(23,23,26,.04), 0 12px 32px -20px rgba(23,23,26,.28); --m1:#f1f0ed; --m2:#eae9e5; --m3:#f5f4f1; --m4:#eeedea; --mesh-op:.45; } /* 차분한 먹빛 — 어두운 전시실 */ html[data-theme="ink"]{ --bg:#0e0e10; --panel:rgba(28,28,32,.74); --panel-solid:#17171b; --panel-2:rgba(255,255,255,.055); --line:rgba(255,255,255,.09); --txt:#f0f0f2; --txt-2:#9a9aa2; --accent:#f0f0f2; --accent-2:#9a9aa2; --accent-soft:rgba(255,255,255,.08); --on-accent:#0e0e10; --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -24px rgba(0,0,0,.9); --m1:#1b1b2a; --m2:#231f2c; --m3:#161f28; --m4:#1e1e23; --mesh-op:.5; } /* 모래와 리넨 — 손에 닿는 종이 결 */ html[data-theme="linen"]{ --bg:#f5f2ec; --panel:rgba(252,250,246,.84); --panel-solid:#fcfaf6; --panel-2:rgba(90,78,62,.045); --line:rgba(90,78,62,.14); --txt:#2b2621; --txt-2:#7d7266; --accent:#8a6a4a; --accent-2:#b09a7e; --accent-soft:rgba(138,106,74,.09); --on-accent:#ffffff; --shadow:0 1px 2px rgba(70,58,44,.05), 0 12px 32px -20px rgba(70,58,44,.3); --m1:#ece3d4; --m2:#e5dcc9; --m3:#f0e9dc; --m4:#e8e2d5; --mesh-op:.6; } /* 깊은 밤 — 잠든 집의 창밖 */ html[data-theme="midnight"]{ --bg:#0b1020; --panel:rgba(20,28,48,.70); --panel-solid:#131a2e; --panel-2:rgba(255,255,255,.05); --line:rgba(255,255,255,.10); --txt:#e8ecf5; --txt-2:#8b98b5; --accent:#7ea6ff; --accent-2:#a78bfa; --accent-soft:rgba(126,166,255,.13); --on-accent:#0b1020; --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -24px rgba(0,0,0,.85); --m1:#16264d; --m2:#1d2a5c; --m3:#10203f; --m4:#232a52; --mesh-op:.6; } /* 숲 그늘 — 나뭇잎 사이로 */ html[data-theme="sage"]{ --bg:#f2f4f1; --panel:rgba(253,254,252,.86); --panel-solid:#fdfefc; --panel-2:rgba(60,80,60,.04); --line:rgba(60,80,60,.13); --txt:#232a24; --txt-2:#6f7b6e; --accent:#4a6b52; --accent-2:#8fa88b; --accent-soft:rgba(74,107,82,.09); --on-accent:#ffffff; --shadow:0 1px 2px rgba(40,60,40,.05), 0 12px 32px -20px rgba(40,60,40,.28); --m1:#dce6d6; --m2:#e8eee2; --m3:#d2e0d8; --m4:#eaefe4; --mesh-op:.55; } /* 오후의 온기 — 창가에 든 볕 */ html[data-theme="amber"]{ --bg:#f7f3ed; --panel:rgba(255,253,249,.84); --panel-solid:#fffdf9; --panel-2:rgba(120,95,70,.045); --line:rgba(120,95,70,.13); --txt:#33291f; --txt-2:#857463; --accent:#b06a3e; --accent-2:#d9a06b; --accent-soft:rgba(176,106,62,.09); --on-accent:#ffffff; --shadow:0 1px 2px rgba(90,65,40,.05), 0 12px 32px -20px rgba(90,65,40,.3); --m1:#f6dcbe; --m2:#f0c9a8; --m3:#ebdcc6; --m4:#fae8d2; --mesh-op:.55; } /* 예전 이름으로 저장해 둔 분들을 위해 (같은 화면으로 이어줍니다) */ html[data-theme="warm"]{ --bg:#f7f3ed; --panel:rgba(255,253,249,.84); --panel-solid:#fffdf9; --panel-2:rgba(120,95,70,.045); --line:rgba(120,95,70,.13); --txt:#33291f; --txt-2:#857463; --accent:#b06a3e; --accent-2:#d9a06b; --accent-soft:rgba(176,106,62,.09); --on-accent:#fff; --shadow:0 1px 2px rgba(90,65,40,.05), 0 12px 32px -20px rgba(90,65,40,.3); --m1:#f6dcbe; --m2:#f0c9a8; --m3:#ebdcc6; --m4:#fae8d2; --mesh-op:.55; } html[data-theme="moon"],html[data-theme="sunset"]{ --bg:#0b1020; --panel:rgba(20,28,48,.70); --panel-solid:#131a2e; --panel-2:rgba(255,255,255,.05); --line:rgba(255,255,255,.10); --txt:#e8ecf5; --txt-2:#8b98b5; --accent:#7ea6ff; --accent-2:#a78bfa; --accent-soft:rgba(126,166,255,.13); --on-accent:#0b1020; --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -24px rgba(0,0,0,.85); --m1:#16264d; --m2:#1d2a5c; --m3:#10203f; --m4:#232a52; --mesh-op:.6; } html[data-theme="forest"],html[data-theme="blossom"]{ --bg:#f2f4f1; --panel:rgba(253,254,252,.86); --panel-solid:#fdfefc; --panel-2:rgba(60,80,60,.04); --line:rgba(60,80,60,.13); --txt:#232a24; --txt-2:#6f7b6e; --accent:#4a6b52; --accent-2:#8fa88b; --accent-soft:rgba(74,107,82,.09); --on-accent:#fff; --shadow:0 1px 2px rgba(40,60,40,.05), 0 12px 32px -20px rgba(40,60,40,.28); --m1:#dce6d6; --m2:#e8eee2; --m3:#d2e0d8; --m4:#eaefe4; --mesh-op:.55; } html[data-theme="mono"]{ --bg:#fbfbfa; --panel:rgba(255,255,255,.86); --panel-solid:#fff; --panel-2:rgba(23,23,26,.035); --line:rgba(23,23,26,.10); --txt:#17171a; --txt-2:#6e6e73; --accent:#1c1c1e; --accent-2:#8a8a8f; --accent-soft:rgba(28,28,30,.06); --on-accent:#fff; --shadow:0 1px 2px rgba(23,23,26,.04), 0 12px 32px -20px rgba(23,23,26,.28); --m1:#f1f0ed; --m2:#eae9e5; --m3:#f5f4f1; --m4:#eeedea; --mesh-op:.45; } /* ── 2. 리셋 & 기본 ───────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--txt); font-family:var(--f-body,var(--f-sans)); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;border:none;background:none} img,video{max-width:100%;display:block} h1,h2,h3,h4,p{margin:0} .hidden{display:none !important} ::selection{background:var(--accent-soft)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box} /* ── 3. 배경 메쉬 ─────────────────────────────── */ .mesh{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:var(--mesh-op)} .blob{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform} .b1{width:48vw;height:48vw;background:var(--m1);top:-14vw;left:-10vw;animation:drift1 26s var(--ease) infinite alternate} .b2{width:42vw;height:42vw;background:var(--m2);bottom:-16vw;right:-8vw;animation:drift2 32s var(--ease) infinite alternate} .b3{width:34vw;height:34vw;background:var(--m3);top:32vh;right:14vw;animation:drift3 24s var(--ease) infinite alternate} .b4{width:30vw;height:30vw;background:var(--m4);bottom:12vh;left:16vw;animation:drift1 29s var(--ease) infinite alternate-reverse} @keyframes drift1{to{transform:translate3d(7vw,5vh,0) scale(1.15)}} @keyframes drift2{to{transform:translate3d(-6vw,-6vh,0) scale(1.1)}} @keyframes drift3{to{transform:translate3d(-8vw,7vh,0) scale(.9)}} .grain{position:absolute;inset:-50%;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")} @media (prefers-reduced-motion:reduce){.blob{animation:none}} /* ── 4. 잠금 화면 ─────────────────────────────── */ .lock{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center} .lock-card{ width:min(420px,100%);padding:44px 34px 34px;border-radius:var(--r-xl); background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow); backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4); animation:rise .7s var(--ease) both; } @keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}} .lock-emblem{font-size:56px;line-height:1;margin-bottom:14px;animation:breathe 5s ease-in-out infinite} @keyframes breathe{50%{transform:scale(1.07) rotate(-2deg)}} .lock-title{font-size:30px;font-weight:800;letter-spacing:-.02em} .lock-sub{margin-top:8px;color:var(--txt-2);font-size:14.5px} .lock-form{margin-top:26px;display:flex;flex-direction:column;gap:11px} .lock-msg{min-height:20px;font-size:13.5px;color:var(--accent);font-weight:600} .lock-msg.err{color:#e05252} .lock-foot{position:relative;z-index:2;color:var(--txt-2);font-size:13px;opacity:.85} .field{position:relative;display:flex} .field input{ flex:1;padding:15px 17px;border-radius:var(--r-md);border:1px solid var(--line); background:var(--panel-2);color:var(--txt);outline:none;transition:.2s var(--ease);font-size:15px; } .field input::placeholder{color:var(--txt-2);opacity:.75} .field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background:var(--panel-solid)} .peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:8px 10px;opacity:.5;font-size:15px;border-radius:var(--r-sm)} .peek:hover{opacity:1} .linkish{color:var(--txt-2);font-size:13px;text-decoration:underline;text-underline-offset:3px} /* ── 5. 버튼 ──────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:11px 18px;border-radius:var(--r-pill);border:1px solid var(--line); background:var(--panel-2);font-weight:600;font-size:14.5px; transition:transform .18s var(--ease),background .18s,box-shadow .18s,border-color .18s; } .btn:hover{transform:translateY(-2px);background:var(--panel-solid);box-shadow:var(--shadow)} .btn:active{transform:translateY(0) scale(.98)} .btn-primary{background:var(--accent);color:var(--on-accent);border-color:transparent} .btn-primary:hover{background:var(--accent);filter:brightness(1.06)} .btn-lg{padding:15px 22px;font-size:15.5px;border-radius:var(--r-md)} .btn-ghost{background:transparent} .btn-danger{color:#e05252;border-color:rgba(224,82,82,.3)} .btn-danger:hover{background:rgba(224,82,82,.1)} .btn-sm{padding:7px 13px;font-size:13px} .btn-block{width:100%} .icon-btn{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center; border:1px solid var(--line);background:var(--panel-2);font-size:16px;transition:.2s var(--ease)} .icon-btn:hover{background:var(--panel-solid);transform:translateY(-1px)} /* ── 6. 앱 레이아웃 ───────────────────────────── */ .app{position:relative;z-index:2;min-height:100dvh;display:grid;grid-template-columns:264px 1fr} .sidebar{ position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:18px; padding:26px 18px;border-right:1px solid var(--line); background:var(--panel);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)); } .brand{display:flex;align-items:center;gap:12px;padding:4px 8px} .brand-emblem{font-size:30px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.15))} .brand-emblem.sm{font-size:22px} .brand-text{display:flex;flex-direction:column;min-width:0} .brand-text strong{font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand-text small{color:var(--txt-2);font-size:12px} .nav{display:flex;flex-direction:column;gap:4px;flex:1} .nav-item{ display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md); font-size:15px;font-weight:600;color:var(--txt-2);text-align:left;transition:.2s var(--ease);position:relative; } .nav-item .ni{font-size:17px;width:22px;text-align:center} .nav-item:hover{background:var(--panel-2);color:var(--txt)} .nav-item.on{background:var(--accent-soft);color:var(--accent)} .nav-item.on::before{content:"";position:absolute;left:-18px;top:50%;transform:translateY(-50%); width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--accent)} .main{min-width:0;display:flex;flex-direction:column} .topbar{ position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px var(--sp);border-bottom:1px solid var(--line); background:var(--panel);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)); } .topbar-left{display:flex;align-items:center;gap:10px;min-width:0} .topbar-left .brand-emblem{display:none} .topbar h2{font-size:19px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar-right{display:flex;gap:8px} .view{flex:1;padding:var(--sp);max-width:1180px;width:100%;margin:0 auto;animation:fade .45s var(--ease)} @keyframes fade{from{opacity:0;transform:translateY(10px)}} .foot{padding:26px var(--sp) 40px;text-align:center;color:var(--txt-2);font-size:12.5px;opacity:.8} /* ── 7. 미니 플레이어 ─────────────────────────── */ .player{border:1px solid var(--line);border-radius:var(--r-lg);padding:13px;background:var(--panel-2)} .player-top{display:flex;align-items:center;gap:10px} .player-meta{flex:1;min-width:0;display:flex;flex-direction:column} .player-meta strong{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .player-meta small{font-size:11px;color:var(--txt-2)} .play-btn{width:36px;height:36px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent); display:grid;place-items:center;font-size:13px;transition:.2s var(--ease)} .play-btn:hover{transform:scale(1.08)} .viz{display:flex;align-items:flex-end;gap:2.5px;height:22px;width:24px} .viz i{flex:1;background:var(--accent);border-radius:2px;height:20%;opacity:.45;transition:.3s} .viz.on i{animation:bounce 1.1s ease-in-out infinite;opacity:.9} .viz.on i:nth-child(2){animation-delay:.16s} .viz.on i:nth-child(3){animation-delay:.32s} .viz.on i:nth-child(4){animation-delay:.48s} .viz.on i:nth-child(5){animation-delay:.64s} @keyframes bounce{0%,100%{height:22%}50%{height:100%}} .vol{width:100%;margin-top:11px;accent-color:var(--accent);height:4px} /* ── 8. 카드/섹션 공통 ────────────────────────── */ .card{ background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px; backdrop-filter:blur(var(--blur)) saturate(1.25);-webkit-backdrop-filter:blur(var(--blur)); box-shadow:var(--shadow); } .sec{margin-bottom:34px} .sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap} .sec-title{font-size:17px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px} .sec-title small{font-weight:500;color:var(--txt-2);font-size:12.5px} .muted{color:var(--txt-2)} .empty{padding:56px 24px;text-align:center;border:1.5px dashed var(--line);border-radius:var(--r-lg);color:var(--txt-2)} .empty .ee{font-size:44px;display:block;margin-bottom:12px;opacity:.7} .empty p{font-size:14px;margin-bottom:16px} /* ── 9. 홈 ────────────────────────────────────── */ .hero{ position:relative;overflow:hidden;padding:clamp(28px,5vw,46px);border-radius:var(--r-xl); background:linear-gradient(135deg,var(--accent-soft),transparent 60%),var(--panel); border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:26px; backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); } .hero h1{font-size:clamp(25px,4.4vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.25} .hero p{margin-top:10px;color:var(--txt-2);font-size:15px;line-height:1.7} .hero-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:30px} .stat{padding:18px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line); backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));transition:.25s var(--ease)} .stat:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .stat .k{font-size:12.5px;color:var(--txt-2);display:flex;align-items:center;gap:6px} .stat .v{font-size:27px;font-weight:800;letter-spacing:-.03em;margin-top:6px} .stat .v span{font-size:14px;font-weight:600;color:var(--txt-2);margin-left:3px} /* ── 10. 가족 소개 ────────────────────────────── */ .members{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} .member{ position:relative;padding:24px 20px;border-radius:var(--r-lg);text-align:center; background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow); backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); transition:.28s var(--ease);overflow:hidden; } .member::after{content:"";position:absolute;inset:0 0 auto;height:70px; background:linear-gradient(180deg,var(--mc,var(--accent-soft)),transparent);opacity:.5;pointer-events:none} .member:hover{transform:translateY(-5px)} .avatar{ position:relative;z-index:1;width:88px;height:88px;margin:0 auto 13px;border-radius:var(--r-pill); display:grid;place-items:center;font-size:40px;overflow:hidden; background:var(--panel-solid);border:2.5px solid var(--panel-solid);box-shadow:var(--shadow); } .avatar img{width:100%;height:100%;object-fit:cover} .member h3{position:relative;z-index:1;font-size:17.5px;font-weight:800;letter-spacing:-.02em} .member .rel{margin-top:4px;font-size:12.5px;color:var(--accent);font-weight:700} .member .bio{margin-top:11px;font-size:13.5px;color:var(--txt-2);line-height:1.65;white-space:pre-wrap} .member .meta{margin-top:13px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap} .chip{padding:5px 11px;border-radius:var(--r-pill);background:var(--panel-2);border:1px solid var(--line); font-size:11.5px;font-weight:600;color:var(--txt-2)} .chip.accent{background:var(--accent-soft);color:var(--accent);border-color:transparent} .member-tools{position:absolute;top:10px;right:10px;display:flex;gap:5px;opacity:0;transition:.2s;z-index:2} .member:hover .member-tools{opacity:1} .tool-btn{width:29px;height:29px;border-radius:var(--r-pill);background:var(--panel-solid);border:1px solid var(--line); display:grid;place-items:center;font-size:12px} .tool-btn:hover{background:var(--accent);color:var(--on-accent)} .member.add{display:grid;place-items:center;min-height:220px;border-style:dashed;background:transparent;box-shadow:none;color:var(--txt-2)} .member.add::after{display:none} .member.add:hover{border-color:var(--accent);color:var(--accent)} .member.add .plus{font-size:34px;margin-bottom:6px} /* ── 11. 갤러리 (연도/날짜) ───────────────────── */ .filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px} .years{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;flex:1;scrollbar-width:none} .years::-webkit-scrollbar{display:none} .year-btn{ flex:0 0 auto;padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line); background:var(--panel-2);font-size:13.5px;font-weight:700;color:var(--txt-2);transition:.2s var(--ease); } .year-btn:hover{color:var(--txt);transform:translateY(-1px)} .year-btn.on{background:var(--accent);color:var(--on-accent);border-color:transparent} .year-btn i{font-style:normal;opacity:.65;font-size:11.5px;margin-left:5px} .select{padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel-2); font-size:13.5px;font-weight:600;outline:none} .year-block{margin-bottom:36px} .year-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px; position:sticky;top:69px;z-index:10;padding:10px 0;background:linear-gradient(var(--bg) 62%,transparent)} .year-head h3{font-size:30px;font-weight:800;letter-spacing:-.04em} .year-head span{font-size:13px;color:var(--txt-2);font-weight:600} .month-block{margin-bottom:24px} .month-head{display:flex;align-items:center;gap:10px;margin:0 0 12px} .month-head strong{font-size:15px;font-weight:800;letter-spacing:-.01em} .month-head em{font-style:normal;font-size:12px;color:var(--txt-2)} .month-head .rule{flex:1;height:1px;background:var(--line)} .grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))} @media (max-width:1100px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}} .tile{ position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;cursor:pointer; background:var(--panel-2);border:1px solid var(--line);transition:.3s var(--ease); } .tile:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--shadow);z-index:2} .tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)} .tile:hover img{transform:scale(1.07)} .tile .ov{ position:absolute;inset:auto 0 0;padding:26px 11px 10px;display:flex;flex-direction:column;gap:3px; background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;opacity:0;transition:.28s var(--ease); } .tile:hover .ov{opacity:1} .tile .ov b{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tile .ov small{font-size:10.5px;opacity:.82} .tile .badge{position:absolute;top:8px;left:8px;padding:4px 9px;border-radius:var(--r-pill); background:rgba(0,0,0,.5);color:#fff;font-size:10.5px;font-weight:700;backdrop-filter:blur(6px)} .tile .play-ic{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none} .tile .play-ic span{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.42);color:#fff; display:grid;place-items:center;font-size:15px;backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.35)} /* ── 12. 업로드 드롭존 ────────────────────────── */ .drop{ padding:38px 22px;text-align:center;border:2px dashed var(--line);border-radius:var(--r-lg); transition:.25s var(--ease);cursor:pointer;background:var(--panel-2); } .drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)} .drop .di{font-size:38px;display:block;margin-bottom:10px} .drop b{font-size:15px} .drop small{display:block;margin-top:6px;color:var(--txt-2);font-size:12.5px} .qlist{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow:auto;margin-top:14px} .qitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);background:var(--panel-2); border:1px solid var(--line);font-size:12.5px} .qitem .th{width:38px;height:38px;border-radius:var(--r-xs);object-fit:cover;background:var(--line);flex:0 0 auto; display:grid;place-items:center;font-size:16px} .qitem .qn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qitem .qs{color:var(--txt-2);font-size:11px;flex:0 0 auto} .progress{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:14px} .progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s var(--ease)} /* ── 13. 모달 ─────────────────────────────────── */ .backdrop{position:fixed;inset:0;z-index:200;background:rgba(10,8,14,.5);backdrop-filter:blur(7px); display:grid;place-items:center;padding:18px;animation:fade .25s var(--ease)} .modal{ width:min(560px,100%);max-height:88dvh;overflow:auto;border-radius:var(--r-xl);padding:26px; background:var(--panel-solid);border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.6); animation:pop .35s var(--ease) both; } @keyframes pop{from{opacity:0;transform:translateY(18px) scale(.96)}} .modal.wide{width:min(760px,100%)} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .modal-head h3{font-size:19px;font-weight:800;letter-spacing:-.02em} .form{display:flex;flex-direction:column;gap:13px} .row{display:grid;gap:13px;grid-template-columns:1fr 1fr} label.lb{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:var(--txt-2)} label.lb input,label.lb select,label.lb textarea{ padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel-2); color:var(--txt);outline:none;font-size:14.5px;font-weight:400;transition:.2s var(--ease);width:100%; } label.lb textarea{resize:vertical;min-height:82px;line-height:1.6} label.lb input:focus,label.lb select:focus,label.lb textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap} .emoji-pick{display:flex;gap:6px;flex-wrap:wrap} .emoji-pick button{width:38px;height:38px;border-radius:var(--r-sm);font-size:19px;border:1px solid var(--line);background:var(--panel-2)} .emoji-pick button.on{border-color:var(--accent);background:var(--accent-soft)} .color-pick{display:flex;gap:8px;flex-wrap:wrap} .color-pick button{width:28px;height:28px;border-radius:var(--r-pill);border:2px solid transparent} .color-pick button.on{border-color:var(--txt);transform:scale(1.15)} .avatar-edit{display:flex;align-items:center;gap:14px} /* ── 14. 라이트박스 ───────────────────────────── */ .lightbox{position:fixed;inset:0;z-index:300;background:rgba(6,5,10,.94);display:flex;flex-direction:column; animation:fade .25s var(--ease)} .lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;color:#fff} .lb-bar .lb-info{min-width:0} .lb-bar b{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-bar small{font-size:12px;opacity:.65} .lb-tools{display:flex;gap:8px;flex:0 0 auto} .lb-tools button{width:38px;height:38px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);color:#fff; display:grid;place-items:center;font-size:15px;transition:.2s} .lb-tools button:hover{background:rgba(255,255,255,.25)} .lb-stage{flex:1;display:grid;place-items:center;min-height:0;position:relative;padding:0 16px 18px} /* 넓은 화면에서는 이전/다음 화살표가 영상과 겹치지 않도록 양옆을 비워둡니다 */ @media (min-width:900px){ .lb-stage{padding:0 78px 18px} } .lb-stage img,.lb-stage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-md); box-shadow:0 30px 80px -20px rgba(0,0,0,.9);animation:pop .3s var(--ease)} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;z-index:4; background:rgba(255,255,255,.11);color:#fff;display:grid;place-items:center;font-size:20px;transition:.2s} .lb-nav:hover{background:rgba(255,255,255,.26)} .lb-prev{left:12px} .lb-next{right:12px} .lb-note{padding:0 18px 22px;color:#fff;opacity:.8;font-size:13.5px;text-align:center;white-space:pre-wrap} /* ── 15. 설정 ─────────────────────────────────── */ .set-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))} .set-card{padding:22px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line); box-shadow:var(--shadow);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))} .set-card h3{font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:5px} .set-card>p{font-size:12.5px;color:var(--txt-2);margin-bottom:16px;line-height:1.6} .theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px} .theme-opt{padding:9px;border-radius:var(--r-md);border:2px solid var(--line);background:var(--panel-2); transition:.22s var(--ease);text-align:center} .theme-opt:hover{transform:translateY(-3px)} .theme-opt.on{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .swatch{height:40px;border-radius:var(--r-sm);margin-bottom:7px;position:relative;overflow:hidden} .swatch i{position:absolute;width:24px;height:24px;border-radius:50%;filter:blur(6px)} .swatch i:nth-child(1){left:1px;top:1px} .swatch i:nth-child(2){right:0;top:9px} .swatch i:nth-child(3){left:14px;bottom:-5px} .theme-opt small{font-size:11.5px;font-weight:700} .opt-row{display:flex;gap:7px;flex-wrap:wrap} .opt{padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel-2); font-size:13px;font-weight:600;transition:.2s var(--ease)} .opt:hover{transform:translateY(-1px)} .opt.on{background:var(--accent);color:var(--on-accent);border-color:transparent} .set-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)} .set-line.first{border-top:none;padding-top:0} .set-line .sl{font-size:13.5px;font-weight:600} .set-line .sl small{display:block;font-weight:400;color:var(--txt-2);font-size:11.5px;margin-top:2px;line-height:1.5} .switch{width:46px;height:27px;border-radius:99px;background:var(--line);position:relative;transition:.25s var(--ease);flex:0 0 auto} .switch::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%; background:#fff;transition:.25s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.25)} .switch.on{background:var(--accent)} .switch.on::after{left:22px} .track-list{display:flex;flex-direction:column;gap:7px} .track{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-md); border:1px solid var(--line);background:var(--panel-2);transition:.2s var(--ease);text-align:left;width:100%} .track:hover{transform:translateX(3px)} .track.on{border-color:var(--accent);background:var(--accent-soft)} .track .te{font-size:20px} .track .tt{flex:1;min-width:0} .track .tt b{display:block;font-size:13.5px;font-weight:700} .track .tt small{font-size:11.5px;color:var(--txt-2)} .track .tp{font-size:12px;color:var(--accent);font-weight:700;flex:0 0 auto} /* ── 16. 토스트 ───────────────────────────────── */ .toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:400; display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none} .toast{padding:12px 20px;border-radius:var(--r-pill);background:var(--panel-solid);border:1px solid var(--line); box-shadow:0 18px 44px -18px rgba(0,0,0,.5);font-size:13.5px;font-weight:600; animation:toastIn .38s var(--ease);display:flex;align-items:center;gap:8px;max-width:90vw} @keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.95)}} /* ── 17. 반응형 ───────────────────────────────── */ .tabbar{display:none} @media (max-width:900px){ .app{grid-template-columns:1fr} .sidebar{display:none} .topbar-left .brand-emblem{display:block} .tabbar{ display:grid;grid-template-columns:repeat(6,1fr);align-items:center;gap:2px; position:fixed;left:10px;right:10px;bottom:10px;z-index:60;padding:8px 6px; border-radius:var(--r-xl);border:1px solid var(--line);background:var(--panel); backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)); box-shadow:0 18px 44px -18px rgba(0,0,0,.45); } .tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:var(--r-md); color:var(--txt-2);transition:.2s var(--ease)} .tab span{font-size:17px;line-height:1.1} .tab small{font-size:9.5px;font-weight:700} .tab.on{color:var(--accent);background:var(--accent-soft)} .tab-fab{background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill); height:44px;margin:0 4px;box-shadow:0 8px 20px -6px var(--accent)} .tab-fab span{font-size:22px;font-weight:300} .tab-fab.on{background:var(--accent);color:var(--on-accent)} .foot{padding-bottom:96px} .year-head{top:63px} .year-head h3{font-size:24px} .row{grid-template-columns:1fr} .modal{padding:20px;border-radius:var(--r-lg)} } @media (max-width:420px){ .grid{grid-template-columns:repeat(2,1fr);gap:9px} .stats{grid-template-columns:repeat(2,1fr)} } @media print{.sidebar,.tabbar,.topbar,.mesh{display:none}} /* ── 18. 보완 규칙 ────────────────────────────── */ .tile .dur{position:absolute;bottom:8px;right:8px;padding:3px 7px;border-radius:var(--r-xs); background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em} .tile.missing::before{content:"파일 없음";position:absolute;inset:0;display:grid;place-items:center; font-size:11.5px;color:var(--txt-2);background:var(--panel-2)} .member.add div{display:flex;flex-direction:column;align-items:center} .member.add small{font-size:12.5px;font-weight:700} .set-card .form{margin-top:4px} .set-card .btn-block{margin-top:6px} input[type="range"]{cursor:pointer} /* ── 19. 동영상 플레이어 ──────────────────────── */ .vplayer{ position:relative;display:flex;align-items:center;justify-content:center; aspect-ratio:var(--ar,16/9); width:min(1120px, 100%, calc((100dvh - 205px) * var(--arn,1.7778))); min-width:min(330px,100%);height:auto; border-radius:var(--r-md);overflow:hidden;background:#000; box-shadow:0 30px 80px -20px rgba(0,0,0,.9);animation:pop .3s var(--ease); } .vplayer video{width:100%;height:100%;object-fit:contain;display:block; max-width:none;max-height:none;border-radius:0;box-shadow:none;animation:none} .vp-tap{position:absolute;inset:0 0 74px;z-index:1;background:transparent;cursor:pointer} .vplayer:fullscreen{width:100vw;height:100vh;border-radius:0;align-items:center;justify-content:center} .vplayer:fullscreen video{width:100%;height:100%;object-fit:contain} /* 가운데 큰 재생 표시 */ .vp-big{position:absolute;inset:0 0 74px;display:grid;place-items:center;z-index:2;pointer-events:none; opacity:0;transition:opacity .25s var(--ease)} .vp-big.show{opacity:1} .vp-big span{width:76px;height:76px;border-radius:50%;display:grid;place-items:center; background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.4);color:#fff;font-size:26px; backdrop-filter:blur(10px);padding-left:5px} /* 아래 조작 판 */ .vp-panel{position:absolute;inset:auto 0 0;z-index:3;padding:26px 14px 12px; background:linear-gradient(transparent,rgba(0,0,0,.82) 42%);color:#fff} /* 재생 위치 막대 */ .vp-seek{position:relative;padding:9px 0;cursor:pointer;touch-action:none;outline:none} .vp-track{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.24);overflow:hidden} .vp-seek:hover .vp-track,.vp-seek:focus-visible .vp-track{height:9px} .vp-track{transition:height .15s var(--ease)} .vp-buf{position:absolute;inset:0 auto 0 0;width:0;background:rgba(255,255,255,.28)} .vp-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);border-radius:99px} .vp-knob{position:absolute;right:-7px;top:50%;transform:translateY(-50%) scale(0); width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.6); transition:transform .15s var(--ease)} .vp-seek:hover .vp-knob,.vp-seek:focus-visible .vp-knob{transform:translateY(-50%) scale(1)} .vp-tip{position:absolute;bottom:26px;left:0;transform:translateX(-50%);padding:3px 8px;border-radius:var(--r-xs); background:rgba(0,0,0,.85);font-size:11.5px;font-weight:700;opacity:0;transition:opacity .15s;pointer-events:none; white-space:nowrap} .vp-seek:hover .vp-tip{opacity:1} /* 단추 줄 */ .vp-row{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:nowrap} .vp-btn{display:inline-flex;align-items:center;gap:1px;height:36px;min-width:36px;padding:0 9px; border-radius:var(--r-pill);color:#fff;font-size:14px;line-height:1; background:rgba(255,255,255,.1);transition:.18s var(--ease)} .vp-btn:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)} .vp-btn small{font-size:10px;font-weight:800;opacity:.9} .vp-play{background:var(--accent);color:var(--on-accent);font-size:13px} .vp-play:hover{background:var(--accent);filter:brightness(1.1)} .vp-time{font-size:12.5px;font-variant-numeric:tabular-nums;margin-left:6px;white-space:nowrap;opacity:.9} .vp-time b{font-weight:700} .vp-gap{flex:1} .vp-vol{width:82px;accent-color:var(--accent);height:4px;cursor:pointer} .vp-rate{height:32px;padding:0 6px;border-radius:var(--r-sm);background:rgba(255,255,255,.1); color:#fff;border:none;font-size:12px;font-weight:700;cursor:pointer;outline:none} .vp-rate option{background:#1a1a1a;color:#fff} /* 좁은 화면에서는 한 줄로 압축합니다. (소리 크기는 휴대폰 옆면 버튼으로 조절하시면 돼요) */ @media (max-width:640px){ .vp-tap,.vp-big{inset:0 0 68px} .vp-panel{padding:20px 8px 8px} .vp-row{flex-wrap:nowrap;gap:4px} .vp-vol{display:none} .vp-btn{height:34px;min-width:34px;padding:0 7px;font-size:13px} .vp-play{min-width:36px} .vp-time{font-size:11.5px;margin-left:3px} .vp-rate{height:30px;font-size:11.5px;padding:0 3px} } /* ── 20. 저장 용량 게이지 ─────────────────────── */ .gauge{height:12px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line); overflow:hidden;margin-bottom:9px} .gauge i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .5s var(--ease)} .gauge.warn i{background:linear-gradient(90deg,#e0894a,#e05252)} .gauge.off{opacity:.5} .gauge-txt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap; font-size:12.5px;color:var(--txt-2);margin-bottom:14px} .gauge-txt b{font-size:17px;font-weight:800;color:var(--txt);letter-spacing:-.02em} .gauge-warn{font-size:12.5px;color:#e05252;font-weight:600;line-height:1.6;margin:-6px 0 14px} /* 업로드 창의 용량 안내 */ .uinfo{font-size:12.5px;color:var(--txt-2);margin:0;padding:9px 12px;border-radius:var(--r-sm); background:var(--panel-2);border:1px solid var(--line);line-height:1.6} .uinfo.over{color:#e05252;font-weight:600;border-color:rgba(224,82,82,.35);background:rgba(224,82,82,.08)} /* ── 21. 목록에서 바로 수정·삭제 ──────────────── */ .tile-tools{position:absolute;top:7px;right:7px;z-index:3;display:flex;gap:5px; opacity:0;transform:translateY(-4px);transition:.2s var(--ease)} .tile:hover .tile-tools{opacity:1;transform:none} .tile-tools .tool-btn{width:30px;height:30px;background:rgba(255,255,255,.94);color:#333; border:none;box-shadow:0 4px 12px rgba(0,0,0,.3);font-size:12px} .tile-tools .tool-btn:hover{background:var(--accent);color:var(--on-accent);transform:scale(1.08)} /* 손가락으로 쓰는 화면에서는 늘 보이게 */ @media (hover:none){ .tile-tools{opacity:1;transform:none} } /* 골라서 바꾸기 */ .tile.picking{cursor:pointer} .tile.picking::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28); transition:.2s var(--ease);pointer-events:none} .tile.picked{outline:3px solid var(--accent);outline-offset:-3px} .tile.picked::after{background:var(--accent-soft);backdrop-filter:saturate(1.4)} .pick-mark{position:absolute;top:8px;left:8px;z-index:3;width:26px;height:26px;border-radius:50%; display:grid;place-items:center;font-size:13px;font-weight:800; background:rgba(255,255,255,.9);color:transparent;border:2px solid rgba(255,255,255,.9); transition:.18s var(--ease)} .tile.picked .pick-mark{background:var(--accent);color:var(--on-accent);border-color:var(--accent); transform:scale(1.1)} .pickbar{ position:sticky;top:69px;z-index:15;display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:11px 14px;margin-bottom:12px;border-radius:var(--r-lg); background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow); backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)); } .pickbar b{font-size:13.5px;font-weight:800;color:var(--accent);white-space:nowrap;margin-right:2px} .pb-gap{flex:1} @media (max-width:900px){ .pickbar{top:63px;padding:10px} .pickbar b{width:100%} .pb-gap{display:none} } /* ── 22. 로그인 화면 보조 ─────────────────────── */ .spinner{width:36px;height:36px;margin:0 auto;border-radius:50%; border:3px solid var(--line);border-top-color:var(--accent);animation:spin .9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .lock-msg .err{color:#e05252} .lock-form code{font-size:12px;background:var(--panel-2);padding:2px 6px;border-radius:var(--r-xs); word-break:break-all} .lock-form .empty{border-style:solid;border-color:var(--line)} a.btn{text-decoration:none} #linkBox input{font-size:12.5px} .acct-hint{margin-top:10px;padding:11px 14px;border-radius:var(--r-md);text-align:left; background:var(--accent-soft);border:1px solid var(--line);font-size:12.5px;line-height:1.7} .acct-hint b{word-break:break-all} /* ── 23. 로그인 문제 안내 ─────────────────────── */ .callout-err{ text-align:left;padding:16px 18px;border-radius:var(--r-md); background:rgba(224,82,82,.09);border:1px solid rgba(224,82,82,.32); font-size:13.5px;line-height:1.8 } .callout-err b{display:block;font-size:15px;margin-bottom:8px;color:#e05252} .callout-err p{margin:0 0 8px;color:var(--txt-2)} .callout-err p:last-child{margin-bottom:0} .uri-box{ text-align:left;padding:13px 15px;border-radius:var(--r-md); background:var(--panel-2);border:1px solid var(--line); display:flex;flex-direction:column;gap:8px } .uri-label{font-size:11.5px;color:var(--txt-2);line-height:1.6} .uri-box code{ font-family:ui-monospace,'Consolas',monospace;font-size:13px; background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--r-sm); padding:9px 11px;word-break:break-all;user-select:all;color:var(--accent) } .uri-box .btn{align-self:flex-start} .setup-peek{text-align:left;margin-top:4px} .setup-peek summary{ cursor:pointer;font-size:12.5px;color:var(--txt-2);padding:6px 0; text-decoration:underline;text-underline-offset:3px;list-style:none } .setup-peek summary::-webkit-details-marker{display:none} .setup-peek summary::before{content:"❓ "} .setup-peek[open] summary{margin-bottom:8px} .uri-box code{white-space:pre-wrap;line-height:1.7} .callout-err p{margin-top:6px} /* ── 24. 마감 다듬기 ──────────────────────────── */ /* 사진첩이라 화면 요소는 조용히, 사진은 또렷하게 */ :root{ --r-md:14px; --r-lg:20px; --r-xl:26px; --blur:18px; } html[data-radius="round"]{ --r-md:24px; --r-lg:32px; --r-xl:40px; } .theme-opt{padding:10px 9px 11px} .theme-opt small{display:block;font-size:12px;font-weight:700;letter-spacing:-.01em} .theme-opt em{display:block;font-style:normal;font-size:10.5px;color:var(--txt-2); margin-top:2px;line-height:1.4} .theme-opt.on{box-shadow:0 0 0 3px var(--accent-soft)} .swatch{height:44px} .swatch i{filter:blur(7px);opacity:.9} /* 타일: 그림자를 옅게, 사진 자체가 도드라지게 */ .tile{border-color:transparent;background:var(--panel-2)} .tile:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 18px 36px -22px rgba(0,0,0,.45)} .tile:hover img{transform:scale(1.045)} .grid{gap:14px} /* 카드: 테두리는 머리카락처럼 얇게 */ .card,.stat,.member,.set-card,.hero{border-width:1px} .hero{background:var(--panel)} .hero h1{letter-spacing:-.035em} /* 제목 글자를 조금 더 단정하게 */ .sec-title,.brand-text strong,.topbar h2{letter-spacing:-.025em} .year-head h3{letter-spacing:-.045em;font-weight:800} /* 가족 카드 위 색띠를 옅게 — 사진이 주인공이 되도록 */ .member::after{opacity:.28;height:56px} /* 사이드바를 조금 좁혀 사진 공간을 넓힘 */ @media (min-width:901px){ .app{grid-template-columns:248px 1fr} } /* ═══════════════════════════════════════════════ 25. 편집 디자인 — 사진이 앞에 서는 화면 전면 히어로 · 초대형 표제 · 숫자 밴드 · 넉넉한 여백 ═══════════════════════════════════════════════ */ .view{max-width:1280px} /* ── 눈썹 라벨 (작고 넓게 벌린 글자) ─────────── */ .eyebrow{ font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);margin:0 0 12px;font-variant-numeric:tabular-nums } .sec-head{align-items:flex-end;margin-bottom:22px} .sec-title{font-size:clamp(20px,2.6vw,27px);font-weight:800;letter-spacing:-.035em} .sec-title small{font-size:13px;font-weight:500;margin-left:2px} /* ── 전면 히어로 ─────────────────────────────── */ .hero-full{ position:relative;overflow:hidden;isolation:isolate; margin:calc(var(--sp) * -1) calc(var(--sp) * -1) 44px; min-height:clamp(400px,62vh,620px); display:flex;flex-direction:column;justify-content:flex-end; padding:clamp(28px,5vw,62px); background:var(--panel-2); } .hero-bg{position:absolute;inset:0;z-index:-3} .hero-bg img{width:100%;height:100%;object-fit:cover; animation:heroIn 1.4s var(--ease) both;filter:saturate(1.04)} @keyframes heroIn{from{opacity:0;transform:scale(1.07)}} .hero-veil{position:absolute;inset:0;z-index:-2; background:linear-gradient(180deg,rgba(8,8,10,.30) 0%,rgba(8,8,10,.12) 32%,rgba(8,8,10,.72) 100%)} .hero-full.blank{background: radial-gradient(1200px 500px at 18% 8%,var(--accent-soft),transparent 62%), linear-gradient(160deg,var(--panel-2),transparent 60%),var(--panel-solid)} .hero-full.blank .hero-veil{display:none} /* 뒤에 크게 깔리는 이름 */ .hero-ghost{ position:absolute;left:clamp(14px,4vw,52px);top:clamp(10px,6vh,58px);z-index:-1; font-size:clamp(74px,17vw,220px);font-weight:800;line-height:.82; letter-spacing:-.055em;color:#fff;opacity:.15; white-space:nowrap;pointer-events:none;user-select:none; animation:ghostIn 1.6s var(--ease) both } @keyframes ghostIn{from{opacity:0;transform:translateY(18px)}} .hero-full.blank .hero-ghost{color:var(--txt);opacity:.055} .hero-inner{position:relative;max-width:36ch} .hero-full h1{ font-size:clamp(32px,5.6vw,62px);font-weight:800;line-height:1.1; letter-spacing:-.045em;color:#fff;text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.35) } .hero-full .hero-sub{ margin-top:14px;font-size:clamp(14px,1.6vw,17px);line-height:1.75; color:rgba(255,255,255,.88);max-width:44ch } .hero-full .eyebrow{color:rgba(255,255,255,.82)} .hero-full.blank h1{color:var(--txt);text-shadow:none} .hero-full.blank .hero-sub{color:var(--txt-2)} .hero-full.blank .eyebrow{color:var(--accent)} .hero-actions{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap} .hero-full .btn{ background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff; backdrop-filter:blur(10px);padding:13px 22px } .hero-full .btn:hover{background:rgba(255,255,255,.26)} .hero-full .btn-primary{background:#fff;color:#111;border-color:#fff} .hero-full .btn-primary:hover{background:#fff;filter:brightness(.95)} .hero-full.blank .btn{background:var(--panel-2);border-color:var(--line);color:var(--txt);backdrop-filter:none} .hero-full.blank .btn-primary{background:var(--accent);color:var(--on-accent);border-color:transparent} .hero-credit{ position:absolute;right:clamp(14px,3vw,26px);bottom:clamp(12px,2.4vw,20px); font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.62) } /* ── 숫자 밴드 ───────────────────────────────── */ .stats-band{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; border-top:1px solid var(--line);border-bottom:1px solid var(--line); margin-bottom:52px } .stat-col{padding:26px 8px 28px;border-left:1px solid var(--line)} .stat-col:first-child{border-left:none;padding-left:0} .stat-col .k{ display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em; color:var(--accent);margin-bottom:10px } .stat-col .v{ display:block;font-size:clamp(26px,4.4vw,46px);font-weight:800; letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums } .stat-col .v em{font-style:normal;font-size:.42em;font-weight:600;color:var(--txt-2);margin-left:4px} @media (max-width:700px){ .stats-band{grid-template-columns:repeat(2,1fr)} .stat-col{padding:20px 6px 22px} .stat-col:nth-child(3){border-left:none;padding-left:0} .stat-col:nth-child(3),.stat-col:nth-child(4){border-top:1px solid var(--line)} } /* ── 동그란 얼굴 줄 ──────────────────────────── */ .face-row{ display:flex;gap:clamp(14px,3vw,38px);flex-wrap:wrap; justify-content:center;padding:8px 0 4px } .face{display:flex;flex-direction:column;align-items:center;gap:11px; width:clamp(78px,11vw,116px);transition:transform .25s var(--ease)} .face:hover{transform:translateY(-5px)} .face-img{ width:clamp(72px,10vw,108px);height:clamp(72px,10vw,108px);border-radius:50%; overflow:hidden;display:grid;place-items:center;font-size:clamp(28px,4vw,40px); background:var(--panel-2);border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 30px -18px rgba(0,0,0,.4) } .face-img img{width:100%;height:100%;object-fit:cover} .face b{font-size:13.5px;font-weight:700;letter-spacing:-.02em;text-align:center;line-height:1.3} .face small{font-size:11.5px;color:var(--txt-2);margin-top:-6px} /* ── 최근 사진: 하나는 크게, 나머지는 곁들이 ── */ .feature-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)} .feature-grid .tile{aspect-ratio:1} .feature-grid .tile.big{grid-column:span 2;grid-row:span 2;aspect-ratio:1} @media (max-width:820px){ .feature-grid{grid-template-columns:repeat(2,1fr)} .feature-grid .tile.big{grid-column:span 2;grid-row:auto;aspect-ratio:4/3} } /* ── 생일 줄 ─────────────────────────────────── */ .bday-row{display:flex;gap:12px;flex-wrap:wrap} .bday{ display:flex;align-items:center;gap:13px;padding:14px 18px 14px 14px; border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line); box-shadow:var(--shadow);min-width:220px;transition:.25s var(--ease) } .bday:hover{transform:translateY(-3px)} .bday .face-img{width:52px;height:52px;font-size:22px;box-shadow:none} .bday .bd-t{display:flex;flex-direction:column;line-height:1.45} .bday .bd-t b{font-size:14.5px;font-weight:700;letter-spacing:-.02em} .bday .bd-t small{font-size:12px;color:var(--accent);font-weight:700} .bday .bd-t i{font-style:normal;font-size:11.5px;color:var(--txt-2)} /* ── 갤러리 연도 표제도 편집 느낌으로 ────────── */ .year-head h3{font-size:clamp(28px,4.6vw,48px)} .month-head strong{font-size:14px;letter-spacing:.02em} /* 한글은 글자 폭이 넓어 ch 단위로 재면 너무 좁아집니다 — 실제 폭으로 잡습니다 */ .hero-inner{max-width:min(720px,94%)} .hero-full .hero-sub{max-width:min(560px,94%)} .hero-full h1{font-size:clamp(30px,4.6vw,54px)} /* ── 26. 대문 사진 넘기기 ─────────────────────── */ .hero-bg img{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);animation:none} .hero-bg img.on{opacity:1;animation:heroIn 1.6s var(--ease) both} .hero-count{ position:absolute;left:clamp(14px,4vw,52px);bottom:clamp(14px,3vw,26px); display:flex;align-items:baseline;gap:7px;color:#fff; font-size:13px;font-weight:700;letter-spacing:.1em;font-variant-numeric:tabular-nums; text-shadow:0 1px 10px rgba(0,0,0,.4) } .hero-count b{font-size:20px} .hero-count i{font-style:normal;opacity:.5} .hero-count span{opacity:.62} .hero-dots{ position:absolute;left:clamp(14px,4vw,52px);bottom:clamp(44px,6vw,62px); display:flex;gap:7px } .hero-dots .hd{ width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.35); transition:.35s var(--ease);padding:0 } .hero-dots .hd.on{background:#fff;width:40px} .hero-dots .hd:hover{background:rgba(255,255,255,.7)} /* 별 표시가 켜진 도구 단추 */ .tile-tools .tool-btn.on{background:#ffd76e;color:#5a4300} /* 설정의 대문 사진 줄 */ .cover-row{display:flex;gap:9px;flex-wrap:wrap} .cover-chip{ position:relative;width:64px;height:64px;border-radius:var(--r-sm);overflow:hidden; border:1px solid var(--line);background:var(--panel-2);transition:.2s var(--ease) } .cover-chip img{width:100%;height:100%;object-fit:cover} .cover-chip span{ position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px; background:rgba(0,0,0,.45);opacity:0;transition:.2s } .cover-chip:hover span{opacity:1} .cover-chip:hover{transform:translateY(-2px)} @media (max-width:700px){ .hero-dots{bottom:52px} .hero-dots .hd{width:20px} .hero-dots .hd.on{width:30px} } /* 아래쪽 슬라이드 표시와 겹치지 않도록 자리를 비워둡니다 */ .hero-full{padding-bottom:clamp(74px,9vw,100px)} .hero-credit{bottom:clamp(16px,3vw,26px)} /* ── 27. 대문 사진 고르기 · 내 음악 목록 ───────── */ .pickgrid{ display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); max-height:44vh;overflow:auto;padding:2px } .pg{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden; border:2px solid transparent;background:var(--panel-2);transition:.18s var(--ease)} .pg img{width:100%;height:100%;object-fit:cover} .pg i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal; font-size:20px;color:#fff;background:rgba(0,0,0,.42);opacity:0;transition:.18s} .pg.on{border-color:var(--accent)} .pg.on i{opacity:1;background:color-mix(in srgb,var(--accent) 62%,transparent)} .pg:hover{transform:translateY(-2px)} .cover-chip.auto{opacity:.62} .cover-chip.auto span{opacity:1;background:rgba(0,0,0,.28);font-size:13px} .cover-chip.add{display:grid;place-items:center;font-size:22px;color:var(--txt-2); border-style:dashed;background:transparent} .cover-chip.add:hover{border-color:var(--accent);color:var(--accent)} .tune-list{display:flex;flex-direction:column;gap:6px;margin-top:10px} .tune{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 13px; border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line)} .tune .tn{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── 28. 내 음악 목록 ─────────────────────────── */ .tune{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px} .tune.on{border-color:var(--accent);background:var(--accent-soft)} .tune-play{width:30px;height:30px;border-radius:50%;flex:0 0 auto; display:grid;place-items:center;font-size:11px; background:var(--accent);color:var(--on-accent);transition:.18s var(--ease)} .tune-play:hover{transform:scale(1.1)} .hero-bg img{image-rendering:auto} /* ═══════════════════════════════════════════════ 29. 대문 모자이크 — 여러 장을 한 화면에 배치 양식은 .m-* 로 바꿉니다. ═══════════════════════════════════════════════ */ .hero-bg.mosaic{display:grid;gap:3px;background:var(--bg)} .hero-bg.mosaic img{position:relative;inset:auto;opacity:1;width:100%;height:100%; object-fit:cover;animation:mosaicIn .9s var(--ease) both} .hero-bg.mosaic img:nth-child(2){animation-delay:.09s} .hero-bg.mosaic img:nth-child(3){animation-delay:.18s} .hero-bg.mosaic img:nth-child(4){animation-delay:.27s} @keyframes mosaicIn{from{opacity:0;transform:scale(1.04)}} /* 장수(n2·n3·n4)에 따라 칸을 다르게 나눕니다. 행을 명시하지 않으면 grid-row 지정이 무시되므로 반드시 적어줍니다. */ /* ① 하나 크게 — 왼쪽 큰 사진, 오른쪽에 나머지 */ .m-feature{grid-template-columns:1.9fr 1fr} .m-feature.n2{grid-template-rows:1fr} .m-feature.n3{grid-template-rows:1fr 1fr} .m-feature.n3 > :first-child{grid-row:1 / 3} .m-feature.n4{grid-template-rows:1fr 1fr 1fr} .m-feature.n4 > :first-child{grid-row:1 / 4} /* ② 가운데 크게 — 가운데 크게, 옆으로 작게 */ .m-center{grid-template-columns:1fr 1.9fr 1fr} .m-center.n3{grid-template-rows:1fr} .m-center.n3 > :nth-child(1){grid-column:2} .m-center.n3 > :nth-child(2){grid-column:1;grid-row:1} .m-center.n3 > :nth-child(3){grid-column:3;grid-row:1} .m-center.n4{grid-template-rows:1fr 1fr} .m-center.n4 > :nth-child(1){grid-column:2;grid-row:1 / 3} .m-center.n4 > :nth-child(2){grid-column:1;grid-row:1} .m-center.n4 > :nth-child(3){grid-column:1;grid-row:2} .m-center.n4 > :nth-child(4){grid-column:3;grid-row:1 / 3} /* ③ 큰·중간·작은 — 크기를 층층이 */ .m-mixed{grid-template-columns:1.8fr 1fr 1fr;grid-template-rows:1fr 1fr} .m-mixed.n3 > :nth-child(1){grid-column:1;grid-row:1 / 3} .m-mixed.n3 > :nth-child(2){grid-column:2 / 4;grid-row:1} .m-mixed.n3 > :nth-child(3){grid-column:2 / 4;grid-row:2} .m-mixed.n4 > :nth-child(1){grid-column:1;grid-row:1 / 3} .m-mixed.n4 > :nth-child(2){grid-column:2 / 4;grid-row:1} .m-mixed.n4 > :nth-child(3){grid-column:2;grid-row:2} .m-mixed.n4 > :nth-child(4){grid-column:3;grid-row:2} /* ④ 바둑판 — 고르게 */ .m-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr} .m-grid.n3 > :first-child{grid-column:1 / 3} /* ⑤ 나란히 — 세로로 길게 */ .m-row{grid-auto-flow:column;grid-auto-columns:1fr;grid-template-rows:1fr} /* 한 장뿐이면 그냥 꽉 채웁니다 */ .hero-bg.mosaic.few{grid-template-columns:1fr !important;grid-template-rows:1fr !important} .hero-bg.mosaic.few > *{grid-column:auto !important;grid-row:auto !important} /* 두 장이면 반씩 */ .hero-bg.mosaic.n2{grid-template-columns:1.9fr 1fr;grid-template-rows:1fr} .hero-bg.mosaic.n2 > *{grid-column:auto;grid-row:auto} @media (max-width:640px){ /* 좁은 화면에서는 배치를 단순하게 — 잘게 쪼개면 알아볼 수 없어요 */ .hero-bg.mosaic{grid-template-columns:1fr 1fr !important; grid-template-rows:1fr 1fr !important;grid-auto-flow:row !important} .hero-bg.mosaic > *{grid-column:auto !important;grid-row:auto !important} .hero-bg.mosaic > :nth-child(n+5){display:none} } /* ── 배치 고르기 (설정) ─────────────────────── */ .layout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px} .layout-opt{padding:9px;border-radius:var(--r-md);border:2px solid var(--line); background:var(--panel-2);transition:.22s var(--ease);text-align:center} .layout-opt:hover{transform:translateY(-3px)} .layout-opt.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .layout-opt small{display:block;font-size:11.5px;font-weight:700;margin-top:7px} .lay{display:grid;gap:2px;height:52px;border-radius:var(--r-xs);overflow:hidden} .lay span{background:var(--accent);opacity:.32;border-radius:1px} .lay span:first-child{opacity:.72} .layout-opt.on .lay span{opacity:.42} .layout-opt.on .lay span:first-child{opacity:.95}