:root { --blue:#075ba8; --navy:#103a63; --line:#d8e2ed; --ink:#172033; --muted:#667085; --bg:#f2f6fa; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--bg); font-family:'Noto Sans KR',sans-serif; } .page-header { min-height:70px; padding:12px max(24px,calc((100vw - 1340px)/2)); display:flex; align-items:center; justify-content:space-between; gap:15px; background:#fff; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:10px; color:var(--navy); font-size:18px; font-weight:800; text-decoration:none; } .brand i { width:36px; height:36px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--blue); } .page-shell { max-width:1340px; margin:auto; padding:32px 24px 60px; } .page-title { margin-bottom:22px; } .eyebrow { margin:0 0 5px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.08em; } h1 { margin:0; color:var(--navy); font-size:30px; } .page-title p:not(.eyebrow) { margin:8px 0 0; color:var(--muted); } .layout { display:grid; grid-template-columns:minmax(300px,390px) minmax(0,1fr); gap:18px; align-items:start; } .card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 18px rgba(38,70,105,.06); } .card-head { padding:20px; border-bottom:1px solid var(--line); } .card-head h2 { margin:0; color:var(--navy); font-size:18px; } .card-head p { margin:5px 0 0; color:var(--muted); font-size:12px; } .card-body { padding:18px; } label { display:block; margin:0 0 13px; color:#344054; font-size:13px; font-weight:700; } input,textarea { width:100%; margin-top:6px; border:1px solid #cbd7e4; border-radius:7px; padding:10px 11px; color:var(--ink); background:#fff; font:inherit; font-size:14px; } input:focus,textarea:focus { outline:2px solid #b7d9f7; border-color:var(--blue); } textarea { min-height:72px; resize:vertical; } .two-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .dropzone { min-height:122px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:14px; border:2px dashed #aac4da; border-radius:9px; color:#46627b; text-align:center; cursor:pointer; background:#f8fbfe; } .dropzone input { display:none; } .dropzone i { color:var(--blue); font-size:25px; } .dropzone span { font-size:11px; font-weight:500; } .dropzone.is-dragover { border-color:var(--blue); background:#eaf5ff; } .file-list { margin:10px 0; padding:0; list-style:none; } .file-list li { display:flex; align-items:center; gap:7px; padding:7px 3px; border-bottom:1px solid #edf1f5; font-size:12px; } .file-list li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .file-list small { margin-left:auto; color:var(--muted); white-space:nowrap; } .file-list button { border:0; color:#bf2d2d; background:transparent; cursor:pointer; } .file-list .total { color:var(--blue); font-weight:700; } .form-actions { display:flex; justify-content:flex-end; margin-top:16px; } .button { min-height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:7px; font:inherit; font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; } .button:disabled { opacity:.65; cursor:wait; } .button-primary { color:#fff; background:var(--blue); } .button-light { color:#30465b; border-color:#cad7e3; background:#fff; } .button-danger { color:#fff; background:#dc3f45; } .list-head { display:flex; justify-content:space-between; gap:14px; align-items:center; }.search { width:230px; position:relative; }.search i { position:absolute; left:10px; top:18px; color:#718096; font-size:12px; }.search input { padding-left:29px; }.share-list { min-height:410px; }.share-item { display:flex; justify-content:space-between; gap:18px; padding:17px 20px; border-bottom:1px solid #e5edf5; }.share-main { min-width:0; }.share-title-row { display:flex; align-items:center; gap:8px; }.share-title-row h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1f3e5b; font-size:15px; }.share-main p,.share-main small { display:block; margin:5px 0 0; color:var(--muted); font-size:12px; }.status { padding:2px 6px; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; }.status.active { color:#057147; background:#dff8e9; }.status.expired { color:#9b2d2d; background:#ffebeb; }.share-actions { flex:0 0 auto; display:flex; gap:6px; align-items:center; }.button.btn-table { min-height:32px; }.empty { min-height:180px; display:grid; place-items:center; color:var(--muted); text-align:center; }.empty i { font-size:26px; }.error,.share-error { color:#b42318; }.link-dialog { width:min(560px,calc(100vw - 30px)); border:0; border-radius:12px; padding:0; box-shadow:0 18px 60px rgba(0,0,0,.25); }.link-dialog::backdrop { background:rgba(15,23,42,.5); }.dialog-head { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }.dialog-head h2 { margin:0; color:var(--navy); font-size:18px; }.icon-button { border:0; background:transparent; color:#536477; font-size:18px; cursor:pointer; }.link-dialog > p,.copy-row,.password-notice { margin:16px 20px; }.copy-row { display:flex; gap:8px; }.copy-row input { margin:0; }.dialog-actions { display:flex; justify-content:flex-end; padding:16px 20px; border-top:1px solid var(--line); }.password-notice { color:#a35a00; font-size:12px; }.share-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#e8f2fb,#f9fbfd); }.share-shell { width:min(560px,100%); }.share-card { padding:36px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 40px rgba(18,58,99,.12); }.share-icon { width:58px; height:58px; margin:0 auto 16px; display:grid; place-items:center; border-radius:16px; color:#fff; background:var(--blue); font-size:25px; }.share-card h1 { font-size:24px; }.share-card #shareGuide { margin:9px 0 22px; color:var(--muted); font-size:14px; }.share-card label { text-align:left; }.share-card .button { width:100%; margin-top:5px; }.share-files { margin-top:16px; text-align:left; }.download-file { width:100%; display:flex; align-items:center; gap:12px; margin:8px 0; padding:12px; border:1px solid #d6e3ee; border-radius:8px; color:#1f3e5b; background:#fff; text-align:left; cursor:pointer; }.download-file:hover { border-color:var(--blue); background:#f4faff; }.download-file span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }.download-file small { display:block; margin-top:3px; color:var(--muted); font-weight:400; }.share-error { margin:14px 0 0; font-size:13px; }
.email-button-area { margin:0 20px 16px; padding:14px; border-radius:8px; background:#f4f8fc; text-align:center; }.email-button-area p { margin:0 0 10px; color:#40576e; font-size:12px; }.email-button-area small { display:block; margin-top:8px; color:#6f8193; font-size:11px; }.email-button-preview { display:inline-flex; align-items:center; gap:7px; margin:0 0 10px; padding:10px 17px; border-radius:6px; color:#fff; background:#075ba8; font-size:13px; font-weight:700; text-decoration:none; }.button-mail { width:100%; color:#075ba8; border-color:#8cb7db; background:#fff; }
.button-view { color:#0b5f8f; border-color:#a9d4eb; background:#edf9ff; }
.email-info-preview { display:flex; flex-direction:column; gap:3px; margin:0 0 11px; padding:10px; border:1px solid #d5e4f1; border-radius:6px; color:#40576e; background:#fff; text-align:left; font-size:11px; }.email-info-preview strong { color:#103a63; font-size:13px; }.email-info-preview span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:900px){.layout{grid-template-columns:1fr}.upload-card{order:2}.page-header{padding:11px 18px}.page-shell{padding:25px 16px}.list-head{align-items:stretch;flex-direction:column}.search{width:100%}}@media(max-width:560px){.brand span{font-size:14px}.two-columns{grid-template-columns:1fr}.share-item{align-items:stretch;flex-direction:column}.share-actions{justify-content:flex-end}.page-title h1{font-size:25px}.share-card{padding:27px 20px}.copy-row{flex-direction:column}}
.document-info { margin:24px 0 0; text-align:left; border-top:2px solid #1f2937; border-bottom:1px solid #9ca3af; }.document-info h2 { margin:12px 0; color:#111827; font-size:15px; }.document-info dl { margin:0; }.document-info dl > div { display:grid; grid-template-columns:130px 1fr; gap:14px; padding:8px 6px; }.document-info dt { color:#344054; font-size:13px; font-weight:700; }.document-info dd { margin:0; color:#111827; font-size:13px; font-weight:500; white-space:pre-wrap; word-break:break-word; }.share-card .document-info + .share-files { margin-top:18px; }.share-company-logo { display:block; width:105px; height:auto; margin:0 auto 14px; object-fit:contain; }
.share-page { display:block; min-height:100vh; padding:28px 16px; background:#eef4f8; }.share-shell { width:min(760px,100%); margin:0 auto; }.share-card { padding:48px 56px 30px; text-align:left; border:1px solid #cbd5df; border-radius:0; box-shadow:0 2px 15px rgba(18,58,99,.12); }.share-header { text-align:center; }.share-company-logo { width:76px; margin:0 auto 24px; }.share-kicker { margin:0 0 9px; color:#183a63; font-size:15px; font-weight:700; }.share-card h1 { margin:0; color:#0b2e58; font-size:31px; letter-spacing:-.05em; text-align:center; }.share-divider { height:3px; margin:20px 0 25px; background:#082d59; box-shadow:0 4px 0 #b5c1cc; }.share-intro { margin:0 0 25px; color:#263746; font-size:13px; line-height:1.8; }.document-info { margin:0; border:0; }.document-info h2,.attachments h2 { margin:0 0 9px; color:#132c4c; font-size:15px; font-weight:800; }.document-info h2 i,.attachments h2 i { margin-right:7px; color:#0b4b86; font-size:13px; }.document-info dl { border-top:1px solid #aebac6; border-left:1px solid #aebac6; }.document-info dl > div { grid-template-columns:135px minmax(0,1fr); gap:0; min-height:47px; padding:0; border-right:1px solid #aebac6; border-bottom:1px solid #aebac6; }.document-info dt { display:flex; align-items:center; justify-content:center; padding:10px; color:#2b3e53; background:#f1f4f7; font-size:13px; font-weight:700; }.document-info dd { display:flex; align-items:center; padding:10px 16px; color:#263746; background:#fff; font-size:13px; line-height:1.55; }.attachments { margin-top:24px; }.share-files { margin-top:0; }.download-file { min-height:56px; margin:7px 0; padding:10px 14px; border-color:#c8d1da; border-radius:0; background:#fff; }.download-file:hover { border-color:#7198bd; background:#f7fbff; }.download-file > .fa-file { color:#486886; font-size:21px; }.download-file > .fa-download { padding-left:16px; border-left:1px solid #e2e7ec; color:#0b4075; font-size:18px; }.download-file span { color:#263746; font-size:13px; }.download-file small { color:#667788; }.share-footer { display:flex; flex-direction:column; align-items:flex-end; gap:5px; margin-top:27px; color:#24384c; }.share-footer strong { font-size:16px; }.share-footer span { font-size:11px; }.share-expiry-note { margin:16px 0 0; padding-top:12px; border-top:1px solid #c2cbd4; color:#74818e; font-size:10px; }.share-error { margin-top:14px; }.share-card .document-info + .share-files { margin-top:0; }
@media(max-width:560px){.share-page{padding:12px}.share-card{padding:30px 25px 22px}.share-company-logo{width:62px;margin-bottom:17px}.share-kicker{font-size:13px}.share-card h1{font-size:25px}.share-divider{margin:16px 0 20px}.share-intro{font-size:12px}.document-info dl > div{grid-template-columns:100px minmax(0,1fr)}.document-info dt,.document-info dd{padding:8px;font-size:11px}.download-file span{font-size:11px}.share-footer strong{font-size:14px}}
.download-file .file-type-icon { width:24px; text-align:center; font-size:21px; }.download-file .file-icon-pdf { color:#d92d20; }.download-file .file-icon-excel { color:#18794e; }.download-file .file-icon-word { color:#2563b8; }.download-file .file-icon-powerpoint { color:#d75a2e; }.download-file .file-icon-hwp { color:#2563b8; }.download-file .file-icon-image { color:#8b5cf6; }.download-file .file-icon-zip { color:#b7791f; }.download-file .file-icon-default { color:#64748b; }
.download-file .file-type-badge { width:34px; min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; color:#fff; font-size:8px; font-weight:800; letter-spacing:-.04em; }.download-file .file-type-badge.file-icon-pdf { background:#e34343; }.download-file .file-type-badge.file-icon-excel { background:#169a5b; }.download-file .file-type-badge.file-icon-word { background:#2879cf; }.download-file .file-type-badge.file-icon-powerpoint { background:#e27638; }.download-file .file-type-badge.file-icon-hwp { background:#3b6fc4; }.download-file .file-type-badge.file-icon-image { background:#8b5bd6; }.download-file .file-type-badge.file-icon-zip { background:#bb7d21; }.download-file .file-type-badge.file-icon-default { background:#75869a; }
.download-file .file-type-icon { width:26px; min-width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:2px; color:#fff; font-size:15px; }.download-file .file-type-icon.file-icon-pdf { background:#df3b2f; }.download-file .file-type-icon.file-icon-excel { background:#1e8c5a; }.download-file .file-type-icon.file-icon-word { background:#2879cf; }.download-file .file-type-icon.file-icon-powerpoint { background:#db6a36; }.download-file .file-type-icon.file-icon-hwp { background:#3b6fc4; }.download-file .file-type-icon.file-icon-image { background:#8656d0; }.download-file .file-type-icon.file-icon-zip { background:#b8781d; }.download-file .file-type-icon.file-icon-default { background:#75869a; }