diff --git a/assets/logo.svg b/assets/logo.svg
index c56c181..380967a 100644
--- a/assets/logo.svg
+++ b/assets/logo.svg
@@ -1,7 +1,56 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
-  <title>Puzzle CI Logo</title>
-  <path d="M173.39,147.31 L172.21,148.10 L170.59,149.56 L169.06,151.71 L168.08,154.15 L167.52,156.88 L167.43,159.52 L167.43,162.11 L167.43,164.70 L167.43,167.33 L167.43,170.07 L167.43,172.71 L167.43,175.29 L167.43,177.88 L167.43,180.52 L167.43,183.25 L167.43,185.89 L167.43,188.62 L167.43,191.26 L167.43,193.85 L167.43,196.44 L167.43,199.07 L167.43,201.81 L167.43,204.44 L167.43,207.03 L167.43,209.62 L167.43,212.26 L167.43,214.99 L167.43,217.63 L167.43,220.36 L167.43,223.00 L167.43,225.59 L167.43,228.17 L167.43,230.81 L167.43,233.54 L167.43,236.18 L167.43,238.77 L167.43,241.36 L167.43,243.99 L167.43,246.73 L167.43,249.37 L167.43,252.10 L167.98,253.91 L169.06,254.88 L170.78,254.88 L172.54,254.88 L174.36,254.88 L176.12,254.88 L177.85,254.88 L179.58,254.88 L181.34,254.88 L183.16,254.88 L184.92,254.88 L186.74,254.88 L188.50,254.88 L190.23,255.22 L191.30,256.49 L191.63,258.64 L191.30,261.38 L190.78,264.01 L190.33,266.60 L189.90,269.19 L189.67,271.83 L189.80,274.56 L190.23,277.20 L190.98,279.93 L191.95,282.57 L193.26,285.16 L194.89,287.26 L196.64,288.92 L198.47,289.89 L200.23,290.38 L201.95,290.53 L203.68,290.38 L205.44,289.89 L207.26,288.72 L209.02,287.11 L210.65,284.81 L211.95,282.37 L212.93,279.79 L213.58,277.20 L213.91,274.56 L213.91,271.83 L213.68,269.19 L213.36,266.60 L212.93,264.01 L212.48,261.38 L212.15,258.64 L212.61,256.49 L213.78,255.22 L215.54,254.88 L217.26,254.88 L218.99,254.88 L220.75,254.88 L222.57,254.88 L224.33,254.88 L226.06,254.88 L227.79,254.88 L229.54,254.88 L231.37,254.88 L233.13,254.88 L234.95,254.88 L236.48,254.39 L237.46,253.08 L237.79,250.83 L237.79,248.19 L237.79,245.46 L237.79,242.82 L237.79,240.23 L237.79,237.65 L237.79,235.01 L237.79,232.28 L237.79,229.64 L237.79,226.90 L237.79,224.27 L237.79,221.68 L237.79,219.09 L237.23,217.29 L236.06,216.65 L234.30,217.14 L232.57,217.92 L230.85,218.60 L229.09,219.09 L227.26,219.24 L225.50,219.09 L223.68,218.41 L221.92,217.43 L220.20,215.82 L218.47,213.72 L217.04,211.08 L215.86,208.35 L215.31,205.71 L214.89,203.12 L214.89,200.54 L214.98,197.90 L215.54,195.17 L216.29,192.53 L217.59,189.79 L219.12,187.35 L220.85,185.40 L222.57,184.08 L224.33,183.25 L226.16,182.76 L227.92,182.62 L229.64,182.76 L231.37,183.25 L233.13,183.94 L234.95,184.72 L236.48,184.91 L237.46,183.94 L237.79,181.79 L237.79,179.20 L237.79,176.61 L237.79,173.97 L237.79,171.24 L237.79,168.60 L237.79,166.02 L237.79,163.43 L237.79,160.79 L237.79,158.06 L237.79,155.42 L237.79,152.69 L237.79,150.05 L237.23,148.10 L236.06,147.12 L234.30,146.97 L232.48,146.97 L230.72,146.97 L228.99,146.97 L227.26,146.97 L225.50,146.97 L223.68,146.97 L221.92,146.97 L220.10,146.97 L218.34,146.97 L216.61,146.97 L214.89,146.97 L213.13,146.97 L211.30,146.97 L209.54,146.97 L207.82,146.97 L206.09,146.97 L204.33,146.97 L202.51,146.97 L200.75,146.97 L198.93,146.97 L197.17,146.97 L195.44,146.97 L193.71,146.97 L191.95,146.97 L190.13,146.97 L188.37,146.97 L186.64,146.97 L184.92,146.97 L183.16,146.97 L181.34,146.97 L179.58,146.97 L177.75,146.97 L175.99,146.97 L174.69,146.97 Z" fill="#6e9dea"/>
-  <path d="M281.66,94.58 L281.34,96.34 L280.88,98.97 L280.36,101.56 L279.90,104.00 L279.38,106.59 L278.93,109.23 L278.40,111.82 L277.95,114.26 L277.43,116.85 L276.97,119.48 L276.55,122.07 L276.12,124.51 L275.47,127.10 L274.36,128.42 L272.96,128.42 L271.34,126.95 L269.61,125.34 L267.85,123.88 L266.12,122.71 L264.50,122.07 L262.77,121.92 L261.01,122.07 L259.28,122.56 L257.56,123.39 L255.80,124.66 L254.07,126.61 L252.67,128.91 L251.47,131.49 L250.72,134.13 L250.16,136.72 L250.07,139.16 L250.07,141.75 L250.39,144.38 L250.91,146.97 L251.79,149.41 L253.09,151.86 L254.63,154.15 L256.35,155.91 L257.98,157.08 L259.71,157.71 L261.47,158.06 L263.19,158.20 L264.82,158.20 L266.55,158.20 L268.31,158.69 L269.28,160.01 L269.48,162.26 L268.96,164.89 L268.50,167.48 L268.08,169.92 L267.65,172.51 L267.20,175.15 L266.68,177.73 L266.22,180.18 L265.80,182.76 L265.37,185.40 L264.92,187.99 L264.40,190.43 L263.94,193.02 L264.17,195.17 L265.15,196.63 L266.78,197.41 L268.50,198.10 L270.26,198.88 L271.99,199.56 L273.71,200.34 L275.47,201.03 L277.20,201.66 L278.83,202.29 L280.55,202.98 L282.31,203.76 L284.04,204.44 L285.67,205.08 L286.97,204.59 L287.72,203.12 L287.85,200.68 L287.72,198.24 L287.62,195.65 L287.72,193.02 L287.95,190.43 L288.37,187.99 L289.15,185.40 L290.23,182.76 L291.63,180.32 L293.16,178.37 L294.89,176.90 L296.64,175.93 L298.37,175.29 L300.10,175.15 L301.86,175.29 L303.58,175.93 L305.21,176.90 L306.94,178.71 L308.57,181.01 L309.87,183.59 L310.75,186.04 L311.30,188.62 L311.73,191.26 L311.82,193.85 L311.73,196.29 L311.30,198.88 L310.65,201.51 L309.77,204.10 L308.79,206.54 L307.72,209.13 L307.49,211.28 L308.14,212.74 L309.77,213.53 L311.50,214.21 L313.26,214.99 L314.98,215.67 L316.71,216.46 L318.47,217.14 L320.20,217.77 L321.82,218.41 L323.55,219.09 L325.31,219.87 L327.04,220.56 L328.66,221.34 L330.39,222.02 L331.92,222.02 L333.00,220.85 L333.65,218.75 L334.10,216.16 L334.63,213.53 L335.08,210.94 L335.50,208.50 L335.93,205.91 L336.38,203.27 L336.91,200.68 L337.36,198.24 L337.88,195.65 L338.34,193.02 L338.86,190.43 L339.41,187.84 L339.97,185.21 L340.39,182.62 L340.81,180.18 L341.27,177.59 L341.79,174.95 L342.25,172.36 L342.77,169.92 L343.22,167.33 L343.75,164.70 L344.20,162.11 L344.72,159.67 L345.18,157.08 L345.70,154.44 L346.16,151.86 L346.58,149.41 L347.00,146.83 L347.46,144.19 L347.98,141.60 L348.44,139.01 L348.96,136.38 L349.41,133.79 L349.74,131.35 L349.74,128.76 L349.41,126.12 L348.53,123.54 L347.23,121.44 L345.50,119.78 L343.75,118.80 L342.02,118.16 L340.39,117.53 L338.66,116.70 L336.91,115.87 L335.18,115.23 L333.55,114.60 L331.82,113.92 L330.07,113.13 L328.34,112.45 L326.71,111.82 L324.98,111.18 L323.22,110.50 L321.50,109.72 L319.77,109.03 L318.01,108.25 L316.29,107.57 L314.66,106.93 L312.93,106.30 L311.17,105.62 L309.45,104.83 L307.82,104.15 L306.09,103.37 L304.33,102.69 L302.61,101.90 L300.98,101.22 L299.25,100.44 L297.49,99.76 L295.77,99.12 L294.14,98.49 L292.41,97.80 L290.65,97.02 L288.93,96.34 L287.30,95.70 L285.57,95.07 L283.81,94.38 L282.51,93.90 Z" fill="#2d6ad5"/>
-  <path d="M275.67,219.38 L274.59,219.87 L272.96,220.70 L271.34,221.83 L269.71,223.49 L268.18,225.59 L267.00,228.17 L266.12,230.81 L265.57,233.40 L265.24,235.84 L265.15,238.28 L265.24,240.72 L265.57,243.16 L266.12,245.61 L266.68,248.05 L267.10,250.49 L266.87,252.78 L266.03,254.25 L264.40,254.88 L262.64,254.88 L260.91,254.88 L259.28,254.88 L257.65,254.88 L256.03,254.88 L254.40,254.88 L252.77,254.88 L251.14,254.88 L249.51,254.88 L247.88,254.88 L246.48,255.22 L245.60,256.35 L245.28,258.45 L245.28,261.08 L245.28,263.67 L245.28,266.11 L245.28,268.55 L245.28,271.00 L245.28,273.44 L245.28,275.88 L245.60,277.83 L246.48,278.81 L247.88,278.96 L249.51,278.81 L251.24,278.81 L253.00,278.96 L254.72,279.44 L256.35,280.27 L257.98,281.25 L259.61,282.37 L261.24,283.84 L262.87,285.79 L264.40,288.09 L265.80,290.53 L266.87,292.97 L267.85,295.41 L268.63,298.00 L269.28,300.63 L269.71,303.22 L269.93,305.66 L270.03,308.11 L269.93,310.55 L269.80,312.99 L269.48,315.43 L269.06,317.87 L268.40,320.31 L267.65,322.75 L266.78,325.20 L265.57,327.64 L264.07,330.22 L262.31,332.52 L260.59,334.47 L258.96,335.79 L257.33,336.91 L255.70,337.74 L254.07,338.38 L252.44,338.72 L250.81,338.87 L249.19,338.72 L247.56,338.38 L246.25,338.53 L245.50,339.84 L245.28,342.14 L245.28,344.73 L245.28,347.17 L245.28,349.61 L245.28,352.05 L245.28,354.49 L245.28,356.93 L245.28,359.38 L245.70,361.18 L246.68,362.16 L248.21,362.30 L249.84,362.30 L251.56,362.30 L253.32,362.30 L255.05,362.30 L256.68,362.30 L258.31,362.30 L259.93,362.30 L261.56,362.30 L263.19,362.30 L264.82,362.30 L266.45,362.30 L268.08,362.30 L269.71,362.30 L271.43,362.30 L273.19,362.30 L274.92,362.30 L276.55,362.30 L278.18,362.30 L279.80,362.30 L281.43,362.30 L283.06,362.30 L284.69,362.30 L286.32,362.30 L287.95,362.30 L289.58,362.30 L291.21,362.30 L292.93,362.30 L294.69,362.30 L296.42,362.30 L298.05,362.30 L299.67,362.30 L301.30,362.30 L302.93,361.96 L304.56,361.33 L306.09,359.86 L307.39,357.91 L308.24,355.47 L308.70,353.03 L308.79,350.44 L308.79,347.80 L308.79,345.21 L308.79,342.77 L308.79,340.33 L308.79,337.89 L308.79,335.45 L308.79,333.01 L308.79,330.57 L308.79,328.12 L308.79,325.68 L308.79,323.24 L308.79,320.80 L308.79,318.21 L308.79,315.58 L308.79,312.99 L308.79,310.55 L308.79,308.11 L308.79,305.66 L308.79,303.22 L308.79,300.78 L308.79,298.34 L308.79,295.90 L308.79,293.46 L308.79,291.02 L308.79,288.43 L308.79,285.79 L308.79,283.20 L308.79,280.76 L308.79,278.32 L308.79,275.88 L308.79,273.44 L308.79,271.00 L308.79,268.55 L308.79,266.11 L308.79,263.67 L308.79,261.23 L308.79,258.64 L308.47,256.49 L307.59,255.22 L306.19,254.88 L304.56,254.88 L302.93,254.88 L301.30,254.88 L299.67,254.88 L298.05,254.88 L296.42,254.88 L294.79,254.88 L293.16,254.88 L291.53,254.88 L289.80,254.88 L288.18,254.25 L287.30,252.78 L287.30,250.49 L287.85,248.05 L288.37,245.61 L288.83,243.16 L289.15,240.72 L289.25,238.28 L289.15,235.84 L288.93,233.40 L288.37,230.96 L287.52,228.37 L286.22,225.73 L284.69,223.49 L283.06,221.83 L281.43,220.70 L279.80,219.87 L278.18,219.38 L276.97,219.24 Z" fill="#5187e1"/>
-  <path d="M167.43,267.43 L167.43,269.04 L167.43,271.48 L167.43,273.93 L167.43,276.37 L167.43,278.81 L167.43,281.25 L167.43,283.84 L167.43,286.47 L167.43,289.06 L167.43,291.50 L167.43,293.95 L167.43,296.39 L167.43,298.83 L167.43,301.27 L167.43,303.71 L167.43,306.15 L167.43,308.59 L167.43,311.04 L167.43,313.48 L167.43,315.92 L167.43,318.36 L167.43,320.95 L167.43,323.58 L167.43,326.17 L167.43,328.61 L167.43,331.05 L167.43,333.50 L167.43,335.94 L167.43,338.38 L167.43,340.82 L167.43,343.26 L167.43,345.70 L167.43,348.14 L167.43,350.59 L167.52,353.03 L167.98,355.47 L168.83,357.91 L170.26,360.01 L171.89,361.47 L173.62,362.16 L175.24,362.30 L176.87,362.30 L178.50,362.30 L180.13,362.30 L181.76,362.30 L183.39,362.30 L185.02,362.30 L186.64,362.30 L188.27,362.30 L189.90,362.30 L191.53,362.30 L193.16,362.30 L194.89,362.30 L196.64,362.30 L198.37,362.30 L200.00,362.30 L201.63,362.30 L203.26,362.30 L204.89,362.30 L206.51,362.30 L208.14,362.30 L209.77,362.30 L211.40,362.30 L213.03,362.30 L214.66,362.30 L216.29,362.30 L217.92,362.30 L219.64,362.30 L221.40,362.30 L223.13,362.30 L224.76,362.30 L226.38,362.30 L228.01,362.30 L229.64,362.30 L231.27,362.30 L232.90,362.30 L234.53,362.30 L236.16,362.30 L237.23,361.47 L237.79,359.86 L237.79,357.42 L237.79,354.98 L237.79,352.54 L237.79,349.95 L237.79,347.31 L237.79,344.73 L237.79,342.29 L237.79,339.84 L237.79,337.40 L237.79,334.96 L237.79,332.52 L237.79,330.08 L237.79,327.64 L238.01,325.20 L238.76,323.58 L240.07,323.10 L241.69,323.73 L243.32,324.71 L245.05,325.68 L246.81,326.51 L248.53,327.00 L250.16,327.00 L251.79,326.66 L253.42,326.17 L255.05,325.34 L256.68,324.07 L258.31,322.12 L259.71,319.82 L260.81,317.38 L261.47,314.94 L261.89,312.50 L262.12,310.06 L262.12,307.62 L261.79,305.03 L261.24,302.39 L260.36,299.80 L259.28,297.51 L257.88,295.41 L256.35,293.60 L254.72,292.33 L253.09,291.50 L251.47,291.16 L249.84,291.02 L248.21,291.16 L246.58,291.65 L244.95,292.48 L243.32,293.31 L241.69,294.09 L240.07,294.58 L238.76,293.95 L238.01,292.14 L237.79,289.55 L237.79,287.11 L237.79,284.67 L237.79,282.23 L237.79,279.79 L237.79,277.34 L237.79,274.90 L237.79,272.46 L237.79,270.02 L237.36,268.07 L236.38,266.94 L234.85,266.60 L233.22,266.60 L231.50,266.60 L229.74,266.60 L228.01,266.60 L226.38,266.60 L224.76,266.60 L223.13,266.60 L222.15,267.43 L221.73,269.04 L221.82,271.48 L221.82,273.93 L221.73,276.37 L221.50,278.81 L221.07,281.25 L220.52,283.69 L219.77,286.13 L218.79,288.72 L217.49,291.36 L215.96,293.95 L214.33,296.24 L212.70,298.00 L211.07,299.46 L209.45,300.44 L207.82,301.42 L206.19,302.10 L204.56,302.59 L202.93,302.73 L201.30,302.73 L199.67,302.59 L198.05,302.25 L196.42,301.61 L194.79,300.78 L193.06,299.66 L191.30,298.19 L189.58,296.24 L187.95,293.95 L186.42,291.50 L185.11,289.06 L184.14,286.62 L183.39,284.18 L182.83,281.74 L182.41,279.30 L182.18,276.86 L182.08,274.41 L182.08,271.97 L182.18,269.53 L181.86,267.72 L180.88,266.75 L179.25,266.60 L177.52,266.60 L175.90,266.60 L174.27,266.60 L172.64,266.60 L171.01,266.60 L169.38,266.60 L168.18,266.60 Z" fill="#71a0ed"/>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="500"
+   height="500"
+   viewBox="0 0 500 500"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.2099419"
+     inkscape:cx="238.4412"
+     inkscape:cy="279.35225"
+     inkscape:window-width="1235"
+     inkscape:window-height="975"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <title
+     id="title1">Puzzle CI Logo</title>
+  <path
+     d="m 144.04047,151.41 -1.5919,0.79 -2.1855,1.46 -2.06408,2.15 -1.32209,2.44 -0.75548,2.73 L 136,163.62 v 2.59 2.59 2.63 2.74 2.64 2.58 2.59 2.64 2.73 2.64 2.73 2.64 2.59 2.59 2.63 2.74 2.63 2.59 2.59 2.64 2.73 2.64 2.73 2.64 2.59 2.58 2.64 2.73 2.64 2.59 2.59 2.63 2.74 2.64 2.73 l 0.74199,1.81 1.457,0.97 h 2.3204 2.37437 2.45531 2.37437 2.3339 2.33389 2.37437 2.45531 2.37437 2.45531 2.37437 l 2.33389,0.34 1.44351,1.27 0.4452,2.15 -0.4452,2.74 -0.70152,2.63 -0.60708,2.59 -0.5801,2.59 -0.31029,2.64 0.17538,2.73 0.5801,2.64 1.01181,2.73 1.3086,2.64 1.76728,2.59 2.19899,2.1 2.36088,1.66 2.4688,0.97 2.37437,0.49 2.3204,0.15 2.3339,-0.15 2.37437,-0.49 2.45531,-1.17 2.37437,-1.61 2.19899,-2.3 1.75379,-2.44 1.32209,-2.58 0.8769,-2.59 0.44519,-2.64 v -2.73 l -0.31028,-2.64 -0.43171,-2.59 -0.5801,-2.59 -0.60708,-2.63 -0.4452,-2.74 0.62058,-2.15 1.57841,-1.27 2.37437,-0.34 h 2.32041 2.33389 2.37437 2.45531 2.37437 2.33389 2.3339 2.36088 2.4688 2.37437 2.45531 l 2.06408,-0.49 1.32209,-1.31 0.4452,-2.25 v -2.64 -2.73 -2.64 -2.59 -2.58 -2.64 -2.73 -2.64 -2.74 -2.63 -2.59 -2.59 l -0.75549,-1.8 -1.57841,-0.64 -2.37437,0.49 -2.33389,0.78 -2.32041,0.68 -2.37437,0.49 -2.4688,0.15 -2.37437,-0.15 -2.45531,-0.68 -2.37437,-0.98 -2.3204,-1.61 -2.3339,-2.1 -1.92917,-2.64 -1.59191,-2.73 -0.74199,-2.64 -0.56661,-2.59 v -2.58 l 0.12142,-2.64 0.75548,-2.73 1.01181,-2.64 1.75379,-2.74 2.06408,-2.44 2.3339,-1.95 2.3204,-1.32 2.37437,-0.83 2.4688,-0.49 2.37437,-0.14 2.3204,0.14 2.3339,0.49 2.37437,0.69 2.45531,0.78 2.06408,0.19 1.32209,-0.97 0.4452,-2.15 v -2.59 -2.59 -2.64 -2.73 -2.64 -2.58 -2.59 -2.64 -2.73 -2.64 -2.73 -2.64 l -0.75549,-1.95 -1.57841,-0.98 -2.37437,-0.15 h -2.45531 -2.37437 -2.33389 -2.3339 -2.37437 -2.45531 -2.37437 -2.45531 -2.37437 -2.33389 -2.32041 -2.37436 -2.46881 -2.37436 -2.32041 -2.33389 -2.37437 -2.45531 -2.37437 -2.45531 -2.37437 -2.3339 -2.33389 -2.37437 -2.45531 -2.37437 -2.3339 -2.3204 -2.37437 -2.45531 -2.37437 -2.4688 -2.37437 -1.75379 z"
+     fill="#6e9dea"
+     id="path1"
+     style="stroke-width:1.1615" />
+  <path
+     d="m 290.10456,98.68 -0.4317,1.76 -0.62058,2.63 -0.70152,2.59 -0.62057,2.44 -0.70152,2.59 -0.60708,2.64 -0.71501,2.59 -0.60708,2.44 -0.70152,2.59 -0.62057,2.63 -0.56661,2.59 -0.5801,2.44 -0.8769,2.59 -1.49747,1.32 h -1.8887 l -2.1855,-1.47 -2.3339,-1.61 -2.37436,-1.46 -2.3339,-1.17 -2.1855,-0.64 -2.33389,-0.15 -2.37437,0.15 -2.3339,0.49 -2.3204,0.83 -2.37437,1.27 -2.33389,1.95 -1.88871,2.3 -1.61888,2.58 -1.01181,2.64 -0.75548,2.59 -0.12141,2.44 v 2.59 l 0.4317,2.63 0.70152,2.59 1.18718,2.44 1.7538,2.45 2.07757,2.29 2.3204,1.76 2.19899,1.17 2.3339,0.63 2.37436,0.35 2.32041,0.14 h 2.19899 2.33389 l 2.37437,0.49 1.3086,1.32 0.26981,2.25 -0.70151,2.63 -0.62058,2.59 -0.56661,2.44 -0.5801,2.59 -0.60708,2.64 -0.70152,2.58 -0.62057,2.45 -0.56661,2.58 -0.5801,2.64 -0.60709,2.59 -0.70151,2.44 -0.62058,2.59 0.31029,2.15 1.32209,1.46 2.19899,0.78 2.3204,0.69 2.37437,0.78 2.3339,0.68 2.3204,0.78 2.37437,0.69 2.33389,0.63 2.19899,0.63 2.32041,0.69 2.37437,0.78 2.33389,0.68 2.19899,0.64 1.75379,-0.49 1.01181,-1.47 0.17538,-2.44 -0.17538,-2.44 -0.13491,-2.59 0.13491,-2.63 0.31028,-2.59 0.56662,-2.44 1.05227,-2.59 1.457,-2.64 1.8887,-2.44 2.06408,-1.95 2.3339,-1.47 2.36088,-0.97 2.33389,-0.64 2.3339,-0.14 2.37436,0.14 2.32041,0.64 2.19899,0.97 2.33389,1.81 2.19899,2.3 1.7538,2.58 1.18718,2.45 0.74199,2.58 0.5801,2.64 0.12142,2.59 -0.12142,2.44 -0.5801,2.59 -0.8769,2.63 -1.18718,2.59 -1.32209,2.44 -1.44351,2.59 -0.31029,2.15 0.8769,1.46 2.19899,0.79 2.33389,0.68 2.37437,0.78 2.32041,0.68 2.33389,0.79 2.37437,0.68 2.33389,0.63 2.1855,0.64 2.3339,0.68 2.37437,0.78 2.33389,0.69 2.1855,0.78 2.33389,0.68 h 2.06409 l 1.45699,-1.17 0.8769,-2.1 0.60708,-2.59 0.71501,-2.63 0.60708,-2.59 0.56661,-2.44 0.58011,-2.59 0.60708,-2.64 0.71501,-2.59 0.60708,-2.44 0.70152,-2.59 0.62057,-2.63 0.70152,-2.59 0.74199,-2.59 0.75548,-2.63 0.56661,-2.59 0.56661,-2.44 0.62057,-2.59 0.70152,-2.64 0.62057,-2.59 0.70152,-2.44 0.60708,-2.59 0.71501,-2.63 0.60709,-2.59 0.70151,-2.44 0.62058,-2.59 0.70151,-2.64 0.62058,-2.58 0.56661,-2.45 0.56661,-2.58 0.62057,-2.64 0.70152,-2.59 0.62057,-2.59 0.70152,-2.63 0.60708,-2.59 0.4452,-2.44 v -2.59 l -0.4452,-2.64 -1.18718,-2.58 -1.75379,-2.1 -2.3339,-1.66 -2.36088,-0.98 -2.33389,-0.64 -2.19899,-0.63 -2.3339,-0.83 -2.36087,-0.83 -2.3339,-0.64 -2.19899,-0.63 -2.33389,-0.68 -2.36088,-0.79 -2.33389,-0.68 -2.19899,-0.63 -2.3339,-0.64 -2.37437,-0.68 -2.3204,-0.78 -2.3339,-0.69 -2.37436,-0.78 -2.32041,-0.68 -2.19899,-0.64 -2.33389,-0.63 -2.37437,-0.68 -2.32041,-0.79 -2.19898,-0.68 -2.3339,-0.78 -2.37437,-0.68 -2.3204,-0.79 -2.19899,-0.68 -2.3339,-0.78 -2.37436,-0.68 -2.32041,-0.64 -2.19899,-0.63 -2.33389,-0.69 -2.37437,-0.78 -2.3204,-0.68 -2.19899,-0.64 -2.3339,-0.63 -2.37437,-0.69 -1.75379,-0.48 z"
+     fill="#2d6ad5"
+     id="path2"
+     style="stroke-width:1.1615" />
+  <path
+     d="m 282.02361,223.48 -1.45699,0.49 -2.19899,0.83 -2.1855,1.13 -2.19899,1.66 -2.06408,2.1 -1.59191,2.58 -1.18718,2.64 -0.74199,2.59 -0.44519,2.44 -0.12142,2.44 0.12142,2.44 0.44519,2.44 0.74199,2.45 0.75548,2.44 0.56661,2.44 -0.31028,2.29 -1.13323,1.47 -2.19898,0.63 h -2.37437 -2.3339 -2.19899 -2.19898 -2.1855 -2.19899 -2.19899 -2.19899 -2.19898 -2.19899 l -1.8887,0.34 -1.18719,1.13 -0.4317,2.1 v 2.63 2.59 2.44 2.44 2.45 2.44 2.44 l 0.4317,1.95 1.18719,0.98 1.8887,0.15 2.19899,-0.15 h 2.33389 l 2.37437,0.15 2.3204,0.48 2.19899,0.83 2.19899,0.98 2.19899,1.12 2.19899,1.47 2.19898,1.95 2.06409,2.3 1.8887,2.44 1.44351,2.44 1.32209,2.44 1.05227,2.59 0.8769,2.63 0.5801,2.59 0.2968,2.44 0.1349,2.45 -0.1349,2.44 -0.17538,2.44 -0.43171,2.44 -0.56661,2.44 -0.89038,2.44 -1.01181,2.44 -1.17369,2.45 -1.63238,2.44 -2.02361,2.58 -2.37437,2.3 -2.3204,1.95 -2.19899,1.32 -2.19899,1.12 -2.19899,0.83 -2.19898,0.64 -2.19899,0.34 -2.19899,0.15 -2.1855,-0.15 -2.19899,-0.34 -1.76728,0.15 -1.01181,1.31 -0.29679,2.3 v 2.59 2.44 2.44 2.44 2.44 2.44 2.45 l 0.56661,1.8 1.32209,0.98 2.06408,0.14 h 2.19899 2.3204 2.37437 2.3339 2.19899 2.19898 2.1855 2.19899 2.19899 2.19899 2.19898 2.19899 2.19899 2.32041 2.37436 2.3339 2.19899 2.19899 2.18549 2.19899 2.19899 2.19899 2.19899 2.19898 2.19899 2.19899 2.32041 2.37436 2.3339 2.19899 2.1855 2.19898 l 2.19899,-0.34 2.19899,-0.63 2.06408,-1.47 1.7538,-1.95 1.14671,-2.44 0.62057,-2.44 0.12142,-2.59 v -2.64 -2.59 -2.44 -2.44 -2.44 -2.44 -2.44 -2.44 -2.45 -2.44 -2.44 -2.44 -2.59 -2.63 -2.59 -2.44 -2.44 -2.45 -2.44 -2.44 -2.44 -2.44 -2.44 -2.44 -2.59 -2.64 -2.59 -2.44 -2.44 -2.44 -2.44 -2.44 -2.45 -2.44 -2.44 -2.44 -2.59 l -0.43171,-2.15 -1.18718,-1.27 -1.8887,-0.34 h -2.19899 -2.19899 -2.19899 -2.19898 -2.1855 -2.19899 -2.19899 -2.19899 -2.19899 -2.33389 l -2.1855,-0.63 -1.18718,-1.47 v -2.29 l 0.74199,-2.44 0.70152,-2.44 0.62057,-2.45 0.4317,-2.44 0.13491,-2.44 -0.13491,-2.44 -0.29679,-2.44 -0.75548,-2.44 -1.14672,-2.59 -1.75379,-2.64 -2.06408,-2.24 -2.19899,-1.66 -2.19899,-1.13 -2.19899,-0.83 -2.18549,-0.49 -1.63238,-0.14 z"
+     fill="#5187e1"
+     id="path3"
+     style="stroke-width:1.1615" />
+  <path
+     d="m 136,271.53 v 1.61 2.44 2.45 2.44 2.44 2.44 2.59 2.63 2.59 2.44 2.45 2.44 2.44 2.44 2.44 2.44 2.44 2.45 2.44 2.44 2.44 2.59 2.63 2.59 2.44 2.44 2.45 2.44 2.44 2.44 2.44 2.44 2.44 2.45 l 0.12142,2.44 0.62057,2.44 1.14671,2.44 1.92918,2.1 2.19898,1.46 2.3339,0.69 2.1855,0.14 h 2.19898 2.19899 2.19899 2.19899 2.19899 2.19899 2.18549 2.19899 2.19899 2.19899 2.19899 2.33389 2.36088 2.33389 2.19899 2.19899 2.19899 2.19899 2.1855 2.19898 2.19899 2.19899 2.19899 2.19899 2.19899 2.19898 2.32041 2.37437 2.33389 2.19899 2.1855 2.19899 2.19898 2.19899 2.19899 2.19899 2.19899 l 1.4435,-0.83 0.75549,-1.61 v -2.44 -2.44 -2.44 -2.59 -2.64 -2.58 -2.44 -2.45 -2.44 -2.44 -2.44 -2.44 -2.44 l 0.29679,-2.44 1.01181,-1.62 1.76728,-0.48 2.1855,0.63 2.19899,0.98 2.33389,0.97 2.37437,0.83 2.3204,0.49 h 2.19899 l 2.19899,-0.34 2.19899,-0.49 2.19899,-0.83 2.19899,-1.27 2.19898,-1.95 1.88871,-2.3 1.48398,-2.44 0.89038,-2.44 0.56661,-2.44 0.31029,-2.44 v -2.44 l -0.44519,-2.59 -0.74199,-2.64 -1.18719,-2.59 -1.457,-2.29 -1.8887,-2.1 -2.06408,-1.81 -2.19899,-1.27 -2.19898,-0.83 -2.1855,-0.34 -2.19899,-0.14 -2.19899,0.14 -2.19899,0.49 -2.19899,0.83 -2.19898,0.83 -2.19899,0.78 -2.1855,0.49 -1.76728,-0.63 -1.01181,-1.81 -0.29679,-2.59 v -2.44 -2.44 -2.44 -2.44 -2.45 -2.44 -2.44 -2.44 l -0.58011,-1.95 -1.32209,-1.13 -2.06408,-0.34 h -2.19899 -2.3204 -2.37437 -2.33389 -2.19899 -2.1855 -2.19899 l -1.32209,0.83 -0.56661,1.61 0.12142,2.44 v 2.45 l -0.12142,2.44 -0.31029,2.44 -0.5801,2.44 -0.74199,2.44 -1.0118,2.44 -1.32209,2.59 -1.7538,2.64 -2.06408,2.59 -2.19899,2.29 -2.19899,1.76 -2.19898,1.46 -2.1855,0.98 -2.19899,0.98 -2.19899,0.68 -2.19899,0.49 -2.19898,0.14 h -2.19899 l -2.19899,-0.14 -2.1855,-0.34 -2.19899,-0.64 -2.19898,-0.83 -2.3339,-1.12 -2.37437,-1.47 -2.3204,-1.95 -2.19899,-2.29 -2.06408,-2.45 -1.76729,-2.44 -1.3086,-2.44 -1.0118,-2.44 -0.75548,-2.44 -0.56661,-2.44 -0.31029,-2.44 -0.13491,-2.45 v -2.44 l 0.13491,-2.44 -0.4317,-1.81 -1.32209,-0.97 -2.19899,-0.15 h -2.3339 -2.1855 -2.19898 -2.19899 -2.19899 -2.19899 -1.61889 z"
+     fill="#71a0ed"
+     id="path4"
+     style="stroke-width:1.1615" />
+</svg>
diff --git a/index.html b/index.html
index 7bf4237..84adf40 100644
--- a/index.html
+++ b/index.html
@@ -7,62 +7,152 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      /* Blue Light Puzzle Theme - Intelligent, Precise, Cool */
-      --primary: #3b82f6;
-      --primary-light: #60a5fa;
-      --primary-dark: #1d4ed8;
-      --secondary: #06b6d4;
-      --secondary-light: #22d3ee;
-      --accent: #0ea5e9;
-      --accent-warn: #38bdf8;
-      --accent-danger: #f472b6;
-
-      /* Neutrals */
-      --bg-primary: #f8fafc;
-      --bg-secondary: #e2e8f0;
-      --bg-card: #ffffff;
-      --bg-overlay: rgba(14, 165, 233, 0.08);
-
-      /* Text */
-      --text-primary: #0f172a;
-      --text-secondary: #475569;
-      --text-muted: #94a3b8;
-
-      /* Shadows with Blue Glow */
-      --shadow-sm: 0 2px 8px rgba(14, 165, 233, 0.06);
-      --shadow-md: 0 4px 20px rgba(14, 165, 233, 0.08);
-      --shadow-lg: 0 8px 40px rgba(14, 165, 233, 0.12);
-      --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.25);
-      --shadow-blue: 0 4px 20px rgba(59, 130, 246, 0.3);
-
-      /* Spacing */
-      --space-1: 4px;
-      --space-2: 8px;
-      --space-3: 12px;
-      --space-4: 16px;
-      --space-5: 20px;
-      --space-6: 24px;
-      --space-8: 32px;
-      --space-10: 40px;
-      --space-12: 48px;
-      --space-16: 64px;
-
-      /* Border Radius */
-      --radius-sm: 8px;
-      --radius-md: 12px;
-      --radius-lg: 20px;
-      --radius-xl: 28px;
-      --radius-full: 9999px;
-
-      /* Transitions */
-      --transition-fast: 150ms ease;
-      --transition-base: 250ms ease;
-      --transition-slow: 400ms ease;
-      --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  <script src="https://cdn.tailwindcss.com"></script>
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+    <symbol id="icon-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+      <path d="M2 17l10 5 10-5"/>
+      <path d="M2 12l10 5 10-5"/>
+    </symbol>
+    <symbol id="icon-shield-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+      <path d="M9 12l2 2 4-4"/>
+    </symbol>
+    <symbol id="icon-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M5 12h14"/>
+      <path d="M12 5l7 7-7 7"/>
+    </symbol>
+    <symbol id="icon-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+    </symbol>
+    <symbol id="icon-fire" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 23c-3.866 0-7-3.134-7-7 0-2.5 1.5-4.5 3-6 .5-.5 1.5-2 1.5-3.5 0 1.5.5 2 1.5 2.5 0-3 2-6.5 4-8.5.5-.5 1.5-.5 2 0 1.5 2 3 5 3 8.5 0 1.5.5 2.5 1.5 3 1.5 1.5 3 3.5 3 6 0 3.866-3.134 7-7 7z"/>
+    </symbol>
+    <symbol id="icon-cog" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/>
+      <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
+    </symbol>
+    <symbol id="icon-document" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+      <path d="M14 2v6h6"/>
+      <path d="M16 13H8"/>
+      <path d="M16 17H8"/>
+      <path d="M10 9H8"/>
+    </symbol>
+    <symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
+    </symbol>
+    <symbol id="icon-bolt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+    </symbol>
+    <symbol id="icon-light-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+    </symbol>
+    <symbol id="icon-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M3 6h18"/>
+      <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+    </symbol>
+    <symbol id="icon-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 12H5"/>
+      <path d="M12 19l-7-7 7-7"/>
+    </symbol>
+    <symbol id="icon-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M9 18l6-6-6-6"/>
+    </symbol>
+    <symbol id="icon-x-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M18 6L6 18"/>
+      <path d="M6 6l12 12"/>
+    </symbol>
+    <symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M20 6L9 17l-5-5"/>
+    </symbol>
+    <symbol id="icon-photo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+      <circle cx="8.5" cy="8.5" r="1.5"/>
+      <polyline points="21 15 16 10 5 21"/>
+    </symbol>
+    <symbol id="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="5"/>
+      <line x1="12" y1="1" x2="12" y2="3"/>
+      <line x1="12" y1="21" x2="12" y2="23"/>
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+      <line x1="1" y1="12" x2="3" y2="12"/>
+      <line x1="21" y1="12" x2="23" y2="12"/>
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+    </symbol>
+    <symbol id="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
+    </symbol>
+    <symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
+      <path d="M7 10l5 5 5-5"/>
+      <path d="M12 15V3"/>
+    </symbol>
+    <symbol id="icon-undo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M3 10h10a5 5 0 015 5v0a5 5 0 01-5 5H3"/>
+      <path d="M3 10l4-4"/>
+      <path d="M3 10l4 4"/>
+    </symbol>
+  </svg>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: { DEFAULT: '#3b82f6', light: '#60a5fa', dark: '#1d4ed8' },
+            secondary: { DEFAULT: '#06b6d4', light: '#22d3ee' },
+            accent: { DEFAULT: '#0ea5e9', warn: '#38bdf8', danger: '#f472b6' },
+            surface: { primary: '#f8fafc', secondary: '#e2e8f0', card: '#ffffff' },
+            text: { primary: '#0f172a', secondary: '#475569', muted: '#94a3b8' },
+          },
+          fontFamily: {
+            sans: ['Noto Sans KR', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+            display: ['Outfit', 'sans-serif'],
+          },
+          boxShadow: {
+            'sm': '0 2px 8px rgba(14, 165, 233, 0.06)',
+            'md': '0 4px 20px rgba(14, 165, 233, 0.08)',
+            'lg': '0 8px 40px rgba(14, 165, 233, 0.12)',
+            'glow': '0 0 30px rgba(14, 165, 233, 0.25)',
+            'blue': '0 4px 20px rgba(59, 130, 246, 0.3)',
+          },
+          animation: {
+            'float': 'float 3s ease-in-out infinite',
+            'fade-slide-up': 'fadeSlideUp 0.5s ease forwards',
+            'slide-in': 'slideIn 0.5s ease forwards',
+            'bounce-in': 'bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
+            'pulse-slow': 'pulse 2s ease-in-out infinite',
+          },
+          keyframes: {
+            float: {
+              '0%, 100%': { transform: 'translateY(0)' },
+              '50%': { transform: 'translateY(-10px)' },
+            },
+            fadeSlideUp: {
+              from: { opacity: '0', transform: 'translateY(20px)' },
+              to: { opacity: '1', transform: 'translateY(0)' },
+            },
+            slideIn: {
+              from: { opacity: '0', transform: 'translateY(30px)' },
+              to: { opacity: '1', transform: 'translateY(0)' },
+            },
+            bounceIn: {
+              '0%': { transform: 'scale(0)' },
+              '50%': { transform: 'scale(1.1)' },
+              '100%': { transform: 'scale(1)' },
+            },
+            pulse: {
+              '0%, 100%': { opacity: '0.5', transform: 'scale(1)' },
+              '50%': { opacity: '1', transform: 'scale(1.1)' },
+            },
+          },
+        },
+      },
     }
-
+  </script>
+  <style>
     [data-theme="dark"] {
       --bg-primary: #0a0e1a;
       --bg-secondary: #111827;
@@ -76,1798 +166,283 @@
       --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
       --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.3);
     }
+    [data-theme="dark"] body { background: var(--bg-primary); color: var(--text-primary); }
+    [data-theme="dark"] .bg-primary { background: var(--bg-primary); }
+    [data-theme="dark"] .bg-secondary { background: var(--bg-secondary); }
+    [data-theme="dark"] .bg-card { background: var(--bg-card); }
+    [data-theme="dark"] .bg-overlay { background: var(--bg-overlay); }
+    [data-theme="dark"] .text-primary { color: var(--text-primary); }
+    [data-theme="dark"] .text-secondary { color: var(--text-secondary); }
+    [data-theme="dark"] .text-muted { color: var(--text-muted); }
+    [data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-sm); }
+    [data-theme="dark"] .shadow-md { box-shadow: var(--shadow-md); }
+    [data-theme="dark"] .shadow-lg { box-shadow: var(--shadow-lg); }
+    [data-theme="dark"] .shadow-glow { box-shadow: var(--shadow-glow); }
+    [data-theme="dark"] .border-secondary { border-color: var(--bg-secondary); }
+    [data-theme="dark"] .bg-primary { background-color: var(--primary); }
 
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      min-height: 100vh;
-      overflow-x: hidden;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    h1, h2, h3, h4 {
-      font-family: 'Outfit', sans-serif;
-      font-weight: 600;
-    }
-
-    /* Screen Container */
-    .screen {
-      position: fixed;
-      inset: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: var(--space-6);
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(20px);
-      transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow);
-      overflow-y: auto;
-    }
-
-    .screen.active {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    /* Onboarding Screen */
-    #onboarding {
-      background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
-    }
-
-    .onboarding-container {
-      max-width: 420px;
-      width: 100%;
-      text-align: center;
-    }
-
-    .logo {
-      width: 80px;
-      height: 80px;
-      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-      border-radius: var(--radius-lg);
-      margin: 0 auto var(--space-6);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: var(--shadow-glow);
-      animation: float 3s ease-in-out infinite;
-    }
-
-    @keyframes float {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-10px); }
-    }
-
-    .logo svg {
-      width: 48px;
-      height: 48px;
-      fill: white;
-    }
-
-    .brand-name {
-      font-family: 'Outfit', sans-serif;
-      font-size: 2.5rem;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      margin-bottom: var(--space-2);
-    }
-
-    .tagline {
-      color: var(--text-secondary);
-      font-size: 1rem;
-      margin-bottom: var(--space-10);
-    }
-
-    /* Steps Indicator */
-    .steps-indicator {
-      display: flex;
-      gap: var(--space-2);
-      justify-content: center;
-      margin-bottom: var(--space-8);
-    }
-
-    .step-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: var(--radius-full);
-      background: var(--text-muted);
-      transition: all var(--transition-base);
-    }
-
+    /* Onboarding step-dot active state */
     .step-dot.active {
       width: 32px;
-      background: var(--primary);
+      background-color: #3b82f6;
     }
 
-    /* Onboarding Steps */
+    /* Onboarding step content visibility */
     .onboarding-step {
       display: none;
-      animation: fadeSlideUp 0.5s ease forwards;
     }
-
     .onboarding-step.active {
       display: block;
     }
 
-    @keyframes fadeSlideUp {
-      from { opacity: 0; transform: translateY(20px); }
-      to { opacity: 1; transform: translateY(0); }
+    /* Screen visibility */
+    .screen {
+      display: none;
+    }
+    .screen.active {
+      display: block;
     }
 
-    .step-illustration {
-      width: 200px;
-      height: 200px;
-      margin: 0 auto var(--space-8);
-      background: var(--bg-card);
-      border-radius: var(--radius-xl);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: var(--shadow-lg);
-      position: relative;
-      overflow: hidden;
-    }
-
-    .step-illustration::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(135deg, var(--bg-overlay) 0%, transparent 100%);
-    }
-
-    .step-illustration svg {
-      width: 100px;
-      height: 100px;
-      stroke: var(--primary);
-      fill: none;
-      stroke-width: 1.5;
-      position: relative;
-      z-index: 1;
-    }
-
-    .step-title {
-      font-size: 1.5rem;
-      margin-bottom: var(--space-3);
-      color: var(--text-primary);
-    }
-
-    .step-desc {
-      color: var(--text-secondary);
-      line-height: 1.7;
-      margin-bottom: var(--space-8);
-    }
-
-    .privacy-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-2);
-      background: var(--accent);
-      color: white;
-      padding: var(--space-2) var(--space-4);
-      border-radius: var(--radius-full);
-      font-size: 0.85rem;
-      font-weight: 500;
-      margin-bottom: var(--space-6);
-    }
-
-    .privacy-badge svg {
-      width: 16px;
-      height: 16px;
-      stroke: white;
-      fill: none;
-    }
-
-    /* Buttons */
+    /* Button styles */
     .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: var(--space-2);
-      padding: var(--space-4) var(--space-8);
-      border-radius: var(--radius-full);
+      gap: 0.5rem;
+      padding: 1rem 2rem;
+      border-radius: 9999px;
       font-size: 1rem;
       font-weight: 600;
-      font-family: 'Outfit', sans-serif;
       cursor: pointer;
       border: none;
-      transition: all var(--transition-base);
-      min-height: 56px;
-      min-width: 160px;
+      transition: all 0.25s ease;
     }
-
     .btn-primary {
-      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+      background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
       color: white;
-      box-shadow: var(--shadow-blue);
+      box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
     }
-
     .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4);
     }
-
-    .btn-primary:active {
-      transform: translateY(0);
-    }
-
     .btn-secondary {
-      background: var(--bg-card);
-      color: var(--text-primary);
-      box-shadow: var(--shadow-sm);
+      background: #e2e8f0;
+      color: #0f172a;
     }
-
-    .btn-secondary:hover {
-      background: var(--bg-secondary);
-    }
-
-    .btn-ghost {
-      background: transparent;
-      color: var(--text-secondary);
-      min-width: auto;
-      padding: var(--space-3) var(--space-4);
-    }
-
     .btn-icon {
-      width: 56px;
-      height: 56px;
-      padding: 0;
-      border-radius: var(--radius-lg);
-    }
-
-    .btn svg {
-      width: 20px;
-      height: 20px;
-      stroke: currentColor;
-      fill: none;
-    }
-
-    /* Navigation Buttons */
-    .nav-buttons {
-      display: flex;
-      gap: var(--space-4);
-      justify-content: center;
-      margin-top: var(--space-8);
-    }
-
-    /* Dashboard Screen */
-    #dashboard {
-      padding: 0;
-      justify-content: flex-start;
-    }
-
-    .dashboard-container {
-      width: 100%;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    /* Header */
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--space-4) var(--space-6);
-      background: var(--bg-card);
-      box-shadow: var(--shadow-sm);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-    }
-
-    .header-logo {
-      width: 40px;
-      height: 40px;
-      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-      border-radius: var(--radius-md);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: var(--shadow-blue);
-      position: relative;
-    }
-
-    .header-logo::before {
-      content: '';
-      position: absolute;
-      inset: -2px;
-      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-      border-radius: var(--radius-md);
-      filter: blur(8px);
-      opacity: 0.5;
-      z-index: -1;
-    }
-
-    .header-logo svg {
-      width: 24px;
-      height: 24px;
-      fill: white;
-      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
-    }
-
-    .header-title {
-      font-family: 'Outfit', sans-serif;
-      font-size: 1.25rem;
-      font-weight: 600;
-    }
-
-    .header-right {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-    }
-
-    /* Streak Badge */
-    .streak-badge {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      background: linear-gradient(135deg, var(--accent-warn) 0%, #f59e0b 100%);
-      color: white;
-      padding: var(--space-2) var(--space-4);
-      border-radius: var(--radius-full);
-      font-weight: 600;
-      font-size: 0.9rem;
-    }
-
-    .streak-badge svg {
-      width: 18px;
-      height: 18px;
-      fill: white;
-    }
-
-    /* Main Content */
-    .main-content {
-      flex: 1;
-      padding: var(--space-6);
-      display: grid;
-      grid-template-columns: 1fr 380px;
-      gap: var(--space-6);
-      max-width: 1400px;
-      margin: 0 auto;
-      width: 100%;
-    }
-
-    @media (max-width: 1024px) {
-      .main-content {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    /* Stats Cards */
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--space-4);
-      margin-bottom: var(--space-6);
-    }
-
-    @media (max-width: 640px) {
-      .stats-grid {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    .stat-card {
-      background: var(--bg-card);
-      border-radius: var(--radius-lg);
-      padding: var(--space-5);
-      box-shadow: var(--shadow-sm);
-      transition: transform var(--transition-base);
-    }
-
-    .stat-card:hover {
-      transform: translateY(-4px);
-      box-shadow: var(--shadow-md);
-    }
-
-    .stat-icon {
-      width: 48px;
-      height: 48px;
-      border-radius: var(--radius-md);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: var(--space-3);
-    }
-
-    .stat-icon svg {
-      width: 24px;
-      height: 24px;
-      stroke: currentColor;
-      fill: none;
-    }
-
-    .stat-icon.purple { background: rgba(59, 130, 246, 0.1); color: var(--primary); }
-    .stat-icon.pink { background: rgba(244, 114, 182, 0.1); color: var(--secondary); }
-    .stat-icon.green { background: rgba(52, 211, 153, 0.1); color: var(--accent); }
-
-    .stat-value {
-      font-family: 'Outfit', sans-serif;
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--text-primary);
-      margin-bottom: var(--space-1);
-    }
-
-    .stat-label {
-      color: var(--text-secondary);
-      font-size: 0.9rem;
-    }
-
-    /* File View */
-    .file-view {
-      background: var(--bg-card);
-      border-radius: var(--radius-xl);
-      box-shadow: var(--shadow-md);
-      padding: var(--space-6);
-      min-height: 400px;
-    }
-
-    .file-view-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: var(--space-5);
-    }
-
-    .file-view-title {
-      font-size: 1.25rem;
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-    }
-
-    .file-view-title svg {
-      width: 24px;
-      height: 24px;
-      stroke: var(--primary);
-      fill: none;
-    }
-
-    /* Tree View */
-    .tree-view {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-2);
-    }
-
-    .tree-item {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-      padding: var(--space-3) var(--space-4);
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-      cursor: pointer;
-      transition: all var(--transition-fast);
-    }
-
-    .tree-item:hover {
-      background: var(--bg-overlay);
-      transform: translateX(4px);
-    }
-
-    .tree-item.folder {
-      background: rgba(14, 165, 233, 0.08);
-    }
-
-    .tree-icon {
-      width: 32px;
-      height: 32px;
-      border-radius: var(--radius-sm);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
-
-    .tree-icon svg {
-      width: 18px;
-      height: 18px;
-      stroke: currentColor;
-      fill: none;
-      stroke-width: 2;
-    }
-
-    .tree-icon.folder-icon { background: rgba(59, 130, 246, 0.15); color: var(--primary); }
-    .tree-icon.file-icon { background: rgba(52, 211, 153, 0.15); color: var(--accent); }
-    .tree-icon.image-icon { background: rgba(244, 114, 182, 0.15); color: var(--secondary); }
-    .tree-icon.doc-icon { background: rgba(251, 191, 36, 0.15); color: var(--accent-warn); }
-
-    .tree-item-info {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .tree-item-name {
-      font-weight: 500;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .tree-item-meta {
-      font-size: 0.8rem;
-      color: var(--text-muted);
-    }
-
-    .tree-children {
-      margin-left: var(--space-8);
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-2);
-    }
-
-    /* AI Suggestions Panel */
-    .suggestions-panel {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-5);
-    }
-
-    .panel-card {
-      background: var(--bg-card);
-      border-radius: var(--radius-xl);
-      box-shadow: var(--shadow-md);
-      padding: var(--space-6);
-    }
-
-    .panel-header {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-      margin-bottom: var(--space-5);
-    }
-
-    .panel-icon {
       width: 44px;
       height: 44px;
-      border-radius: var(--radius-md);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
-    }
-
-    .panel-icon svg {
-      width: 22px;
-      height: 22px;
-      stroke: white;
-      fill: none;
-    }
-
-    .panel-title {
-      font-size: 1.1rem;
-    }
-
-    .panel-subtitle {
-      font-size: 0.85rem;
-      color: var(--text-secondary);
-    }
-
-    /* Suggestion Items */
-    .suggestion-list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-3);
-    }
-
-    .suggestion-item {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-      padding: var(--space-3);
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-      cursor: pointer;
-      transition: all var(--transition-fast);
-      border: 2px solid transparent;
-    }
-
-    .suggestion-item:hover {
-      background: var(--bg-overlay);
-      border-color: var(--primary-light);
-    }
-
-    .suggestion-item.selected {
-      background: rgba(59, 130, 246, 0.1);
-      border-color: var(--primary);
-    }
-
-    .suggestion-checkbox {
-      width: 24px;
-      height: 24px;
-      border: 2px solid var(--text-muted);
-      border-radius: var(--radius-sm);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--transition-fast);
-      flex-shrink: 0;
-    }
-
-    .suggestion-item.selected .suggestion-checkbox {
-      background: var(--primary);
-      border-color: var(--primary);
-    }
-
-    .suggestion-checkbox svg {
-      width: 14px;
-      height: 14px;
-      stroke: white;
-      fill: none;
-      opacity: 0;
-      transition: opacity var(--transition-fast);
-    }
-
-    .suggestion-item.selected .suggestion-checkbox svg {
-      opacity: 1;
-    }
-
-    .suggestion-content {
-      flex: 1;
-    }
-
-    .suggestion-name {
-      font-weight: 500;
-      margin-bottom: var(--space-1);
-    }
-
-    .suggestion-detail {
-      font-size: 0.85rem;
-      color: var(--text-secondary);
-    }
-
-    .suggestion-arrow {
-      color: var(--text-muted);
-    }
-
-    .suggestion-arrow svg {
-      width: 20px;
-      height: 20px;
-      stroke: currentColor;
-      fill: none;
-    }
-
-    .apply-btn {
-      width: 100%;
-      margin-top: var(--space-4);
-    }
-
-    /* Quick Actions */
-    .quick-actions {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-3);
-    }
-
-    .quick-action-btn {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-      padding: var(--space-3) var(--space-4);
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-      text-decoration: none;
-      color: var(--text-primary);
-      transition: all var(--transition-fast);
-    }
-
-    .quick-action-btn:hover {
-      background: var(--bg-overlay);
-      transform: translateX(4px);
-    }
-
-    .quick-action-icon {
-      width: 44px;
-      height: 44px;
-      border-radius: var(--radius-md);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
-
-    .quick-action-icon svg {
-      width: 22px;
-      height: 22px;
-      stroke: white;
-      fill: none;
-    }
-
-    .quick-action-icon.swipe { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
-    .quick-action-icon.ai { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%); }
-    .quick-action-icon.folder { background: linear-gradient(135deg, var(--accent) 0%, #10b981 100%); }
-    .quick-action-icon.streak { background: linear-gradient(135deg, var(--accent-warn) 0%, #f59e0b 100%); }
-
-    .quick-action-info {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-
-    .quick-action-title {
-      font-weight: 600;
-      font-size: 0.95rem;
-    }
-
-    .quick-action-desc {
-      font-size: 0.8rem;
-      color: var(--text-secondary);
-    }
-
-    .quick-action-arrow {
-      width: 20px;
-      height: 20px;
-      stroke: var(--text-muted);
-      fill: none;
-    }
-
-    /* Achievements */
-    .achievements-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: var(--space-3);
-    }
-
-    .achievement {
-      aspect-ratio: 1;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-1);
-      padding: var(--space-2);
-      transition: all var(--transition-base);
-      cursor: pointer;
-    }
-
-    .achievement:hover {
-      transform: scale(1.05);
-    }
-
-    .achievement.locked {
-      opacity: 0.4;
-      filter: grayscale(1);
-    }
-
-    .achievement-icon {
-      width: 36px;
-      height: 36px;
-      border-radius: var(--radius-sm);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .achievement-icon svg {
-      width: 20px;
-      height: 20px;
-      stroke: currentColor;
-      fill: none;
-    }
-
-    .achievement-icon.gold { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: white; }
-    .achievement-icon.silver { background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%); color: white; }
-    .achievement-icon.bronze { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); color: white; }
-    .achievement-icon.default { background: var(--bg-overlay); color: var(--primary); }
-
-    .achievement-name {
-      font-size: 0.7rem;
-      text-align: center;
-      color: var(--text-secondary);
-    }
-
-    /* Swipe Screen */
-    #swipe-screen {
-      background: var(--bg-primary);
-      padding: var(--space-6);
-    }
-
-    .swipe-container {
-      max-width: 400px;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .swipe-header {
-      text-align: center;
-      margin-bottom: var(--space-6);
-    }
-
-    .swipe-title {
-      font-size: 1.5rem;
-      margin-bottom: var(--space-2);
-    }
-
-    .swipe-subtitle {
-      color: var(--text-secondary);
-    }
-
-    .swipe-progress {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-      margin-bottom: var(--space-8);
-      width: 100%;
-    }
-
-    .progress-bar {
-      flex: 1;
-      height: 6px;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-full);
-      overflow: hidden;
-    }
-
-    .progress-fill {
-      height: 100%;
-      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
-      border-radius: var(--radius-full);
-      transition: width var(--transition-base);
-    }
-
-    .progress-text {
-      font-size: 0.9rem;
-      color: var(--text-secondary);
-      white-space: nowrap;
-    }
-
-    /* Card Stack */
-    .card-stack {
-      position: relative;
-      width: 100%;
-      aspect-ratio: 1;
-      max-height: 400px;
-      margin-bottom: var(--space-8);
-    }
-
-    .swipe-card {
-      position: absolute;
-      inset: 0;
-      background: var(--bg-card);
-      border-radius: var(--radius-xl);
-      box-shadow: var(--shadow-lg);
-      display: flex;
-      flex-direction: column;
-      padding: var(--space-6);
-      transition: transform 0.3s ease, opacity 0.3s ease;
-      cursor: grab;
-      user-select: none;
-      overflow: hidden;
-    }
-
-    .swipe-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 120px;
-      background: linear-gradient(180deg, var(--bg-overlay) 0%, transparent 100%);
-      pointer-events: none;
-    }
-
-    .swipe-card.dragging {
-      cursor: grabbing;
-      transition: none;
-    }
-
-    .swipe-card.swiping-left {
-      background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, var(--bg-card) 100%);
-    }
-
-    .swipe-card.swiping-right {
-      background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, var(--bg-card) 100%);
-    }
-
-    .card-file-icon {
-      width: 80px;
-      height: 80px;
-      margin: var(--space-6) auto var(--space-4);
-      border-radius: var(--radius-lg);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .card-file-icon svg {
-      width: 48px;
-      height: 48px;
-      stroke: currentColor;
-      fill: none;
-      stroke-width: 1.5;
-    }
-
-    .card-file-icon.image { background: rgba(244, 114, 182, 0.15); color: var(--secondary); }
-    .card-file-icon.doc { background: rgba(59, 130, 246, 0.15); color: var(--primary); }
-    .card-file-icon.pdf { background: rgba(251, 191, 36, 0.15); color: var(--accent-warn); }
-    .card-file-icon.video { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
-
-    .card-info {
-      text-align: center;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .card-filename {
-      font-family: 'Outfit', sans-serif;
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin-bottom: var(--space-2);
-      word-break: break-word;
-    }
-
-    .card-meta {
-      color: var(--text-secondary);
-      font-size: 0.9rem;
-      margin-bottom: var(--space-4);
-    }
-
-    .card-suggestion {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-2);
-      background: var(--bg-secondary);
-      padding: var(--space-2) var(--space-4);
-      border-radius: var(--radius-full);
-      font-size: 0.85rem;
-      color: var(--text-secondary);
-      margin: 0 auto;
-    }
-
-    .card-suggestion svg {
-      width: 16px;
-      height: 16px;
-      stroke: var(--primary);
-      fill: none;
-    }
-
-    /* Swipe Labels */
-    .swipe-label {
-      position: absolute;
-      top: var(--space-6);
-      padding: var(--space-2) var(--space-4);
-      border-radius: var(--radius-md);
-      font-family: 'Outfit', sans-serif;
-      font-weight: 700;
-      font-size: 1.25rem;
-      text-transform: uppercase;
-      opacity: 0;
-      transition: opacity var(--transition-fast);
-      pointer-events: none;
-    }
-
-    .swipe-label.delete {
-      right: var(--space-6);
-      background: rgba(248, 113, 113, 0.9);
-      color: white;
-      transform: rotate(12deg);
-    }
-
-    .swipe-label.keep {
-      left: var(--space-6);
-      background: rgba(52, 211, 153, 0.9);
-      color: white;
-      transform: rotate(-12deg);
-    }
-
-    .swipe-card.swiping-left .swipe-label.delete,
-    .swipe-card.swiping-right .swipe-label.keep {
-      opacity: 1;
-    }
-
-    /* Swipe Actions */
-    .swipe-actions {
-      display: flex;
-      justify-content: center;
-      gap: var(--space-8);
-      margin-bottom: var(--space-6);
-    }
-
-    .swipe-action {
-      width: 72px;
-      height: 72px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: all var(--transition-bounce);
-      border: none;
-      background: var(--bg-card);
-      box-shadow: var(--shadow-md);
-    }
-
-    .swipe-action:hover {
-      transform: scale(1.1);
-    }
-
-    .swipe-action:active {
-      transform: scale(0.95);
-    }
-
-    .swipe-action svg {
-      width: 32px;
-      height: 32px;
-      stroke: currentColor;
-      fill: none;
-      stroke-width: 2;
-    }
-
-    .swipe-action.delete {
-      color: var(--accent-danger);
-    }
-
-    .swipe-action.keep {
-      color: var(--accent);
-    }
-
-    .swipe-action.undo {
-      color: var(--accent-warn);
-      width: 56px;
-      height: 56px;
-    }
-
-    .swipe-action.undo svg {
-      width: 24px;
-      height: 24px;
-    }
-
-    /* Swipe Indicators */
-    .swipe-hints {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-      max-width: 300px;
-      color: var(--text-muted);
-      font-size: 0.85rem;
-    }
-
-    .swipe-hint {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-    }
-
-    .swipe-hint svg {
-      width: 18px;
-      height: 18px;
-      stroke: currentColor;
-      fill: none;
-    }
-
-    /* AI Suggestion Screen */
-    #ai-suggestion {
-      padding: var(--space-6);
-    }
-
-    .ai-container {
-      max-width: 900px;
-      width: 100%;
-    }
-
-    .ai-header {
-      text-align: center;
-      margin-bottom: var(--space-8);
-    }
-
-    .ai-title {
-      font-size: 2rem;
-      margin-bottom: var(--space-3);
-    }
-
-    .ai-subtitle {
-      color: var(--text-secondary);
-      font-size: 1.1rem;
-    }
-
-    .comparison-view {
-      display: grid;
-      grid-template-columns: 1fr auto 1fr;
-      gap: var(--space-6);
-      align-items: start;
-      margin-bottom: var(--space-8);
-    }
-
-    @media (max-width: 768px) {
-      .comparison-view {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    .comparison-panel {
-      background: var(--bg-card);
-      border-radius: var(--radius-xl);
-      box-shadow: var(--shadow-md);
-      padding: var(--space-6);
-    }
-
-    .comparison-header {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-      margin-bottom: var(--space-5);
-      padding-bottom: var(--space-4);
-      border-bottom: 1px solid var(--bg-secondary);
-    }
-
-    .comparison-badge {
-      padding: var(--space-1) var(--space-3);
-      border-radius: var(--radius-full);
-      font-size: 0.75rem;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    .comparison-badge.before {
-      background: rgba(248, 113, 113, 0.15);
-      color: var(--accent-danger);
-    }
-
-    .comparison-badge.after {
-      background: rgba(52, 211, 153, 0.15);
-      color: var(--accent);
-    }
-
-    .comparison-tree {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-2);
-    }
-
-    .comparison-folder {
-      padding: var(--space-3);
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-    }
-
-    .comparison-folder.new {
-      background: rgba(52, 211, 153, 0.1);
-      border: 2px dashed var(--accent);
-    }
-
-    .comparison-folder-name {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      font-weight: 500;
-      margin-bottom: var(--space-2);
-    }
-
-    .comparison-folder-name svg {
-      width: 18px;
-      height: 18px;
-      stroke: var(--primary);
-      fill: none;
-    }
-
-    .comparison-folder-files {
-      margin-left: var(--space-6);
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-1);
-    }
-
-    .comparison-file {
-      font-size: 0.85rem;
-      color: var(--text-secondary);
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-    }
-
-    .comparison-file svg {
-      width: 14px;
-      height: 14px;
-      stroke: currentColor;
-      fill: none;
-    }
-
-    .comparison-arrow {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding-top: var(--space-16);
-    }
-
-    .comparison-arrow svg {
-      width: 48px;
-      height: 48px;
-      stroke: var(--primary);
-      fill: none;
-      animation: pulse 2s ease-in-out infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 0.5; transform: scale(1); }
-      50% { opacity: 1; transform: scale(1.1); }
-    }
-
-    /* AI Actions */
-    .ai-actions {
-      display: flex;
-      justify-content: center;
-      gap: var(--space-4);
-    }
-
-    /* Settings Screen */
-    #settings {
-      padding: var(--space-6);
-    }
-
-    .settings-container {
-      max-width: 600px;
-      width: 100%;
-    }
-
-    .settings-header {
-      margin-bottom: var(--space-8);
-    }
-
-    .settings-title {
-      font-size: 2rem;
-      margin-bottom: var(--space-2);
-    }
-
-    .settings-subtitle {
-      color: var(--text-secondary);
-    }
-
-    .settings-section {
-      background: var(--bg-card);
-      border-radius: var(--radius-xl);
-      box-shadow: var(--shadow-md);
-      padding: var(--space-6);
-      margin-bottom: var(--space-5);
-    }
-
-    .settings-section-title {
-      font-size: 1.1rem;
-      margin-bottom: var(--space-5);
-      padding-bottom: var(--space-3);
-      border-bottom: 1px solid var(--bg-secondary);
-    }
-
-    .setting-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--space-4) 0;
-      border-bottom: 1px solid var(--bg-secondary);
-    }
-
-    .setting-row:last-child {
-      border-bottom: none;
-    }
-
-    .setting-info {
-      flex: 1;
-    }
-
-    .setting-name {
-      font-weight: 500;
-      margin-bottom: var(--space-1);
-    }
-
-    .setting-desc {
-      font-size: 0.85rem;
-      color: var(--text-secondary);
-    }
-
-    /* Toggle Switch */
-    .toggle {
-      position: relative;
-      width: 56px;
-      height: 32px;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-full);
-      cursor: pointer;
-      transition: background var(--transition-base);
-    }
-
-    .toggle.active {
-      background: var(--primary);
-    }
-
-    .toggle::after {
-      content: '';
-      position: absolute;
-      top: 4px;
-      left: 4px;
-      width: 24px;
-      height: 24px;
-      background: white;
-      border-radius: 50%;
-      transition: transform var(--transition-base);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .toggle.active::after {
-      transform: translateX(24px);
-    }
-
-    /* Theme Selector */
-    .theme-selector {
-      display: flex;
-      gap: var(--space-3);
-    }
-
-    .theme-option {
-      width: 48px;
-      height: 48px;
-      border-radius: var(--radius-md);
-      cursor: pointer;
-      border: 3px solid transparent;
-      transition: all var(--transition-base);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .theme-option:hover {
-      transform: scale(1.05);
-    }
-
-    .theme-option.active {
-      border-color: var(--primary);
-    }
-
-    .theme-option.light {
-      background: linear-gradient(135deg, #faf9fb 50%, #f3f2f7 50%);
-    }
-
-    .theme-option.dark {
-      background: linear-gradient(135deg, #0f0e17 50%, #252336 50%);
-    }
-
-    .theme-option svg {
-      width: 20px;
-      height: 20px;
-      stroke: var(--text-primary);
-      fill: none;
-    }
-
-    /* Success Modal */
-    .modal-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.5);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-      opacity: 0;
-      visibility: hidden;
-      transition: all var(--transition-base);
-    }
-
-    .modal-overlay.active {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .modal {
-      background: var(--bg-card);
-      border-radius: var(--radius-xl);
-      padding: var(--space-8);
-      max-width: 400px;
-      width: 90%;
-      text-align: center;
-      transform: scale(0.9);
-      transition: transform var(--transition-bounce);
-    }
-
-    .modal-overlay.active .modal {
-      transform: scale(1);
-    }
-
-    .modal-icon {
-      width: 80px;
-      height: 80px;
-      margin: 0 auto var(--space-5);
-      background: linear-gradient(135deg, var(--accent) 0%, #10b981 100%);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .modal-icon svg {
-      width: 40px;
-      height: 40px;
-      stroke: white;
-      fill: none;
-    }
-
-    .modal-title {
-      font-size: 1.5rem;
-      margin-bottom: var(--space-3);
-    }
-
-    .modal-desc {
-      color: var(--text-secondary);
-      margin-bottom: var(--space-6);
-    }
-
-    /* Motivational Toast */
-    .toast {
-      position: fixed;
-      bottom: var(--space-8);
-      left: 50%;
-      transform: translateX(-50%) translateY(100px);
-      background: var(--bg-card);
-      padding: var(--space-4) var(--space-6);
-      border-radius: var(--radius-full);
-      box-shadow: var(--shadow-lg);
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-      z-index: 500;
-      transition: transform var(--transition-bounce);
-    }
-
-    .toast.show {
-      transform: translateX(-50%) translateY(0);
-    }
-
-    .toast-icon {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .toast-icon svg {
-      width: 18px;
-      height: 18px;
-      stroke: currentColor;
-      fill: none;
-    }
-
-    .toast-icon.streak { background: rgba(251, 191, 36, 0.15); color: var(--accent-warn); }
-    .toast-icon.success { background: rgba(52, 211, 153, 0.15); color: var(--accent); }
-
-    .toast-message {
-      font-weight: 500;
-    }
-
-    /* Back Button */
-    .back-btn {
-      position: fixed;
-      top: var(--space-4);
-      left: var(--space-4);
-      z-index: 200;
-    }
-
-    /* Badge Tooltip */
-    .badge-tooltip {
-      position: absolute;
-      bottom: calc(100% + 8px);
-      left: 50%;
-      transform: translateX(-50%);
-      background: var(--text-primary);
-      color: var(--bg-card);
-      padding: var(--space-2) var(--space-3);
-      border-radius: var(--radius-sm);
-      font-size: 0.75rem;
-      white-space: nowrap;
-      opacity: 0;
-      visibility: hidden;
-      transition: all var(--transition-fast);
-    }
-
-    .achievement:hover .badge-tooltip {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    /* Responsive */
-    @media (max-width: 640px) {
-      .header {
-        padding: var(--space-3) var(--space-4);
-      }
-
-      .main-content {
-        padding: var(--space-4);
-      }
-
-      .swipe-card {
-        padding: var(--space-4);
-      }
-
-      .card-file-icon {
-        width: 60px;
-        height: 60px;
-        margin: var(--space-4) auto var(--space-3);
-      }
-
-      .card-file-icon svg {
-        width: 36px;
-        height: 36px;
-      }
-
-      .swipe-actions {
-        gap: var(--space-6);
-      }
-
-      .swipe-action {
-        width: 64px;
-        height: 64px;
-      }
-
-      .comparison-view {
-        gap: var(--space-4);
-      }
-    }
-
-    /* Animations */
-    @keyframes slideIn {
-      from { opacity: 0; transform: translateY(30px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes bounceIn {
-      0% { transform: scale(0); }
-      50% { transform: scale(1.1); }
-      100% { transform: scale(1); }
-    }
-
-    .animate-slide-in {
-      animation: slideIn 0.5s ease forwards;
-    }
-
-    .animate-bounce-in {
-      animation: bounceIn 0.5s var(--transition-bounce) forwards;
+      padding: 0;
+      border-radius: 12px;
     }
   </style>
 </head>
-<body>
+<body class="font-sans bg-surface-primary text-text-primary min-h-screen antialiased overflow-x-hidden">
   <!-- Onboarding Screen -->
   <div id="onboarding" class="screen active">
-    <div class="onboarding-container">
-      <div class="logo">
-        <svg viewBox="0 0 24 24"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
-      </div>
-      <h1 class="brand-name">Chakmate</h1>
-      <p class="tagline">지능형 디지털 자산 관리 솔루션</p>
-
-      <div class="steps-indicator">
-        <div class="step-dot active" data-step="1"></div>
-        <div class="step-dot" data-step="2"></div>
-        <div class="step-dot" data-step="3"></div>
-      </div>
-
-      <!-- Step 1: Welcome -->
-      <div class="onboarding-step active" data-step="1">
-        <div class="step-illustration">
-          <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
-        </div>
-        <h2 class="step-title">파일 정리, 지능적으로</h2>
-        <p class="step-desc">AI가 파일 사용 패턴을 분석하여 당신만의 최적화된 폴더 구조를 제안합니다. 더 이상 수동 정리는 필요 없습니다.</p>
-        <div class="privacy-badge">
-          <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-          <span>기기 내 단독 처리 • 완벽한 개인정보 보호</span>
+    <div class="max-w-[420px] w-full text-center flex flex-col items-center justify-center min-h-screen p-4 gap-4 lg:flex-row lg:max-w-full lg:justify-center lg:gap-8">
+      <div class="flex flex-col items-center justify-center lg:flex-shrink-0">
+        <div class="logo w-64 h-64 mx-auto mb-6 flex items-center justify-center animate-float lg:w-48 lg:h-48">
+          <img src="assets/logo.svg" alt="Chakmate Logo" class="w-full h-full object-contain">
         </div>
+        <h1 class="brand-name font-display text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-2 lg:text-3xl">Chakmate</h1>
+        <p class="tagline text-text-secondary text-base mb-10 lg:mb-0">지능형 디지털 자산 관리 솔루션</p>
       </div>
 
-      <!-- Step 2: Swipe -->
-      <div class="onboarding-step" data-step="2">
-        <div class="step-illustration">
-          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+      <div class="flex flex-col items-center gap-4 lg:flex-col">
+        <div class="steps-indicator flex gap-2 justify-center mb-8 lg:mb-0">
+          <div class="step-dot active w-2 h-2 rounded-full bg-text-muted transition-all duration-250" data-step="1"></div>
+          <div class="step-dot w-2 h-2 rounded-full bg-text-muted transition-all duration-250" data-step="2"></div>
+          <div class="step-dot w-2 h-2 rounded-full bg-text-muted transition-all duration-250" data-step="3"></div>
         </div>
-        <h2 class="step-title">스와이프로 직관적으로</h2>
-        <p class="step-desc">오른쪽 스와이프로 보관, 왼쪽 스와이프로 삭제. 카드形式的 인터페이스로 누구나 쉽게 파일을 정리할 수 있습니다.</p>
-      </div>
 
-      <!-- Step 3: Gamification -->
-      <div class="onboarding-step" data-step="3">
-        <div class="step-illustration">
-          <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+        <!-- Step 1: Welcome -->
+        <div class="onboarding-step active" data-step="1">
+          <div class="step-illustration w-[200px] h-[200px] mx-auto mb-8 bg-surface-card rounded-[28px] flex items-center justify-center shadow-lg relative overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-br from-accent/10 to-transparent"></div>
+            <svg class="w-[100px] h-[100px] stroke-primary fill-none stroke-[1.5] relative z-10"><use href="#icon-layers"></use></svg>
+          </div>
+          <h2 class="step-title text-xl mb-3 text-text-primary font-display">파일 정리, 지능적으로</h2>
+          <p class="step-desc text-text-secondary leading-relaxed mb-8">AI가 파일 사용 패턴을 분석하여 당신만의 최적화된 폴더 구조를 제안합니다. 더 이상 수동 정리는 필요 없습니다.</p>
+          <div class="privacy-badge inline-flex items-center gap-2 bg-accent text-white px-4 py-2 rounded-full text-sm font-medium mb-6">
+            <svg class="w-4 h-4 stroke-white fill-none"><use href="#icon-shield-check"></use></svg>
+            <span>기기 내 단독 처리 • 완벽한 개인정보 보호</span>
+          </div>
         </div>
-        <h2 class="step-title">습관 형성의 재미</h2>
-        <p class="step-desc">매일 정리하고 스트릭을 쌓아보세요. 업적 배지를 수집하고 디지털 공간을 항상 청결하게 유지하세요.</p>
-      </div>
 
-      <div class="nav-buttons">
-        <button class="btn btn-primary" id="onboarding-next">
-          <span>계속</span>
-          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-        </button>
+        <!-- Step 2: Swipe -->
+        <div class="onboarding-step hidden" data-step="2">
+          <div class="step-illustration w-[200px] h-[200px] mx-auto mb-8 bg-surface-card rounded-[28px] flex items-center justify-center shadow-lg relative overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-br from-accent/10 to-transparent"></div>
+            <svg class="w-[100px] h-[100px] stroke-primary fill-none stroke-[1.5] relative z-10"><use href="#icon-arrow-right"></use></svg>
+          </div>
+          <h2 class="step-title text-xl mb-3 text-text-primary font-display">스와이프로 직관적으로</h2>
+          <p class="step-desc text-text-secondary leading-relaxed mb-8">오른쪽 스와이프로 보관, 왼쪽 스와이프로 삭제. 카드形式的 인터페이스로 누구나 쉽게 파일을 정리할 수 있습니다.</p>
+        </div>
+
+        <!-- Step 3: Gamification -->
+        <div class="onboarding-step hidden" data-step="3">
+          <div class="step-illustration w-[200px] h-[200px] mx-auto mb-8 bg-surface-card rounded-[28px] flex items-center justify-center shadow-lg relative overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-br from-accent/10 to-transparent"></div>
+            <svg class="w-[100px] h-[100px] stroke-primary fill-none stroke-[1.5] relative z-10"><use href="#icon-star"></use></svg>
+          </div>
+          <h2 class="step-title text-xl mb-3 text-text-primary font-display">습관 형성의 재미</h2>
+          <p class="step-desc text-text-secondary leading-relaxed mb-8">매일 정리하고 스트릭을 쌓아보세요. 업적 배지를 수집하고 디지털 공간을 항상 청결하게 유지하세요.</p>
+        </div>
+
+        <div class="nav-buttons flex gap-4 justify-center mt-8">
+          <button class="btn btn-primary" id="onboarding-next">
+            <span>계속</span>
+            <svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-arrow-right"></use></svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
 
   <!-- Dashboard Screen -->
   <div id="dashboard" class="screen">
-    <div class="dashboard-container">
-      <header class="header">
-        <div class="header-left">
-<div class="header-logo">
-          <svg viewBox="0 0 24 24" fill="none">
-            <!-- Puzzle piece representing '착' - fitting together -->
-            <defs>
-              <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" stop-color="#06b6d4"/>
-                <stop offset="50%" stop-color="#3b82f6"/>
-                <stop offset="100%" stop-color="#0ea5e9"/>
-              </linearGradient>
-            </defs>
-            <!-- Puzzle piece body -->
-            <path d="M6 3a3 3 0 013 3v2a3 3 0 01-3 3H4a2 2 0 00-2 2v6a2 2 0 002 2h2a3 3 0 013 3v2a3 3 0 01-3 3H6a3 3 0 01-3-3v-2a3 3 0 013-3h2a2 2 0 002-2V8a2 2 0 00-2-2H6a3 3 0 01-3-3V6a3 3 0 013-3z" fill="url(#logoGrad)"/>
-            <!-- Puzzle knob highlight -->
-            <circle cx="12" cy="12" r="3" fill="white" opacity="0.3"/>
-          </svg>
+    <div class="dashboard-container w-full min-h-screen flex flex-col">
+      <header class="header flex items-center justify-between p-4 lg:p-6 bg-surface-card shadow-sm sticky top-0 z-50">
+        <div class="header-left flex items-center gap-3">
+          <div class="header-logo w-20 h-20 flex items-center justify-center">
+            <img src="assets/logo.svg" alt="Chakmate Logo" class="w-full h-full object-contain">
+          </div>
+          <h1 class="header-title font-display text-xl font-semibold">Chakmate</h1>
         </div>
-          <h1 class="header-title">Chakmate</h1>
-        </div>
-        <div class="header-right">
-          <div class="streak-badge" id="streak-display">
-            <svg viewBox="0 0 24 24"><path d="M12 2L8 12l4-2 4 2-4-10zM8 14l-4 8h4l2-4 2 4h4l-4-8"/></svg>
+        <div class="header-right flex items-center gap-3">
+          <div class="streak-badge flex items-center gap-2 bg-gradient-to-r from-accent-warn to-amber-500 text-white px-4 py-2 rounded-full font-semibold text-sm" id="streak-display">
+            <svg class="w-[18px] h-[18px] fill-current"><use href="#icon-fire"></use></svg>
             <span id="streak-count">7</span>
           </div>
           <button class="btn btn-icon btn-secondary" id="settings-btn">
-            <svg viewBox="0 0 24 24"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+            <svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-cog"></use></svg>
           </button>
         </div>
       </header>
 
-      <main class="main-content">
+      <main class="main-content flex-1 p-6 grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-6 max-w-[1400px] mx-auto w-full">
         <div class="left-panel">
-          <div class="stats-grid">
-            <div class="stat-card animate-slide-in">
-              <div class="stat-icon purple">
-                <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
+          <div class="stats-grid grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
+            <div class="stat-card bg-surface-card rounded-[20px] p-5 shadow-sm hover:-translate-y-1 hover:shadow-md transition-all duration-250 animate-slide-in">
+              <div class="stat-icon w-12 h-12 rounded-[12px] flex items-center justify-center mb-3 bg-primary/10">
+                <svg class="w-6 h-6 stroke-primary fill-none"><use href="#icon-document"></use></svg>
               </div>
-              <div class="stat-value" id="files-organized">248</div>
-              <div class="stat-label">정리된 파일</div>
+              <div class="stat-value font-display text-3xl font-bold text-text-primary mb-1" id="files-organized">248</div>
+              <div class="stat-label text-text-secondary text-sm">정리된 파일</div>
             </div>
-            <div class="stat-card animate-slide-in" style="animation-delay: 0.1s">
-              <div class="stat-icon pink">
-                <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+            <div class="stat-card bg-surface-card rounded-[20px] p-5 shadow-sm hover:-translate-y-1 hover:shadow-md transition-all duration-250 animate-slide-in" style="animation-delay: 0.1s">
+              <div class="stat-icon w-12 h-12 rounded-[12px] flex items-center justify-center mb-3 bg-pink-500/10">
+                <svg class="w-6 h-6 stroke-secondary fill-none"><use href="#icon-folder"></use></svg>
               </div>
-              <div class="stat-value" id="folders-managed">12</div>
-              <div class="stat-label">관리 중인 폴더</div>
+              <div class="stat-value font-display text-3xl font-bold text-text-primary mb-1" id="folders-managed">12</div>
+              <div class="stat-label text-text-secondary text-sm">관리 중인 폴더</div>
             </div>
-            <div class="stat-card animate-slide-in" style="animation-delay: 0.2s">
-              <div class="stat-icon green">
-                <svg viewBox="0 0 24 24"><path d="M12 2L8 12l4-2 4 2-4-10zM8 14l-4 8h4l2-4 2 4h4l-4-8"/></svg>
+            <div class="stat-card bg-surface-card rounded-[20px] p-5 shadow-sm hover:-translate-y-1 hover:shadow-md transition-all duration-250 animate-slide-in" style="animation-delay: 0.2s">
+              <div class="stat-icon w-12 h-12 rounded-[12px] flex items-center justify-center mb-3 bg-emerald-500/10">
+                <svg class="w-6 h-6 stroke-accent-warn fill-none stroke-2"><use href="#icon-arrow-right"></use></svg>
               </div>
-              <div class="stat-value" id="current-streak">7일</div>
-              <div class="stat-label">현재 스트릭</div>
+              <div class="stat-value font-display text-3xl font-bold text-text-primary mb-1" id="current-streak">7일</div>
+              <div class="stat-label text-text-secondary text-sm">현재 스트릭</div>
             </div>
           </div>
 
-          <div class="file-view">
-            <div class="file-view-header">
-              <h2 class="file-view-title">
-                <svg viewBox="0 0 24 24"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
+          <div class="file-view bg-surface-card rounded-[28px] shadow-md p-6 min-h-[400px]">
+            <div class="file-view-header flex items-center justify-between mb-5">
+              <h2 class="file-view-title text-xl flex items-center gap-2 font-display">
+                <svg class="w-6 h-6 stroke-primary fill-none"><use href="#icon-folder"></use></svg>
                 파일 구조
               </h2>
               <button class="btn btn-ghost" id="view-all-btn">전체 보기</button>
             </div>
-            <div class="tree-view" id="file-tree">
-              <!-- Filled by JS -->
-            </div>
+            <div class="tree-view flex flex-col gap-2" id="file-tree"></div>
           </div>
         </div>
 
-        <div class="suggestions-panel">
-          <div class="panel-card">
-            <div class="panel-header">
-              <div class="panel-icon">
-                <svg viewBox="0 0 24 24"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
+        <div class="suggestions-panel flex flex-col gap-5">
+          <div class="panel-card bg-surface-card rounded-[28px] shadow-md p-6">
+            <div class="panel-header flex items-center gap-3 mb-5">
+              <div class="panel-icon w-11 h-11 rounded-[12px] flex items-center justify-center bg-gradient-to-br from-primary to-primary-light">
+                <svg class="w-[22px] h-[22px] stroke-white fill-none"><use href="#icon-light-bulb"></use></svg>
               </div>
               <div>
-                <h3 class="panel-title">AI 구조 제안</h3>
-                <p class="panel-subtitle">파일 패턴 분석 결과</p>
+                <h3 class="panel-title text-lg font-display">AI 구조 제안</h3>
+                <p class="panel-subtitle text-sm text-text-secondary">파일 패턴 분석 결과</p>
               </div>
             </div>
-            <div class="suggestion-list" id="suggestion-list">
-              <!-- Filled by JS -->
-            </div>
-            <button class="btn btn-primary apply-btn" id="apply-suggestions">
-              <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+            <div class="suggestion-list flex flex-col gap-3" id="suggestion-list"></div>
+            <button class="btn btn-primary apply-btn w-full mt-4" id="apply-suggestions">
+<svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-arrow-right"></use></svg>
               <span>적용하기</span>
             </button>
           </div>
 
-          <div class="panel-card">
-            <div class="panel-header">
-              <div class="panel-icon" style="background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);">
-                <svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+          <div class="panel-card bg-surface-card rounded-[28px] shadow-md p-6">
+            <div class="panel-header flex items-center gap-3 mb-5">
+              <div class="panel-icon w-11 h-11 rounded-[12px] flex items-center justify-center bg-gradient-to-br from-secondary to-secondary-light">
+                <svg class="w-[22px] h-[22px] stroke-white fill-none"><use href="#icon-bolt"></use></svg>
               </div>
               <div>
-                <h3 class="panel-title">빠른 실행</h3>
-                <p class="panel-subtitle">개별 Scene 실행</p>
+                <h3 class="panel-title text-lg font-display">빠른 실행</h3>
+                <p class="panel-subtitle text-sm text-text-secondary">개별 Scene 실행</p>
               </div>
             </div>
-            <div class="quick-actions">
-              <a href="scene_swipe.html" class="quick-action-btn">
-                <div class="quick-action-icon swipe">
-                  <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+            <div class="quick-actions flex flex-col gap-3">
+              <a href="scene_swipe.html" class="quick-action-btn flex items-center gap-4 p-3 bg-surface-secondary rounded-[12px] text-text-primary hover:bg-overlay hover:translate-x-1 transition-all duration-150 no-underline">
+                <div class="quick-action-icon w-11 h-11 rounded-[12px] flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-primary to-primary-dark">
+                  <svg class="w-[22px] h-[22px] stroke-white fill-none"><use href="#icon-arrow-right"></use></svg>
                 </div>
-                <div class="quick-action-info">
-                  <span class="quick-action-title">스와이프 모드</span>
-                  <span class="quick-action-desc">스와이프로 파일 정리</span>
+                <div class="quick-action-info flex-1 flex flex-col gap-0.5">
+                  <span class="quick-action-title font-semibold text-sm">스와이프 모드</span>
+                  <span class="quick-action-desc text-xs text-text-secondary">스와이프로 파일 정리</span>
                 </div>
-                <svg class="quick-action-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
+                <svg class="quick-action-arrow w-5 h-5 stroke-text-muted fill-none"><use href="#icon-chevron-right"></use></svg>
               </a>
-              <a href="scene_ai_classification.html" class="quick-action-btn">
-                <div class="quick-action-icon ai">
-                  <svg viewBox="0 0 24 24"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
+              <a href="scene_ai_classification.html" class="quick-action-btn flex items-center gap-4 p-3 bg-surface-secondary rounded-[12px] text-text-primary hover:bg-overlay hover:translate-x-1 transition-all duration-150 no-underline">
+                <div class="quick-action-icon w-11 h-11 rounded-[12px] flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-secondary to-secondary-light">
+                  <svg class="w-[22px] h-[22px] stroke-white fill-none"><use href="#icon-light-bulb"></use></svg>
                 </div>
-                <div class="quick-action-info">
-                  <span class="quick-action-title">AI 분류</span>
-                  <span class="quick-action-desc">AI 분석 및 패턴 인식</span>
+                <div class="quick-action-info flex-1 flex flex-col gap-0.5">
+                  <span class="quick-action-title font-semibold text-sm">AI 분류</span>
+                  <span class="quick-action-desc text-xs text-text-secondary">AI 분석 및 패턴 인식</span>
                 </div>
-                <svg class="quick-action-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
+                <svg class="quick-action-arrow w-5 h-5 stroke-text-muted fill-none"><use href="#icon-chevron-right"></use></svg>
               </a>
-              <a href="scene_visualization.html" class="quick-action-btn">
-                <div class="quick-action-icon folder">
-                  <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+              <a href="scene_visualization.html" class="quick-action-btn flex items-center gap-4 p-3 bg-surface-secondary rounded-[12px] text-text-primary hover:bg-overlay hover:translate-x-1 transition-all duration-150 no-underline">
+                <div class="quick-action-icon w-11 h-11 rounded-[12px] flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-accent to-emerald-500">
+                  <svg class="w-[22px] h-[22px] stroke-white fill-none"><use href="#icon-folder"></use></svg>
                 </div>
-                <div class="quick-action-info">
-                  <span class="quick-action-title">구조 제안</span>
-                  <span class="quick-action-desc">폴더 구조 시각화</span>
+                <div class="quick-action-info flex-1 flex flex-col gap-0.5">
+                  <span class="quick-action-title font-semibold text-sm">구조 제안</span>
+                  <span class="quick-action-desc text-xs text-text-secondary">폴더 구조 시각화</span>
                 </div>
-                <svg class="quick-action-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
+                <svg class="quick-action-arrow w-5 h-5 stroke-text-muted fill-none"><use href="#icon-chevron-right"></use></svg>
               </a>
-              <a href="scene_gamification.html" class="quick-action-btn">
-                <div class="quick-action-icon streak">
-                  <svg viewBox="0 0 24 24"><path d="M12 2L8 12l4-2 4 2-4-10zM8 14l-4 8h4l2-4 2 4h4l-4-8"/></svg>
+              <a href="scene_gamification.html" class="quick-action-btn flex items-center gap-4 p-3 bg-surface-secondary rounded-[12px] text-text-primary hover:bg-overlay hover:translate-x-1 transition-all duration-150 no-underline">
+                <div class="quick-action-icon w-11 h-11 rounded-[12px] flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-accent-warn to-amber-500">
+                  <svg class="w-[22px] h-[22px] fill-current stroke-white"><use href="#icon-fire"></use></svg>
                 </div>
-                <div class="quick-action-info">
-                  <span class="quick-action-title">내 진행 상황</span>
-                  <span class="quick-action-desc">스트릭 및 업적</span>
+                <div class="quick-action-info flex-1 flex flex-col gap-0.5">
+                  <span class="quick-action-title font-semibold text-sm">내 진행 상황</span>
+                  <span class="quick-action-desc text-xs text-text-secondary">스트릭 및 업적</span>
                 </div>
-                <svg class="quick-action-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
+                <svg class="quick-action-arrow w-5 h-5 stroke-text-muted fill-none"><use href="#icon-chevron-right"></use></svg>
               </a>
             </div>
           </div>
 
-          <div class="panel-card">
-            <div class="panel-header">
-              <div class="panel-icon">
-                <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+          <div class="panel-card bg-surface-card rounded-[28px] shadow-md p-6">
+            <div class="panel-header flex items-center gap-3 mb-5">
+              <div class="panel-icon w-11 h-11 rounded-[12px] flex items-center justify-center bg-gradient-to-br from-primary to-primary-light">
+                <svg class="w-[22px] h-[22px] stroke-white fill-none"><use href="#icon-star"></use></svg>
               </div>
               <div>
-                <h3 class="panel-title">업적 배지</h3>
-                <p class="panel-subtitle">4/12 달성</p>
+                <h3 class="panel-title text-lg font-display">업적 배지</h3>
+                <p class="panel-subtitle text-sm text-text-secondary">4/12 달성</p>
               </div>
             </div>
-            <div class="achievements-grid" id="achievements-grid">
-              <!-- Filled by JS -->
-            </div>
+            <div class="achievements-grid grid grid-cols-4 gap-3" id="achievements-grid"></div>
           </div>
         </div>
       </main>
@@ -1876,61 +451,61 @@
 
   <!-- Swipe Screen -->
   <div id="swipe-screen" class="screen">
-    <button class="btn btn-icon btn-secondary back-btn" id="swipe-back">
-      <svg viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+    <button class="btn btn-icon btn-secondary back-btn fixed top-4 left-4 z-[100]" id="swipe-back">
+      <svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-arrow-left"></use></svg>
     </button>
 
-    <div class="swipe-container">
-      <div class="swipe-header">
-        <h2 class="swipe-title">파일 정리하기</h2>
-        <p class="swipe-subtitle">스와이프로 파일을 보관하거나 삭제하세요</p>
+    <div class="swipe-container max-w-[400px] w-full flex flex-col items-center">
+      <div class="swipe-header text-center mb-6">
+        <h2 class="swipe-title text-xl mb-2 font-display">파일 정리하기</h2>
+        <p class="swipe-subtitle text-text-secondary">스와이프로 파일을 보관하거나 삭제하세요</p>
       </div>
 
-      <div class="swipe-progress">
-        <div class="progress-bar">
-          <div class="progress-fill" id="swipe-progress-fill" style="width: 60%"></div>
+      <div class="swipe-progress flex items-center gap-4 mb-8 w-full">
+        <div class="progress-bar flex-1 h-1.5 bg-surface-secondary rounded-full overflow-hidden">
+          <div class="progress-fill h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-250" id="swipe-progress-fill" style="width: 60%"></div>
         </div>
-        <span class="progress-text"><span id="swipe-current">4</span>/<span id="swipe-total">10</span></span>
+        <span class="progress-text text-sm text-text-secondary whitespace-nowrap"><span id="swipe-current">4</span>/<span id="swipe-total">10</span></span>
       </div>
 
-      <div class="card-stack" id="card-stack">
-        <div class="swipe-card" id="current-card">
-          <span class="swipe-label delete">삭제</span>
-          <span class="swipe-label keep">보관</span>
-          <div class="card-file-icon image" id="card-icon">
-            <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+      <div class="card-stack relative w-full aspect-square max-h-[400px] mb-8" id="card-stack">
+        <div class="swipe-card absolute inset-0 bg-surface-card rounded-[28px] shadow-lg flex flex-col p-6 transition-transform duration-300 cursor-grab select-none overflow-hidden" id="current-card">
+          <span class="swipe-label delete absolute top-6 right-6 py-2 px-4 rounded-[12px] font-display font-bold text-xl uppercase bg-red-500/90 text-white rotate-12 opacity-0 transition-opacity duration-150 pointer-events-none">삭제</span>
+          <span class="swipe-label keep absolute top-6 left-6 py-2 px-4 rounded-[12px] font-display font-bold text-xl uppercase bg-emerald-500/90 text-white -rotate-12 opacity-0 transition-opacity duration-150 pointer-events-none">보관</span>
+          <div class="card-file-icon image w-20 h-20 mx-auto my-6 rounded-[20px] flex items-center justify-center bg-pink-500/15" id="card-icon">
+            <svg class="w-12 h-12 stroke-current fill-none stroke-[1.5]"><use href="#icon-photo"></use></svg>
           </div>
-          <div class="card-info">
-            <h3 class="card-filename" id="card-filename">IMG_20240115_123456.jpg</h3>
-            <p class="card-meta" id="card-meta">2024년 1월 15일 • 3.2 MB</p>
-            <div class="card-suggestion" id="card-suggestion">
-              <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+          <div class="card-info text-center flex-1 flex flex-col justify-center">
+            <h3 class="card-filename font-display text-xl font-semibold mb-2 break-words" id="card-filename">IMG_20240115_123456.jpg</h3>
+            <p class="card-meta text-text-secondary text-sm mb-4" id="card-meta">2024년 1월 15일 • 3.2 MB</p>
+            <div class="card-suggestion inline-flex items-center gap-2 bg-surface-secondary px-4 py-2 rounded-full text-sm text-text-secondary mx-auto" id="card-suggestion">
+<svg class="w-4 h-4 stroke-primary fill-none"><use href="#icon-folder"></use></svg>
               <span>📷 사진 폴더로 이동</span>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="swipe-actions">
-        <button class="swipe-action delete" id="swipe-delete">
-          <svg viewBox="0 0 24 24"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
+      <div class="swipe-actions flex justify-center gap-8 mb-6">
+        <button class="swipe-action delete w-[72px] h-[72px] rounded-full flex items-center justify-center cursor-pointer transition-all duration-500 bg-surface-card shadow-md hover:scale-110 active:scale-95 text-accent-danger border-none" id="swipe-delete">
+          <svg class="w-8 h-8 stroke-current fill-none stroke-2"><use href="#icon-trash"></use></svg>
         </button>
-        <button class="swipe-action undo" id="swipe-undo" style="display: none">
-          <svg viewBox="0 0 24 24"><path d="M3 10h10a5 5 0 015 5v0a5 5 0 01-5 5H3M3 10l4-4M3 10l4 4"/></svg>
+        <button class="swipe-action undo w-14 h-14 rounded-full flex items-center justify-center cursor-pointer transition-all duration-500 bg-surface-card shadow-md hover:scale-110 active:scale-95 text-accent-warn border-none hidden" id="swipe-undo">
+          <svg class="w-6 h-6 stroke-current fill-none stroke-2"><use href="#icon-undo"></use></svg>
         </button>
-        <button class="swipe-action keep" id="swipe-keep">
-          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        <button class="swipe-action keep w-[72px] h-[72px] rounded-full flex items-center justify-center cursor-pointer transition-all duration-500 bg-surface-card shadow-md hover:scale-110 active:scale-95 text-accent border-none" id="swipe-keep">
+          <svg class="w-8 h-8 stroke-current fill-none stroke-2"><use href="#icon-arrow-right"></use></svg>
         </button>
       </div>
 
-      <div class="swipe-hints">
-        <div class="swipe-hint">
-          <svg viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+      <div class="swipe-hints flex justify-between w-full max-w-[300px] text-text-muted text-sm">
+        <div class="swipe-hint flex items-center gap-2">
+          <svg class="w-[18px] h-[18px] stroke-current fill-none"><use href="#icon-arrow-left"></use></svg>
           <span>삭제</span>
         </div>
-        <div class="swipe-hint">
+        <div class="swipe-hint flex items-center gap-2">
           <span>보관</span>
-          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+          <svg class="w-[18px] h-[18px] stroke-accent-warn fill-none stroke-2"><use href="#icon-arrow-right"></use></svg>
         </div>
       </div>
     </div>
@@ -1938,49 +513,45 @@
 
   <!-- AI Suggestion Screen -->
   <div id="ai-suggestion" class="screen">
-    <button class="btn btn-icon btn-secondary back-btn" id="ai-back">
-      <svg viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+    <button class="btn btn-icon btn-secondary back-btn fixed top-4 left-4 z-[100]" id="ai-back">
+      <svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-arrow-left"></use></svg>
     </button>
 
-    <div class="ai-container">
-      <div class="ai-header">
-        <h2 class="ai-title">AI 구조 제안</h2>
-        <p class="ai-subtitle">분석된 파일 패턴을 기반으로 최적화된 폴더 구조를 제안합니다</p>
+    <div class="ai-container max-w-[900px] w-full">
+      <div class="ai-header text-center mb-8">
+        <h2 class="ai-title text-3xl mb-3 font-display">AI 구조 제안</h2>
+        <p class="ai-subtitle text-text-secondary text-lg">분석된 파일 패턴을 기반으로 최적화된 폴더 구조를 제안합니다</p>
       </div>
 
-      <div class="comparison-view">
-        <div class="comparison-panel">
-          <div class="comparison-header">
-            <span class="comparison-badge before">현재</span>
+      <div class="comparison-view grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-6 items-start mb-8">
+        <div class="comparison-panel bg-surface-card rounded-[28px] shadow-md p-6">
+          <div class="comparison-header flex items-center gap-3 mb-5 pb-4 border-b border-surface-secondary">
+            <span class="comparison-badge before px-3 py-1 rounded-full text-xs font-bold uppercase bg-red-500/15 text-accent-danger">현재</span>
             <span>현재 폴더 구조</span>
           </div>
-          <div class="comparison-tree" id="before-tree">
-            <!-- Filled by JS -->
-          </div>
+          <div class="comparison-tree flex flex-col gap-2" id="before-tree"></div>
         </div>
 
-        <div class="comparison-arrow">
-          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        <div class="comparison-arrow hidden md:flex items-center justify-center pt-16">
+          <svg class="w-12 h-12 stroke-primary fill-none animate-pulse-slow"><use href="#icon-arrow-right"></use></svg>
         </div>
 
-        <div class="comparison-panel">
-          <div class="comparison-header">
-            <span class="comparison-badge after">제안</span>
+        <div class="comparison-panel bg-surface-card rounded-[28px] shadow-md p-6">
+          <div class="comparison-header flex items-center gap-3 mb-5 pb-4 border-b border-surface-secondary">
+            <span class="comparison-badge after px-3 py-1 rounded-full text-xs font-bold uppercase bg-emerald-500/15 text-accent">제안</span>
             <span>정리된 구조</span>
           </div>
-          <div class="comparison-tree" id="after-tree">
-            <!-- Filled by JS -->
-          </div>
+          <div class="comparison-tree flex flex-col gap-2" id="after-tree"></div>
         </div>
       </div>
 
-      <div class="ai-actions">
+      <div class="ai-actions flex justify-center gap-4">
         <button class="btn btn-secondary" id="ai-cancel">
-          <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          <svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-x-mark"></use></svg>
           <span>취소</span>
         </button>
         <button class="btn btn-primary" id="ai-apply">
-          <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
+          <svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-check"></use></svg>
           <span>구조 적용하기</span>
         </button>
       </div>
@@ -1989,89 +560,89 @@
 
   <!-- Settings Screen -->
   <div id="settings" class="screen">
-    <button class="btn btn-icon btn-secondary back-btn" id="settings-back">
-      <svg viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+    <button class="btn btn-icon btn-secondary back-btn fixed top-4 left-4 z-[100]" id="settings-back">
+      <svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-arrow-left"></use></svg>
     </button>
 
-    <div class="settings-container">
-      <div class="settings-header">
-        <h2 class="settings-title">설정</h2>
-        <p class="settings-subtitle">앱 환경 사용자 지정</p>
+    <div class="settings-container max-w-[600px] w-full">
+      <div class="settings-header mb-8">
+        <h2 class="settings-title text-3xl mb-2 font-display">설정</h2>
+        <p class="settings-subtitle text-text-secondary">앱 환경 사용자 지정</p>
       </div>
 
-      <div class="settings-section">
-        <h3 class="settings-section-title">알림</h3>
-        <div class="setting-row">
-          <div class="setting-info">
-            <div class="setting-name">정리 알림</div>
-            <div class="setting-desc">매일 일정한 시간에 파일 정리를 안내합니다</div>
+      <div class="settings-section bg-surface-card rounded-[28px] shadow-md p-6 mb-5">
+        <h3 class="settings-section-title text-lg mb-5 pb-3 border-b border-surface-secondary font-display">알림</h3>
+        <div class="setting-row flex items-center justify-between py-4 border-b border-surface-secondary">
+          <div class="setting-info flex-1">
+            <div class="setting-name font-medium mb-1">정리 알림</div>
+            <div class="setting-desc text-sm text-text-secondary">매일 일정한 시간에 파일 정리를 안내합니다</div>
           </div>
-          <div class="toggle active" id="toggle-notifications"></div>
+          <div class="toggle active w-14 h-8 bg-surface-secondary rounded-full cursor-pointer transition-all duration-250 relative" id="toggle-notifications"></div>
         </div>
-        <div class="setting-row">
-          <div class="setting-info">
-            <div class="setting-name">습관 형성 알림</div>
-            <div class="setting-desc">정리 습관 형성을 돕는 동기를 부여합니다</div>
+        <div class="setting-row flex items-center justify-between py-4 border-b-0">
+          <div class="setting-info flex-1">
+            <div class="setting-name font-medium mb-1">습관 형성 알림</div>
+            <div class="setting-desc text-sm text-text-secondary">정리 습관 형성을 돕는 동기를 부여합니다</div>
           </div>
-          <div class="toggle" id="toggle-habits"></div>
+          <div class="toggle w-14 h-8 bg-surface-secondary rounded-full cursor-pointer transition-all duration-250 relative" id="toggle-habits"></div>
         </div>
       </div>
 
-      <div class="settings-section">
-        <h3 class="settings-section-title">정리 습관</h3>
-        <div class="setting-row">
-          <div class="setting-info">
-            <div class="setting-name">자동 정리</div>
-            <div class="setting-desc">자동으로 파일을 제안된 구조로 정리합니다</div>
+      <div class="settings-section bg-surface-card rounded-[28px] shadow-md p-6 mb-5">
+        <h3 class="settings-section-title text-lg mb-5 pb-3 border-b border-surface-secondary font-display">정리 습관</h3>
+        <div class="setting-row flex items-center justify-between py-4 border-b border-surface-secondary">
+          <div class="setting-info flex-1">
+            <div class="setting-name font-medium mb-1">자동 정리</div>
+            <div class="setting-desc text-sm text-text-secondary">자동으로 파일을 제안된 구조로 정리합니다</div>
           </div>
-          <div class="toggle" id="toggle-auto-organize"></div>
+          <div class="toggle w-14 h-8 bg-surface-secondary rounded-full cursor-pointer transition-all duration-250 relative" id="toggle-auto-organize"></div>
         </div>
-        <div class="setting-row">
-          <div class="setting-info">
-            <div class="setting-name">삭제 전 확인</div>
-            <div class="setting-desc">파일 삭제 전에 확인 메시지를 표시합니다</div>
+        <div class="setting-row flex items-center justify-between py-4 border-b-0">
+          <div class="setting-info flex-1">
+            <div class="setting-name font-medium mb-1">삭제 전 확인</div>
+            <div class="setting-desc text-sm text-text-secondary">파일 삭제 전에 확인 메시지를 표시합니다</div>
           </div>
-          <div class="toggle active" id="toggle-confirm-delete"></div>
+          <div class="toggle active w-14 h-8 bg-surface-secondary rounded-full cursor-pointer transition-all duration-250 relative" id="toggle-confirm-delete"></div>
         </div>
       </div>
 
-      <div class="settings-section">
-        <h3 class="settings-section-title">테마</h3>
-        <div class="setting-row">
-          <div class="setting-info">
-            <div class="setting-name">외관</div>
-            <div class="setting-desc">라이트 또는 다크 모드를 선택하세요</div>
+      <div class="settings-section bg-surface-card rounded-[28px] shadow-md p-6 mb-5">
+        <h3 class="settings-section-title text-lg mb-5 pb-3 border-b border-surface-secondary font-display">테마</h3>
+        <div class="setting-row flex items-center justify-between py-4 border-b-0">
+          <div class="setting-info flex-1">
+            <div class="setting-name font-medium mb-1">외관</div>
+            <div class="setting-desc text-sm text-text-secondary">라이트 또는 다크 모드를 선택하세요</div>
           </div>
-          <div class="theme-selector">
-            <div class="theme-option light active" data-theme="light">
-              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+          <div class="theme-selector flex gap-3">
+            <div class="theme-option light active w-12 h-12 rounded-[12px] cursor-pointer border-[3px] border-transparent transition-all duration-250 hover:scale-105 flex items-center justify-center bg-gradient-to-br from-[#faf9fb] to-[#f3f2f7]" data-theme="light">
+              <svg class="w-5 h-5 stroke-text-primary fill-none"><use href="#icon-sun"></use></svg>
             </div>
-            <div class="theme-option dark" data-theme="dark">
-              <svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
+            <div class="theme-option dark w-12 h-12 rounded-[12px] cursor-pointer border-[3px] border-transparent transition-all duration-250 hover:scale-105 flex items-center justify-center bg-gradient-to-br from-[#0f0e17] to-[#252336]" data-theme="dark">
+              <svg class="w-5 h-5 stroke-text-primary fill-none"><use href="#icon-moon"></use></svg>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="settings-section">
-        <h3 class="settings-section-title">데이터</h3>
-        <div class="setting-row">
-          <div class="setting-info">
-            <div class="setting-name">데이터 내보내기</div>
-            <div class="setting-desc">정리된 파일 구조를 JSON으로 내보냅니다</div>
+      <div class="settings-section bg-surface-card rounded-[28px] shadow-md p-6">
+        <h3 class="settings-section-title text-lg mb-5 pb-3 border-b border-surface-secondary font-display">데이터</h3>
+        <div class="setting-row flex items-center justify-between py-4 border-b border-surface-secondary">
+          <div class="setting-info flex-1">
+            <div class="setting-name font-medium mb-1">데이터 내보내기</div>
+            <div class="setting-desc text-sm text-text-secondary">정리된 파일 구조를 JSON으로 내보냅니다</div>
           </div>
           <button class="btn btn-secondary" id="export-data">
-            <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+            <svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-download"></use></svg>
             <span>내보내기</span>
           </button>
         </div>
-        <div class="setting-row">
-          <div class="setting-info">
-            <div class="setting-name">데이터 초기화</div>
-            <div class="setting-desc">모든 데이터를 초기 상태로 되돌립니다</div>
+        <div class="setting-row flex items-center justify-between py-4 border-b-0">
+          <div class="setting-info flex-1">
+            <div class="setting-name font-medium mb-1">데이터 초기화</div>
+            <div class="setting-desc text-sm text-text-secondary">모든 데이터를 초기 상태로 되돌립니다</div>
           </div>
-          <button class="btn btn-secondary" id="reset-data" style="color: var(--accent-danger)">
-            <svg viewBox="0 0 24 24"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
+          <button class="btn btn-secondary text-accent-danger" id="reset-data">
+            <svg class="w-5 h-5 stroke-current fill-none"><use href="#icon-trash"></use></svg>
             <span>초기화</span>
           </button>
         </div>
@@ -2080,13 +651,13 @@
   </div>
 
   <!-- Success Modal -->
-  <div class="modal-overlay" id="success-modal">
-    <div class="modal">
-      <div class="modal-icon">
-        <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
+  <div class="modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-[1000] opacity-0 invisible transition-all duration-250" id="success-modal">
+    <div class="modal bg-surface-card rounded-[28px] p-8 max-w-[400px] w-[90%] text-center scale-90 transition-transform duration-500" style="transform: scale(0.9)">
+      <div class="modal-icon w-20 h-20 mx-auto mb-5 bg-gradient-to-br from-accent to-emerald-500 rounded-full flex items-center justify-center">
+        <svg class="w-10 h-10 stroke-white fill-none"><use href="#icon-check"></use></svg>
       </div>
-      <h3 class="modal-title">정리 완료!</h3>
-      <p class="modal-desc">파일 정리가 성공적으로 완료되었습니다.</p>
+      <h3 class="modal-title text-2xl mb-3 font-display">정리 완료!</h3>
+      <p class="modal-desc text-text-secondary mb-6">파일 정리가 성공적으로 완료되었습니다.</p>
       <button class="btn btn-primary" id="modal-close">
         <span>계속하기</span>
       </button>
@@ -2094,19 +665,14 @@
   </div>
 
   <!-- Toast -->
-  <div class="toast" id="toast">
-    <div class="toast-icon streak">
-      <svg viewBox="0 0 24 24"><path d="M12 2L8 12l4-2 4 2-4-10zM8 14l-4 8h4l2-4 2 4h4l-4-8"/></svg>
+  <div class="toast fixed bottom-8 left-1/2 -translate-x-1/2 translate-y-[100px] bg-surface-card px-6 py-4 rounded-full shadow-lg flex items-center gap-3 z-[500] transition-transform duration-500" id="toast">
+    <div class="toast-icon w-8 h-8 rounded-full flex items-center justify-center bg-amber-500/15 text-accent-warn">
+      <svg class="w-[18px] h-[18px] fill-current text-orange-500"><use href="#icon-fire"></use></svg>
     </div>
-    <span class="toast-message" id="toast-message">7일 스트릭 달성!</span>
+    <span class="toast-message font-medium" id="toast-message">7일 스트릭 달성!</span>
   </div>
 
   <script>
-    // ============================================
-    // Chakmate - Intelligent Digital Asset Management
-    // ============================================
-
-    // State Management
     const state = {
       currentScreen: 'onboarding',
       onboardingStep: 1,
@@ -2119,7 +685,6 @@
       settings: JSON.parse(localStorage.getItem('chackly_settings') || '{"notifications":true,"habits":false,"autoOrganize":false,"confirmDelete":true}')
     };
 
-    // Mock Data
     const mockFiles = [
       { name: 'IMG_20240115_123456.jpg', type: 'image', size: '3.2 MB', date: '2024년 1월 15일', folder: '📷 사진' },
       { name: 'report_Q4_2023.pdf', type: 'pdf', size: '1.8 MB', date: '2024년 1월 10일', folder: '📄 문서' },
@@ -2147,137 +712,71 @@
       { name: '📁 영상', type: 'folder', children: [
         { name: '🎬 vacation_video.mp4', type: 'video', meta: '156 MB' }
       ]},
-      { name: '📁 downloads', type: 'folder', children: [
-        { name: '📦 project_files.zip', type: 'archive', meta: '45 MB' },
-        { name: '🎵 music_playlist.m3u', type: 'audio', meta: '12 KB' },
-        { name: '📊 budget_2024.xlsx', type: 'spreadsheet', meta: '567 KB' }
+      { name: '📁 압축', type: 'folder', children: [
+        { name: '📦 project_files.zip', type: 'archive', meta: '45 MB' }
       ]}
     ];
 
     const suggestions = [
-      { id: 1, name: '📷 사진 폴더 생성', detail: '최근 15개 이미지 파일 이동', checked: true },
-      { id: 2, name: '📄 문서 정리', detail: '프로젝트별 하위 폴더 생성', checked: true },
-      { id: 3, name: '🗑️ 중복 파일 검사', detail: '3개의 중복 파일 발견', checked: false },
-      { id: 4, name: '📦 압축 해제', detail: 'project_files.zip 압축 풀기', checked: true }
+      { name: '📷 사진 → 2024', detail: '2개 파일 이동', selected: false },
+      { name: '📄 문서 → quarterly', detail: '3개 파일 이동', selected: true },
+      { name: '📦 압축 → 보관', detail: '1개 파일 이동', selected: false }
     ];
 
     const achievements = [
-      { id: 1, name: '첫 걸음', icon: 'gold', unlocked: true },
-      { id: 2, name: '정리 달인', icon: 'gold', unlocked: true },
-      { id: 3, name: '일주일 스트릭', icon: 'gold', unlocked: true },
-      { id: 4, name: '100파일 정리', icon: 'gold', unlocked: true },
-      { id: 5, name: '한달 스트릭', icon: 'silver', unlocked: false },
-      { id: 6, name: '500파일 정리', icon: 'silver', unlocked: false },
-      { id: 7, name: '백만장자', icon: 'bronze', unlocked: false },
-      { id: 8, name: '보안 수호자', icon: 'bronze', unlocked: false }
+      { name: '첫 정리', icon: '🏆', color: 'gold', unlocked: true },
+      { name: '7일 스트릭', icon: '🔥', color: 'gold', unlocked: true },
+      { name: '파일 마스터', icon: '📁', color: 'silver', unlocked: true },
+      { name: '정리의 달인', icon: '⭐', color: 'silver', unlocked: true },
+      { name: '30일 스트릭', icon: '💎', color: 'gold', unlocked: false },
+      { name: 'AI 활용자', icon: '🤖', color: 'bronze', unlocked: false },
+      { name: '조직력왕', icon: '👑', color: 'silver', unlocked: false },
+      { name: '창의命名', icon: '💡', color: 'bronze', unlocked: false }
     ];
 
-    const motivationalMessages = [
-      '素晴らしい! 스트릭 유지!',
-      '잘하고 있어요! 💪',
-      '오늘도 깔끔하게! ✨',
-      '파일 정리의 달인! 🎉',
-      '계속 진행하세요! 🚀'
-    ];
-
-    // Icon SVGs
-    const icons = {
-      folder: '<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>',
-      image: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
-      pdf: '<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>',
-      doc: '<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
-      video: '<svg viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>',
-      archive: '<svg viewBox="0 0 24 24"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>',
-      audio: '<svg viewBox="0 0 24 24"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>',
-      spreadsheet: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>',
-      check: '<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>'
-    };
-
-    // ============================================
-    // Screen Navigation
-    // ============================================
-
     function showScreen(screenId) {
       document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
       document.getElementById(screenId).classList.add('active');
       state.currentScreen = screenId;
     }
 
-    // ============================================
-    // Onboarding
-    // ============================================
-
-    function initOnboarding() {
-      const nextBtn = document.getElementById('onboarding-next');
-      const stepDots = document.querySelectorAll('.step-dot');
-      const steps = document.querySelectorAll('.onboarding-step');
-
-      nextBtn.addEventListener('click', () => {
-        if (state.onboardingStep < 3) {
-          state.onboardingStep++;
-
-          stepDots.forEach((dot, i) => {
-            dot.classList.toggle('active', i < state.onboardingStep);
-          });
-
-          steps.forEach(step => {
-            step.classList.toggle('active', parseInt(step.dataset.step) === state.onboardingStep);
-          });
-
-          if (state.onboardingStep === 3) {
-            nextBtn.innerHTML = '<span>시작하기</span><svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>';
-          }
-        } else {
-          localStorage.setItem('chackly_onboarded', 'true');
-          showScreen('dashboard');
-          initDashboard();
-        }
+    function updateOnboardingStep(step) {
+      document.querySelectorAll('.step-dot').forEach((dot, i) => {
+        const isActive = i + 1 === step;
+        dot.classList.toggle('active', isActive);
+        dot.classList.toggle('bg-primary', isActive);
+        dot.classList.toggle('bg-text-muted', !isActive);
+        dot.style.width = isActive ? '32px' : '8px';
       });
-    }
-
-    // ============================================
-    // Dashboard
-    // ============================================
-
-    function initDashboard() {
-      document.getElementById('streak-count').textContent = state.streak;
-      document.getElementById('files-organized').textContent = state.filesOrganized;
-      document.getElementById('folders-managed').textContent = state.foldersManaged;
-      document.getElementById('current-streak').textContent = state.streak + '일';
-
-      renderFileTree();
-      renderSuggestions();
-      renderAchievements();
-
-      // Navigation buttons
-      document.getElementById('settings-btn').addEventListener('click', () => showScreen('settings'));
-      document.getElementById('view-all-btn').addEventListener('click', () => {
-        showScreen('ai-suggestion');
-        initAISuggestion();
-      });
-      document.getElementById('apply-suggestions').addEventListener('click', () => {
-        showScreen('swipe-screen');
-        initSwipe();
+      document.querySelectorAll('.onboarding-step').forEach(s => {
+        const isActive = parseInt(s.dataset.step) === step;
+        s.classList.toggle('active', isActive);
+        s.classList.toggle('hidden', !isActive);
       });
+      state.onboardingStep = step;
     }
 
     function renderFileTree() {
       const container = document.getElementById('file-tree');
-      container.innerHTML = fileTree.map(folder => `
-        <div class="tree-item folder">
-          <div class="tree-icon folder-icon">${icons.folder}</div>
-          <div class="tree-item-info">
-            <div class="tree-item-name">${folder.name}</div>
-            <div class="tree-item-meta">${folder.children.length}개 항목</div>
+      container.innerHTML = fileTree.map(item => `
+        <div class="tree-item folder flex items-center gap-3 p-3 bg-accent/10 rounded-[12px] cursor-pointer hover:bg-overlay hover:translate-x-1 transition-all duration-150">
+          <div class="tree-icon folder-icon w-8 h-8 rounded-[8px] flex items-center justify-center flex-shrink-0 bg-primary/15 text-primary">
+            <svg class="w-[18px] h-[18px] stroke-current fill-none stroke-2"><use href="#icon-folder"></use></svg>
+          </div>
+          <div class="tree-item-info flex-1 min-w-0">
+            <div class="tree-item-name font-medium truncate">${item.name}</div>
+            <div class="tree-item-meta text-xs text-text-muted">${item.children.length}개 항목</div>
           </div>
         </div>
-        <div class="tree-children">
-          ${folder.children.map(file => `
-            <div class="tree-item">
-              <div class="tree-icon ${getFileIconClass(file.type)}">${icons[getFileIcon(file.type)] || icons.doc}</div>
-              <div class="tree-item-info">
-                <div class="tree-item-name">${file.name}</div>
-                <div class="tree-item-meta">${file.meta}</div>
+        <div class="tree-children ml-8 flex flex-col gap-2">
+          ${item.children.map(child => `
+            <div class="tree-item flex items-center gap-3 p-3 bg-surface-secondary rounded-[12px] cursor-pointer hover:bg-overlay hover:translate-x-1 transition-all duration-150">
+              <div class="tree-icon ${child.type === 'image' ? 'image-icon' : child.type === 'video' ? 'image-icon' : 'doc-icon'} w-8 h-8 rounded-[8px] flex items-center justify-center flex-shrink-0 ${child.type === 'image' ? 'bg-pink-500/15 text-secondary' : child.type === 'video' ? 'bg-purple-500/15 text-purple-500' : 'bg-amber-500/15 text-accent-warn'}">
+                <svg class="w-[18px] h-[18px] stroke-current fill-none stroke-2"><use href="#icon-document"></use></svg>
+              </div>
+              <div class="tree-item-info flex-1 min-w-0">
+                <div class="tree-item-name font-medium truncate">${child.name}</div>
+                <div class="tree-item-meta text-xs text-text-muted">${child.meta}</div>
               </div>
             </div>
           `).join('')}
@@ -2285,37 +784,26 @@
       `).join('');
     }
 
-    function getFileIcon(type) {
-      const map = { image: 'image', pdf: 'pdf', doc: 'doc', video: 'video', archive: 'archive', audio: 'audio', spreadsheet: 'spreadsheet' };
-      return map[type] || 'doc';
-    }
-
-    function getFileIconClass(type) {
-      const map = { image: 'image-icon', pdf: 'doc-icon', doc: 'doc-icon', video: 'file-icon', archive: 'file-icon', audio: 'file-icon', spreadsheet: 'doc-icon' };
-      return map[type] || 'file-icon';
-    }
-
     function renderSuggestions() {
       const container = document.getElementById('suggestion-list');
-      container.innerHTML = suggestions.map(s => `
-        <div class="suggestion-item ${s.checked ? 'selected' : ''}" data-id="${s.id}">
-          <div class="suggestion-checkbox">${icons.check}</div>
-          <div class="suggestion-content">
-            <div class="suggestion-name">${s.name}</div>
-            <div class="suggestion-detail">${s.detail}</div>
+      container.innerHTML = suggestions.map((s, i) => `
+        <div class="suggestion-item flex items-center gap-3 p-3 bg-surface-secondary rounded-[12px] cursor-pointer border-2 border-transparent transition-all duration-150 ${s.selected ? 'bg-primary/10 border-primary' : 'hover:bg-overlay hover:border-primary-light'}" data-index="${i}">
+          <div class="suggestion-checkbox w-6 h-6 border-2 ${s.selected ? 'bg-primary border-primary' : 'border-text-muted'} rounded-[8px] flex items-center justify-center flex-shrink-0 transition-all duration-150">
+            <svg class="w-3.5 h-3.5 stroke-white fill-none ${s.selected ? 'opacity-100' : 'opacity-0'} transition-opacity duration-150"><use href="#icon-check"></use></svg>
           </div>
-          <div class="suggestion-arrow">
-            <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+          <div class="suggestion-content flex-1">
+            <div class="suggestion-name font-medium mb-0.5">${s.name}</div>
+            <div class="suggestion-detail text-sm text-text-secondary">${s.detail}</div>
           </div>
+          <svg class="suggestion-arrow w-5 h-5 stroke-text-muted fill-none"><use href="#icon-chevron-right"></use></svg>
         </div>
       `).join('');
 
       container.querySelectorAll('.suggestion-item').forEach(item => {
         item.addEventListener('click', () => {
-          item.classList.toggle('selected');
-          const id = parseInt(item.dataset.id);
-          const suggestion = suggestions.find(s => s.id === id);
-          if (suggestion) suggestion.checked = !suggestion.checked;
+          const idx = parseInt(item.dataset.index);
+          suggestions[idx].selected = !suggestions[idx].selected;
+          renderSuggestions();
         });
       });
     }
@@ -2323,358 +811,122 @@
     function renderAchievements() {
       const container = document.getElementById('achievements-grid');
       container.innerHTML = achievements.map(a => `
-        <div class="achievement ${a.unlocked ? '' : 'locked'}" title="${a.name}">
-          <div class="achievement-icon ${a.icon}">
-            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+        <div class="achievement aspect-square bg-surface-secondary rounded-[12px] flex flex-col items-center justify-center gap-1 p-2 transition-all duration-250 cursor-pointer hover:scale-105 ${a.unlocked ? '' : 'opacity-40 grayscale'}">
+          <div class="achievement-icon w-9 h-9 rounded-[8px] flex items-center justify-center ${a.unlocked ? a.color === 'gold' ? 'bg-gradient-to-br from-amber-400 to-amber-600 text-white' : a.color === 'silver' ? 'bg-gradient-to-br from-gray-300 to-gray-500 text-white' : 'bg-gradient-to-br from-amber-700 to-amber-900 text-white' : 'bg-overlay text-primary'}">
+            <span class="text-lg">${a.icon}</span>
           </div>
-          <span class="achievement-name">${a.name}</span>
-          <span class="badge-tooltip">${a.unlocked ? '달성!' : '잠김'}</span>
+          <div class="achievement-name text-[10px] text-center text-text-secondary">${a.name}</div>
+          <div class="badge-tooltip absolute -top-8 left-1/2 -translate-x-1/2 bg-text-primary text-surface-card px-2 py-1 rounded-[8px] text-xs whitespace-nowrap opacity-0 invisible transition-all duration-150">${a.name}</div>
         </div>
       `).join('');
     }
 
-    // ============================================
-    // Swipe Interface
-    // ============================================
-
-    function initSwipe() {
-      state.swipeIndex = 0;
-      state.swipeHistory = [];
-      updateSwipeCard();
-
-      const card = document.getElementById('current-card');
-      const deleteBtn = document.getElementById('swipe-delete');
-      const keepBtn = document.getElementById('swipe-keep');
-      const undoBtn = document.getElementById('swipe-undo');
-
-      let startX = 0, currentX = 0, isDragging = false;
-
-      const handleStart = (e) => {
-        isDragging = true;
-        startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
-        card.classList.add('dragging');
-      };
-
-      const handleMove = (e) => {
-        if (!isDragging) return;
-        e.preventDefault();
-        currentX = (e.type === 'mousemove' ? e.clientX : e.touches[0].clientX) - startX;
-        const rotation = currentX * 0.05;
-        card.style.transform = `translateX(${currentX}px) rotate(${rotation}deg)`;
-
-        card.classList.remove('swiping-left', 'swiping-right');
-        if (currentX < -50) card.classList.add('swiping-left');
-        if (currentX > 50) card.classList.add('swiping-right');
-      };
-
-      const handleEnd = () => {
-        if (!isDragging) return;
-        isDragging = false;
-        card.classList.remove('dragging');
-
-        if (currentX < -100) {
-          swipeLeft();
-        } else if (currentX > 100) {
-          swipeRight();
-        } else {
-          card.style.transform = '';
-          card.classList.remove('swiping-left', 'swiping-right');
-        }
-        currentX = 0;
-      };
-
-      card.addEventListener('mousedown', handleStart);
-      card.addEventListener('touchstart', handleStart, { passive: true });
-      document.addEventListener('mousemove', handleMove);
-      document.addEventListener('touchmove', handleMove, { passive: false });
-      document.addEventListener('mouseup', handleEnd);
-      document.addEventListener('touchend', handleEnd);
-
-      deleteBtn.addEventListener('click', swipeLeft);
-      keepBtn.addEventListener('click', swipeRight);
-      undoBtn.addEventListener('click', undoSwipe);
-
-      document.getElementById('swipe-back').addEventListener('click', () => {
-        showScreen('dashboard');
-        initDashboard();
-      });
-    }
-
     function updateSwipeCard() {
-      if (state.swipeIndex >= mockFiles.length) {
-        showSuccessModal();
-        return;
-      }
-
+      if (state.swipeIndex >= mockFiles.length) return;
       const file = mockFiles[state.swipeIndex];
-      const card = document.getElementById('current-card');
-      const iconEl = document.getElementById('card-icon');
-      const iconMap = { image: 'image', pdf: 'pdf', video: 'video', doc: 'doc' };
-
-      iconEl.className = `card-file-icon ${iconMap[file.type] || 'doc'}`;
-      iconEl.innerHTML = icons[iconMap[file.type]] || icons.doc;
       document.getElementById('card-filename').textContent = file.name;
       document.getElementById('card-meta').textContent = `${file.date} • ${file.size}`;
-      document.getElementById('card-suggestion').innerHTML = `<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg><span>${file.folder}로 이동</span>`;
-
+      document.getElementById('card-suggestion').innerHTML = `<svg class="w-4 h-4 stroke-primary fill-none"><use href="#icon-folder"></use></svg><span>${file.folder}로 이동</span>`;
+      const iconEl = document.getElementById('card-icon');
+      iconEl.className = `card-file-icon ${file.type === 'image' ? 'image' : file.type === 'video' ? 'video' : file.type === 'pdf' ? 'pdf' : 'doc'} w-20 h-20 mx-auto my-6 rounded-[20px] flex items-center justify-center ${file.type === 'image' ? 'bg-pink-500/15 text-secondary' : file.type === 'video' ? 'bg-purple-500/15 text-purple-500' : file.type === 'pdf' ? 'bg-amber-500/15 text-accent-warn' : 'bg-primary/15 text-primary'}`;
+      document.getElementById('swipe-progress-fill').style.width = `${((state.swipeIndex + 1) / mockFiles.length) * 100}%`;
       document.getElementById('swipe-current').textContent = state.swipeIndex + 1;
       document.getElementById('swipe-total').textContent = mockFiles.length;
-      document.getElementById('swipe-progress-fill').style.width = `${((state.swipeIndex + 1) / mockFiles.length) * 100}%`;
-
-      document.getElementById('swipe-undo').style.display = state.swipeHistory.length > 0 ? 'flex' : 'none';
-
-      // Reset card state
-      card.style.transform = '';
-      card.classList.remove('swiping-left', 'swiping-right');
     }
 
-    function swipeLeft() {
-      state.swipeHistory.push({ action: 'delete', file: mockFiles[state.swipeIndex] });
-      animateSwipe('left');
-    }
-
-    function swipeRight() {
-      state.swipeHistory.push({ action: 'keep', file: mockFiles[state.swipeIndex] });
-      state.filesOrganized++;
-      localStorage.setItem('chackly_files_organized', state.filesOrganized);
-      animateSwipe('right');
-    }
-
-    function animateSwipe(direction) {
-      const card = document.getElementById('current-card');
-      const transform = direction === 'left' ? 'translateX(-150%) rotate(-30deg)' : 'translateX(150%) rotate(30deg)';
-
-      card.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
-      card.style.transform = transform;
-      card.style.opacity = '0';
-
-      setTimeout(() => {
-        card.style.transition = '';
-        card.style.opacity = '';
-        state.swipeIndex++;
-        updateSwipeCard();
-      }, 400);
-    }
-
-    function undoSwipe() {
-      if (state.swipeHistory.length === 0) return;
-
-      const last = state.swipeHistory.pop();
-      if (last.action === 'keep') {
-        state.filesOrganized--;
-        localStorage.setItem('chackly_files_organized', state.filesOrganized);
-      }
-      state.swipeIndex--;
-
-      const card = document.getElementById('current-card');
-      card.style.transition = 'transform 0.3s ease';
-      card.style.transform = '';
-      card.style.opacity = '';
-
-      setTimeout(() => {
-        card.style.transition = '';
-        updateSwipeCard();
-        showToast(motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]);
-      }, 300);
-    }
-
-    // ============================================
-    // AI Suggestion View
-    // ============================================
-
-    function initAISuggestion() {
-      renderBeforeTree();
-      renderAfterTree();
-
-      document.getElementById('ai-back').addEventListener('click', () => {
-        showScreen('dashboard');
-        initDashboard();
-      });
-
-      document.getElementById('ai-cancel').addEventListener('click', () => {
-        showScreen('dashboard');
-        initDashboard();
-      });
-
-      document.getElementById('ai-apply').addEventListener('click', () => {
-        showSuccessModal();
-      });
-    }
-
-    function renderBeforeTree() {
-      const container = document.getElementById('before-tree');
-      container.innerHTML = `
-        <div class="comparison-folder">
-          <div class="comparison-folder-name">${icons.folder} downloads</div>
-          <div class="comparison-folder-files">
-            <div class="comparison-file">${icons.doc} report_Q4.pdf</div>
-            <div class="comparison-file">${icons.image} IMG_001.jpg</div>
-            <div class="comparison-file">${icons.video} video.mp4</div>
-            <div class="comparison-file">${icons.doc} notes.docx</div>
-            <div class="comparison-file">${icons.image} photo.png</div>
-            <div class="comparison-file">${icons.pdf} form.pdf</div>
-          </div>
-        </div>
-      `;
-    }
-
-    function renderAfterTree() {
-      const container = document.getElementById('after-tree');
-      container.innerHTML = `
-        <div class="comparison-folder new">
-          <div class="comparison-folder-name">${icons.folder} 📷 사진</div>
-          <div class="comparison-folder-files">
-            <div class="comparison-file">${icons.image} IMG_001.jpg</div>
-            <div class="comparison-file">${icons.image} photo.png</div>
-          </div>
-        </div>
-        <div class="comparison-folder new">
-          <div class="comparison-folder-name">${icons.folder} 📄 문서</div>
-          <div class="comparison-folder-files">
-            <div class="comparison-file">${icons.doc} report_Q4.pdf</div>
-            <div class="comparison-file">${icons.doc} notes.docx</div>
-          </div>
-        </div>
-        <div class="comparison-folder new">
-          <div class="comparison-folder-name">${icons.folder} 🎬 영상</div>
-          <div class="comparison-folder-files">
-            <div class="comparison-file">${icons.video} video.mp4</div>
-          </div>
-        </div>
-        <div class="comparison-folder new">
-          <div class="comparison-folder-name">${icons.folder} 📋 아카이브</div>
-          <div class="comparison-folder-files">
-            <div class="comparison-file">${icons.pdf} form.pdf</div>
-          </div>
-        </div>
-      `;
-    }
-
-    // ============================================
-    // Settings
-    // ============================================
-
-    function initSettings() {
-      const toggles = document.querySelectorAll('.toggle');
-      toggles.forEach(toggle => {
-        toggle.addEventListener('click', () => {
-          toggle.classList.toggle('active');
-          updateSettings(toggle.id);
-        });
-      });
-
-      const themeOptions = document.querySelectorAll('.theme-option');
-      themeOptions.forEach(option => {
-        option.addEventListener('click', () => {
-          themeOptions.forEach(o => o.classList.remove('active'));
-          option.classList.add('active');
-          setTheme(option.dataset.theme);
-        });
-      });
-
-      document.getElementById('settings-back').addEventListener('click', () => {
-        showScreen('dashboard');
-        initDashboard();
-      });
-
-      document.getElementById('reset-data').addEventListener('click', () => {
-        if (confirm('모든 데이터가 초기화됩니다. 계속하시겠습니까?')) {
-          localStorage.clear();
-          location.reload();
-        }
-      });
-
-      document.getElementById('export-data').addEventListener('click', () => {
-        const data = {
-          streak: state.streak,
-          filesOrganized: state.filesOrganized,
-          foldersManaged: state.foldersManaged,
-          fileTree: fileTree,
-          settings: state.settings
-        };
-        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'chackly-export.json';
-        a.click();
-        URL.revokeObjectURL(url);
-        showToast('데이터를 내보냈습니다!');
-      });
-
-      applyTheme();
-    }
-
-    function updateSettings(toggleId) {
-      const map = {
-        'toggle-notifications': 'notifications',
-        'toggle-habits': 'habits',
-        'toggle-auto-organize': 'autoOrganize',
-        'toggle-confirm-delete': 'confirmDelete'
-      };
-      const key = map[toggleId];
-      if (key) {
-        state.settings[key] = !state.settings[key];
-        localStorage.setItem('chackly_settings', JSON.stringify(state.settings));
-      }
-    }
-
-    function setTheme(theme) {
-      state.theme = theme;
-      localStorage.setItem('chackly_theme', theme);
-      applyTheme();
-    }
-
-    function applyTheme() {
-      document.documentElement.setAttribute('data-theme', state.theme);
-      const lightOption = document.querySelector('.theme-option.light');
-      const darkOption = document.querySelector('.theme-option.dark');
-      if (lightOption && darkOption) {
-        lightOption.classList.toggle('active', state.theme === 'light');
-        darkOption.classList.toggle('active', state.theme === 'dark');
-      }
-    }
-
-    // ============================================
-    // Modals & Toasts
-    // ============================================
-
-    function showSuccessModal() {
-      document.getElementById('success-modal').classList.add('active');
-    }
-
-    function hideSuccessModal() {
-      document.getElementById('success-modal').classList.remove('active');
-      showScreen('dashboard');
-      initDashboard();
-    }
-
-    function showToast(message) {
-      const toast = document.getElementById('toast');
-      document.getElementById('toast-message').textContent = message;
-      toast.classList.add('show');
-      setTimeout(() => toast.classList.remove('show'), 3000);
-    }
-
-    // ============================================
-    // Initialization
-    // ============================================
-
-    document.addEventListener('DOMContentLoaded', () => {
-      const onboarded = localStorage.getItem('chackly_onboarded');
-
-      initOnboarding();
-      initSettings();
-
-      document.getElementById('modal-close').addEventListener('click', hideSuccessModal);
-
-      if (onboarded) {
-        showScreen('dashboard');
-        initDashboard();
+    document.getElementById('onboarding-next').addEventListener('click', () => {
+      if (state.onboardingStep < 3) {
+        updateOnboardingStep(state.onboardingStep + 1);
       } else {
-        showScreen('onboarding');
+        showScreen('dashboard');
       }
     });
+
+    document.getElementById('settings-btn').addEventListener('click', () => showScreen('settings'));
+    document.getElementById('settings-back').addEventListener('click', () => showScreen('dashboard'));
+    document.getElementById('swipe-back').addEventListener('click', () => showScreen('dashboard'));
+    document.getElementById('ai-back').addEventListener('click', () => showScreen('dashboard'));
+    document.getElementById('apply-suggestions').addEventListener('click', () => showScreen('ai-suggestion'));
+
+    document.getElementById('ai-cancel').addEventListener('click', () => showScreen('dashboard'));
+    document.getElementById('ai-apply').addEventListener('click', () => {
+      showScreen('dashboard');
+      document.getElementById('success-modal').classList.add('active');
+      document.querySelector('.modal').style.transform = 'scale(1)';
+    });
+
+    document.getElementById('modal-close').addEventListener('click', () => {
+      document.getElementById('success-modal').classList.remove('active');
+    });
+
+    document.querySelectorAll('.toggle').forEach(toggle => {
+      toggle.addEventListener('click', () => {
+        toggle.classList.toggle('active');
+        toggle.style.background = toggle.classList.contains('active') ? '#3b82f6' : '';
+        toggle.querySelector('::after') && (toggle.style.setProperty('--after-transform', toggle.classList.contains('active') ? 'translateX(24px)' : ''));
+      });
+    });
+
+    document.querySelectorAll('.theme-option').forEach(option => {
+      option.addEventListener('click', () => {
+        document.querySelectorAll('.theme-option').forEach(o => o.classList.remove('active'));
+        option.classList.add('active');
+        document.body.setAttribute('data-theme', option.dataset.theme);
+        localStorage.setItem('chackly_theme', option.dataset.theme);
+      });
+    });
+
+    let touchStartX = 0;
+    const card = document.getElementById('current-card');
+
+    card.addEventListener('touchstart', e => {
+      touchStartX = e.touches[0].clientX;
+      card.classList.add('dragging');
+    });
+
+    card.addEventListener('touchmove', e => {
+      const diff = e.touches[0].clientX - touchStartX;
+      card.style.transform = `translateX(${diff}px) rotate(${diff * 0.05}deg)`;
+      card.classList.toggle('swiping-left', diff < -50);
+      card.classList.toggle('swiping-right', diff > 50);
+    });
+
+    card.addEventListener('touchend', e => {
+      const diff = e.changedTouches[0].clientX - touchStartX;
+      card.classList.remove('dragging', 'swiping-left', 'swiping-right');
+      if (Math.abs(diff) > 100) {
+        state.swipeHistory.push({ file: mockFiles[state.swipeIndex], action: diff > 0 ? 'keep' : 'delete' });
+        state.swipeIndex++;
+        updateSwipeCard();
+      } else {
+        card.style.transform = '';
+      }
+    });
+
+    document.getElementById('swipe-delete').addEventListener('click', () => {
+      state.swipeHistory.push({ file: mockFiles[state.swipeIndex], action: 'delete' });
+      state.swipeIndex++;
+      updateSwipeCard();
+    });
+
+    document.getElementById('swipe-keep').addEventListener('click', () => {
+      state.swipeHistory.push({ file: mockFiles[state.swipeIndex], action: 'keep' });
+      state.swipeIndex++;
+      updateSwipeCard();
+    });
+
+    document.getElementById('swipe-undo').addEventListener('click', () => {
+      if (state.swipeHistory.length > 0) {
+        state.swipeIndex--;
+        state.swipeHistory.pop();
+        updateSwipeCard();
+      }
+    });
+
+    renderFileTree();
+    renderSuggestions();
+    renderAchievements();
+    updateSwipeCard();
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/scene_ai_classification.html b/scene_ai_classification.html
index a29581e..d471f27 100644
--- a/scene_ai_classification.html
+++ b/scene_ai_classification.html
@@ -7,56 +7,129 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      /* Blue Light Puzzle Theme - Intelligent, Precise, Cool */
-      --primary: #3b82f6;
-      --primary-light: #60a5fa;
-      --primary-dark: #1d4ed8;
-      --secondary: #06b6d4;
-      --secondary-light: #22d3ee;
-      --accent: #0ea5e9;
-      --accent-warn: #38bdf8;
-      --accent-danger: #f472b6;
-
-      --bg-primary: #f8fafc;
-      --bg-secondary: #e2e8f0;
-      --bg-card: #ffffff;
-      --bg-overlay: rgba(14, 165, 233, 0.08);
-
-      --text-primary: #0f172a;
-      --text-secondary: #475569;
-      --text-muted: #94a3b8;
-
-      --shadow-sm: 0 2px 8px rgba(14, 165, 233, 0.06);
-      --shadow-md: 0 4px 20px rgba(14, 165, 233, 0.08);
-      --shadow-lg: 0 8px 40px rgba(14, 165, 233, 0.12);
-      --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.25);
-      --shadow-blue: 0 4px 20px rgba(59, 130, 246, 0.3);
-
-      --space-1: 4px;
-      --space-2: 8px;
-      --space-3: 12px;
-      --space-4: 16px;
-      --space-5: 20px;
-      --space-6: 24px;
-      --space-8: 32px;
-      --space-10: 40px;
-      --space-12: 48px;
-      --space-16: 64px;
-
-      --radius-sm: 8px;
-      --radius-md: 12px;
-      --radius-lg: 20px;
-      --radius-xl: 28px;
-      --radius-full: 9999px;
-
-      --transition-fast: 150ms ease;
-      --transition-base: 250ms ease;
-      --transition-slow: 400ms ease;
-      --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Heroicons SVG Sprite -->
+  <svg xmlns="http://www.w3.org/2000/svg" class="hidden">
+    <symbol id="icon-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 12H5M12 19l-7-7 7-7"/>
+    </symbol>
+    <symbol id="icon-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M5 12h14M12 5l7 7-7 7"/>
+    </symbol>
+    <symbol id="icon-sparkles" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 3v18M5.5 9.5L7.5 12M5.5 14.5L7.5 12M16.5 9.5L14.5 12M16.5 14.5L14.5 12M9 3l1.5 4.5L15 3M9 21l1.5-4.5L15 21"/>
+      <path d="M9 3l1.5 4.5M14.5 7.5L15 3l-4.5 1.5M9 21l1.5-4.5M14.5 16.5L15 21l-4.5-1.5"/>
+    </symbol>
+    <symbol id="icon-shield-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+      <path d="M9 12l2 2 4-4"/>
+    </symbol>
+    <symbol id="icon-chart-bar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="3"/>
+      <circle cx="19" cy="5" r="2"/>
+      <circle cx="5" cy="19" r="2"/>
+      <path d="M10.4 10.6l5.2 5.2M13.6 13.6l5.2 5.2"/>
+    </symbol>
+    <symbol id="icon-document" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+      <polyline points="14 2 14 8 20 8"/>
+    </symbol>
+    <symbol id="icon-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
+      <line x1="7" y1="7" x2="7.01" y2="7"/>
+    </symbol>
+    <symbol id="icon-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10"/>
+      <polyline points="12 6 12 12 16 14"/>
+    </symbol>
+    <symbol id="icon-photo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2"/>
+      <circle cx="8.5" cy="8.5" r="1.5"/>
+      <polyline points="21 15 16 10 5 21"/>
+    </symbol>
+    <symbol id="icon-arrow-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 19V5M5 12l7-7 7 7"/>
+    </symbol>
+    <symbol id="icon-magnifying-glass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="11" cy="11" r="8"/>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+    </symbol>
+    <symbol id="icon-sparkles-alt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+    </symbol>
+    <symbol id="icon-cpu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="8" y="8" width="12" height="12" rx="2"/>
+      <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>
+    </symbol>
+  </svg>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: { DEFAULT: '#3b82f6', light: '#60a5fa', dark: '#1d4ed8' },
+            secondary: { DEFAULT: '#06b6d4', light: '#22d3ee' },
+            accent: { DEFAULT: '#0ea5e9', warn: '#38bdf8', danger: '#f472b6' },
+            surface: { primary: '#f8fafc', secondary: '#e2e8f0', card: '#ffffff' },
+            text: { primary: '#0f172a', secondary: '#475569', muted: '#94a3b8' },
+          },
+          fontFamily: {
+            sans: ['Noto Sans KR', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+            display: ['Outfit', 'sans-serif'],
+          },
+          boxShadow: {
+            'sm': '0 2px 8px rgba(14, 165, 233, 0.06)',
+            'md': '0 4px 20px rgba(14, 165, 233, 0.08)',
+            'lg': '0 8px 40px rgba(14, 165, 233, 0.12)',
+            'glow': '0 0 30px rgba(14, 165, 233, 0.25)',
+            'blue': '0 4px 20px rgba(59, 130, 246, 0.3)',
+          },
+          animation: {
+            'float': 'float 3s ease-in-out infinite',
+            'fade-slide-up': 'fadeSlideUp 0.5s ease forwards',
+            'slide-in': 'slideIn 0.5s ease forwards',
+            'bounce-in': 'bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
+            'pulse-slow': 'pulse 2s ease-in-out infinite',
+            'pulse-glow': 'pulseGlow 4s ease-in-out infinite',
+            'spin': 'spin 2s linear infinite',
+            'node-pulse': 'nodePulse 1.5s ease-in-out infinite',
+          },
+          keyframes: {
+            float: {
+              '0%, 100%': { transform: 'translateY(0)' },
+              '50%': { transform: 'translateY(-10px)' },
+            },
+            fadeSlideUp: {
+              from: { opacity: '0', transform: 'translateY(20px)' },
+              to: { opacity: '1', transform: 'translateY(0)' },
+            },
+            slideIn: {
+              from: { opacity: '0', transform: 'translateY(30px)' },
+              to: { opacity: '1', transform: 'translateY(0)' },
+            },
+            bounceIn: {
+              '0%': { transform: 'scale(0)' },
+              '50%': { transform: 'scale(1.1)' },
+              '100%': { transform: 'scale(1)' },
+            },
+            pulse: {
+              '0%, 100%': { opacity: '0.5', transform: 'scale(1)' },
+              '50%': { opacity: '1', transform: 'scale(1.1)' },
+            },
+            pulseGlow: {
+              '0%, 100%': { transform: 'scale(1)', opacity: '0.5' },
+              '50%': { transform: 'scale(1.1)', opacity: '0.8' },
+            },
+            nodePulse: {
+              '0%, 100%': { transform: 'scale(1)', opacity: '0.6' },
+              '50%': { transform: 'scale(1.5)', opacity: '1' },
+            },
+          },
+        },
+      },
     }
-
+  </script>
+  <style>
     [data-theme="dark"] {
       --bg-primary: #0a0e1a;
       --bg-secondary: #111827;
@@ -70,1080 +143,256 @@
       --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
       --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.3);
     }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      min-height: 100vh;
-      overflow-x: hidden;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    h1, h2, h3, h4 {
-      font-family: 'Outfit', sans-serif;
-      font-weight: 600;
-    }
-
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-2);
-      padding: var(--space-4) var(--space-8);
-      border-radius: var(--radius-full);
-      font-size: 1rem;
-      font-weight: 600;
-      font-family: 'Outfit', sans-serif;
-      cursor: pointer;
-      border: none;
-      transition: all var(--transition-base);
-      min-height: 56px;
-      min-width: 160px;
-    }
-
-    .btn-primary {
-      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-      color: white;
-      box-shadow: var(--shadow-blue);
-    }
-
-    .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4);
-    }
-
-    .btn-primary:active {
-      transform: translateY(0);
-    }
-
-    .btn-secondary {
-      background: var(--bg-card);
-      color: var(--text-primary);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .btn-secondary:hover {
-      background: var(--bg-secondary);
-    }
-
-    .btn-ghost {
-      background: transparent;
-      color: var(--text-secondary);
-      min-width: auto;
-      padding: var(--space-3) var(--space-4);
-    }
-
-    .btn svg {
-      width: 20px;
-      height: 20px;
-      stroke: currentColor;
-      fill: none;
-    }
-
-    /* Main Container */
-    .ai-container {
-      max-width: 1200px;
-      width: 100%;
-      margin: 0 auto;
-      padding: var(--space-6);
-    }
-
-    /* Back Button */
-    .back-header {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-      margin-bottom: var(--space-8);
-    }
-
-    .back-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-2);
-      color: var(--text-secondary);
-      text-decoration: none;
-      font-weight: 500;
-      transition: color var(--transition-fast);
-      min-width: auto;
-      min-height: auto;
-      padding: var(--space-2) var(--space-4);
-      border-radius: var(--radius-md);
-    }
-
-    .back-btn:hover {
-      color: var(--primary);
-      background: var(--bg-overlay);
-    }
-
-    .back-btn svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    /* Privacy Hero Banner */
-    .privacy-hero {
-      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--primary-light) 100%);
-      border-radius: var(--radius-xl);
-      padding: var(--space-12) var(--space-8);
-      margin-bottom: var(--space-8);
-      position: relative;
-      overflow: hidden;
-      box-shadow: var(--shadow-lg);
-    }
-
-    .privacy-hero::before {
-      content: '';
-      position: absolute;
-      top: -50%;
-      right: -20%;
-      width: 400px;
-      height: 400px;
-      background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
-      animation: pulse-glow 4s ease-in-out infinite;
-    }
-
-    @keyframes pulse-glow {
-      0%, 100% { transform: scale(1); opacity: 0.5; }
-      50% { transform: scale(1.1); opacity: 0.8; }
-    }
-
-    .privacy-hero-content {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      gap: var(--space-6);
-    }
-
-    .shield-icon {
-      width: 80px;
-      height: 80px;
-      background: rgba(255,255,255,0.2);
-      border-radius: var(--radius-lg);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      backdrop-filter: blur(10px);
-    }
-
-    .shield-icon svg {
-      width: 48px;
-      height: 48px;
-      stroke: white;
-      fill: none;
-    }
-
-    .privacy-hero-text h1 {
-      color: white;
-      font-size: 1.75rem;
-      margin-bottom: var(--space-2);
-    }
-
-    .privacy-hero-text p {
-      color: rgba(255,255,255,0.9);
-      font-size: 1rem;
-    }
-
-    /* AI Status Bar */
-    .ai-status-bar {
-      background: var(--bg-card);
-      border-radius: var(--radius-lg);
-      padding: var(--space-6);
-      margin-bottom: var(--space-8);
-      box-shadow: var(--shadow-md);
-      display: flex;
-      align-items: center;
-      gap: var(--space-6);
-    }
-
-    .neural-icon {
-      width: 64px;
-      height: 64px;
-      position: relative;
-    }
-
-    .neural-ring {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      border: 4px solid var(--bg-secondary);
-      position: relative;
-    }
-
-    .neural-ring::before {
-      content: '';
-      position: absolute;
-      inset: -4px;
-      border-radius: 50%;
-      border: 4px solid transparent;
-      border-top-color: var(--primary);
-      animation: spin 2s linear infinite;
-    }
-
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-
-    .neural-nodes {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .neural-node {
-      width: 12px;
-      height: 12px;
-      background: var(--primary);
-      border-radius: 50%;
-      position: absolute;
-      animation: node-pulse 1.5s ease-in-out infinite;
-    }
-
-    .neural-node:nth-child(1) { top: 10%; left: 50%; animation-delay: 0s; }
-    .neural-node:nth-child(2) { top: 50%; right: 10%; animation-delay: 0.3s; }
-    .neural-node:nth-child(3) { bottom: 10%; left: 50%; animation-delay: 0.6s; }
-    .neural-node:nth-child(4) { top: 50%; left: 10%; animation-delay: 0.9s; }
-    .neural-node:nth-child(5) { center: true; top: 50%; left: 50%; animation-delay: 1.2s; }
-
-    @keyframes node-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.6; }
-      50% { transform: scale(1.5); opacity: 1; }
-    }
-
-    .ai-status-text {
-      flex: 1;
-    }
-
-    .ai-status-text h3 {
-      font-size: 1.1rem;
-      margin-bottom: var(--space-1);
-    }
-
-    .ai-status-text p {
-      color: var(--text-secondary);
-      font-size: 0.9rem;
-    }
-
-    .progress-ring-container {
-      position: relative;
-      width: 60px;
-      height: 60px;
-    }
-
-    .progress-ring {
-      transform: rotate(-90deg);
-    }
-
-    .progress-ring-bg {
-      fill: none;
-      stroke: var(--bg-secondary);
-      stroke-width: 6;
-    }
-
-    .progress-ring-fill {
-      fill: none;
-      stroke: var(--accent);
-      stroke-width: 6;
-      stroke-linecap: round;
-      stroke-dasharray: 157;
-      stroke-dashoffset: 157;
-      transition: stroke-dashoffset 1.5s ease-out;
-    }
-
-    .progress-ring-fill.animate {
-      stroke-dashoffset: 20;
-    }
-
-    .progress-percent {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: 'Outfit', sans-serif;
-      font-weight: 700;
-      font-size: 0.9rem;
-      color: var(--accent);
-    }
-
-    /* AI Discoveries Section */
-    .ai-discoveries {
-      margin-bottom: var(--space-8);
-    }
-
-    .section-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: var(--space-6);
-    }
-
-    .section-title {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-    }
-
-    .section-title h2 {
-      font-size: 1.5rem;
-    }
-
-    .section-title .badge {
-      background: var(--primary);
-      color: white;
-      font-size: 0.75rem;
-      padding: var(--space-1) var(--space-3);
-      border-radius: var(--radius-full);
-      font-weight: 600;
-    }
-
-    .discoveries-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: var(--space-6);
-    }
-
-    .discovery-card {
-      background: var(--bg-card);
-      border-radius: var(--radius-lg);
-      padding: var(--space-6);
-      box-shadow: var(--shadow-md);
-      opacity: 0;
-      transform: translateY(20px);
-      transition: all var(--transition-slow);
-    }
-
-    .discovery-card.visible {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
+    [data-theme="dark"] body { background: var(--bg-primary); color: var(--text-primary); }
+    [data-theme="dark"] .bg-primary { background: var(--bg-primary); }
+    [data-theme="dark"] .bg-secondary { background: var(--bg-secondary); }
+    [data-theme="dark"] .bg-card { background: var(--bg-card); }
+    [data-theme="dark"] .bg-overlay { background: var(--bg-overlay); }
+    [data-theme="dark"] .text-primary { color: var(--text-primary); }
+    [data-theme="dark"] .text-secondary { color: var(--text-secondary); }
+    [data-theme="dark"] .text-muted { color: var(--text-muted); }
+    [data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-sm); }
+    [data-theme="dark"] .shadow-md { box-shadow: var(--shadow-md); }
+    [data-theme="dark"] .shadow-lg { box-shadow: var(--shadow-lg); }
+    [data-theme="dark"] .shadow-glow { box-shadow: var(--shadow-glow); }
+    [data-theme="dark"] .border-secondary { border-color: var(--bg-secondary); }
+    
+    /* Neural network nodes animation delays */
+    .neural-node:nth-child(1) { animation-delay: 0s; }
+    .neural-node:nth-child(2) { animation-delay: 0.3s; }
+    .neural-node:nth-child(3) { animation-delay: 0.6s; }
+    .neural-node:nth-child(4) { animation-delay: 0.9s; }
+    .neural-node:nth-child(5) { animation-delay: 1.2s; }
+    
+    /* Discovery card stagger animation */
     .discovery-card:nth-child(1) { transition-delay: 0ms; }
     .discovery-card:nth-child(2) { transition-delay: 100ms; }
     .discovery-card:nth-child(3) { transition-delay: 200ms; }
     .discovery-card:nth-child(4) { transition-delay: 300ms; }
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-      margin-bottom: var(--space-5);
-    }
-
-    .card-icon {
-      width: 48px;
-      height: 48px;
-      border-radius: var(--radius-md);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .card-icon svg {
-      width: 24px;
-      height: 24px;
-      stroke: white;
-      fill: none;
-    }
-
-    .card-icon.clusters { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
-    .card-icon.duplicates { background: linear-gradient(135deg, var(--secondary), #ec4899); }
-    .card-icon.tags { background: linear-gradient(135deg, var(--accent), #059669); }
-    .card-icon.predictive { background: linear-gradient(135deg, var(--accent-warn), #f59e0b); }
-
-    .card-title-group h3 {
-      font-size: 1.1rem;
-      margin-bottom: var(--space-1);
-    }
-
-    .card-title-group span {
-      color: var(--text-muted);
-      font-size: 0.85rem;
-    }
-
-    /* Smart Clusters */
-    .cluster-list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-3);
-    }
-
-    .cluster-item {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-      padding: var(--space-4);
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-      transition: transform var(--transition-fast);
-    }
-
-    .cluster-item:hover {
-      transform: translateX(4px);
-    }
-
-    .cluster-color {
-      width: 12px;
-      height: 40px;
-      border-radius: var(--radius-sm);
-    }
-
-    .cluster-info {
-      flex: 1;
-    }
-
-    .cluster-info h4 {
-      font-size: 0.95rem;
-      font-weight: 600;
-      margin-bottom: var(--space-1);
-    }
-
-    .cluster-info p {
-      color: var(--text-muted);
-      font-size: 0.8rem;
-    }
-
-    .cluster-badge {
-      background: var(--bg-card);
-      padding: var(--space-2) var(--space-3);
-      border-radius: var(--radius-full);
-      font-size: 0.75rem;
-      font-weight: 600;
-      color: var(--text-secondary);
-    }
-
-    /* Duplicate Detection */
-    .duplicate-list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-4);
-    }
-
-    .duplicate-pair {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-      padding: var(--space-4);
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-    }
-
-    .file-icon {
-      width: 40px;
-      height: 40px;
-      background: linear-gradient(135deg, var(--secondary-light), var(--secondary));
-      border-radius: var(--radius-sm);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .file-icon svg {
-      width: 20px;
-      height: 20px;
-      stroke: white;
-      fill: none;
-    }
-
-    .duplicate-info {
-      flex: 1;
-    }
-
-    .duplicate-info p {
-      font-weight: 500;
-      font-size: 0.9rem;
-      margin-bottom: var(--space-1);
-    }
-
-    .duplicate-info span {
-      color: var(--text-muted);
-      font-size: 0.8rem;
-    }
-
-    .match-badge {
-      background: linear-gradient(135deg, var(--accent-warn), #f59e0b);
-      color: white;
-      padding: var(--space-2) var(--space-3);
-      border-radius: var(--radius-full);
-      font-size: 0.8rem;
-      font-weight: 700;
-    }
-
-    /* Auto Tags */
-    .tag-cloud {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--space-3);
-    }
-
-    .tag-pill {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-2);
-      padding: var(--space-3) var(--space-4);
-      background: var(--bg-secondary);
-      border-radius: var(--radius-full);
-      font-size: 0.85rem;
-      font-weight: 500;
-      transition: all var(--transition-fast);
-      cursor: pointer;
-    }
-
-    .tag-pill:hover {
-      transform: scale(1.05);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .tag-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-    }
-
-    .tag-dot.high-priority { background: var(--accent-danger); }
-    .tag-dot.work { background: var(--primary); }
-    .tag-dot.personal { background: var(--secondary); }
-    .tag-dot.archive { background: var(--text-muted); }
-    .tag-dot.quick { background: var(--accent); }
-
-    /* Predictive Actions */
-    .prediction-list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-4);
-    }
-
-    .prediction-item {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-      padding: var(--space-4);
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-    }
-
-    .prediction-icon {
-      width: 44px;
-      height: 44px;
-      border-radius: var(--radius-md);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .prediction-icon svg {
-      width: 22px;
-      height: 22px;
-      stroke: white;
-      fill: none;
-    }
-
-    .prediction-info {
-      flex: 1;
-    }
-
-    .prediction-info p {
-      font-weight: 500;
-      font-size: 0.9rem;
-      margin-bottom: var(--space-1);
-    }
-
-    .prediction-info span {
-      color: var(--text-muted);
-      font-size: 0.8rem;
-    }
-
-    .confidence-badge {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      padding: var(--space-2) var(--space-3);
-      background: var(--bg-card);
-      border-radius: var(--radius-full);
-      font-size: 0.75rem;
-      font-weight: 600;
-    }
-
-    .confidence-bar {
-      width: 40px;
-      height: 6px;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-full);
-      overflow: hidden;
-    }
-
-    .confidence-fill {
-      height: 100%;
-      border-radius: var(--radius-full);
-      width: 0;
-      transition: width 1s ease-out;
-    }
-
-    .confidence-fill.animate { width: var(--confidence); }
-    .confidence-fill.high { background: var(--accent); }
-    .confidence-fill.medium { background: var(--accent-warn); }
-
-    /* Distribution Chart Section */
-    .distribution-section {
-      margin-bottom: var(--space-8);
-    }
-
-    .distribution-card {
-      background: var(--bg-card);
-      border-radius: var(--radius-lg);
-      padding: var(--space-8);
-      box-shadow: var(--shadow-md);
-    }
-
-    .distribution-content {
-      display: grid;
-      grid-template-columns: 300px 1fr;
-      gap: var(--space-8);
-      align-items: center;
-    }
-
-    .pie-chart-container {
-      position: relative;
-      width: 220px;
-      height: 220px;
-    }
-
-    .pie-chart {
-      width: 100%;
-      height: 100%;
-      transform: rotate(-90deg);
-    }
-
-    .pie-segment {
-      fill: none;
-      stroke-width: 40;
-      stroke-dasharray: 0 314;
-      transition: stroke-dasharray 1s ease-out;
-    }
-
-    .pie-segment.animate {
-      stroke-dasharray: var(--segment-dash) 314;
-    }
-
-    .pie-segment.documents { stroke: var(--primary); }
-    .pie-segment.images { stroke: var(--secondary); }
-    .pie-segment.videos { stroke: var(--accent); }
-    .pie-segment.others { stroke: var(--accent-warn); }
-
-    .pie-center {
-      position: absolute;
-      inset: 40px;
-      background: var(--bg-card);
-      border-radius: 50%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .pie-center span {
-      font-family: 'Outfit', sans-serif;
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--text-primary);
-    }
-
-    .pie-center small {
-      color: var(--text-muted);
-      font-size: 0.8rem;
-    }
-
-    .pattern-bars {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-4);
-    }
-
-    .pattern-bar-item {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-    }
-
-    .pattern-bar-label {
-      width: 100px;
-      font-size: 0.9rem;
-      font-weight: 500;
-    }
-
-    .pattern-bar-track {
-      flex: 1;
-      height: 32px;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-md);
-      overflow: hidden;
-      position: relative;
-    }
-
-    .pattern-bar-fill {
-      height: 100%;
-      border-radius: var(--radius-md);
-      width: 0;
-      transition: width 1s ease-out;
-    }
-
-    .pattern-bar-fill.animate { width: var(--bar-width); }
-    .pattern-bar-fill.documents { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
-    .pattern-bar-fill.images { background: linear-gradient(90deg, var(--secondary), var(--secondary-light)); }
-    .pattern-bar-fill.videos { background: linear-gradient(90deg, var(--accent), #6ee7b7); }
-    .pattern-bar-fill.others { background: linear-gradient(90deg, var(--accent-warn), #fcd34d); }
-
-    .pattern-bar-value {
-      width: 50px;
-      text-align: right;
-      font-weight: 600;
-      font-size: 0.9rem;
-      color: var(--text-secondary);
-    }
-
-    /* Semantic Search Hints */
-    .search-hints {
-      background: var(--bg-card);
-      border-radius: var(--radius-lg);
-      padding: var(--space-6);
-      box-shadow: var(--shadow-md);
-      margin-bottom: var(--space-8);
-    }
-
-    .search-hints h3 {
-      font-size: 1rem;
-      margin-bottom: var(--space-4);
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-    }
-
-    .search-hints h3 svg {
-      width: 20px;
-      height: 20px;
-      stroke: var(--primary);
-      fill: none;
-    }
-
-    .hints-container {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--space-3);
-    }
-
-    .hint-chip {
-      padding: var(--space-3) var(--space-5);
-      background: var(--bg-secondary);
-      border-radius: var(--radius-full);
-      font-size: 0.85rem;
-      color: var(--text-secondary);
-      cursor: pointer;
-      transition: all var(--transition-fast);
-    }
-
-    .hint-chip:hover {
-      background: var(--primary);
-      color: white;
-      transform: scale(1.05);
-    }
-
-    /* Generate Button */
-    .generate-section {
-      display: flex;
-      justify-content: center;
-      gap: var(--space-4);
-    }
-
-    /* Responsive */
-    @media (max-width: 768px) {
-      .discoveries-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .distribution-content {
-        grid-template-columns: 1fr;
-      }
-
-      .pie-chart-container {
-        margin: 0 auto;
-      }
-
-      .ai-status-bar {
-        flex-wrap: wrap;
-      }
-
-      .privacy-hero-content {
-        flex-direction: column;
-        text-align: center;
-      }
-    }
+    
+    /* Tag pill click feedback */
+    .tag-pill-feedback { transform: scale(0.95); }
+    
+    /* Hint chip click feedback */
+    .hint-chip-feedback { background: var(--primary-dark); }
   </style>
 </head>
-<body>
-  <div class="ai-container">
+<body class="font-sans bg-surface-primary text-text-primary min-h-screen antialiased overflow-x-hidden">
+  <div class="max-w-[1200px] w-full mx-auto p-6">
     <!-- Back Header -->
-    <div class="back-header">
-      <a href="index.html" class="back-btn">
-        <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M19 12H5M12 19l-7-7 7-7"/>
-        </svg>
+    <div class="flex items-center gap-4 mb-8">
+      <a href="index.html" class="inline-flex items-center gap-2 text-text-secondary font-medium transition-colors duration-150 hover:text-primary hover:bg-accent/10 rounded-xl px-3 py-2">
+        <svg class="w-5 h-5"><use href="#icon-arrow-left"></use></svg>
         <span>대시보드로</span>
       </a>
     </div>
 
     <!-- Privacy Hero Banner -->
-    <div class="privacy-hero">
-      <div class="privacy-hero-content">
-        <div class="shield-icon">
-          <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
-            <path d="M9 12l2 2 4-4"/>
-          </svg>
+    <div class="bg-gradient-to-br from-primary via-secondary to-primary-light rounded-[28px] p-12 mb-8 relative overflow-hidden shadow-lg">
+      <div class="absolute top-[-50%] right-[-20%] w-[400px] h-[400px] bg-[radial-gradient(circle,rgba(255,255,255,0.15),transparent_70%)] animate-pulse-glow"></div>
+      <div class="relative z-10 flex items-center gap-6">
+          <div class="w-20 h-20 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
+            <svg class="w-12 h-12 text-white"><use href="#icon-shield-check"></use></svg>
+          </div>
         </div>
-        <div class="privacy-hero-text">
-          <h1>AI 파일 지능</h1>
-          <p>파일은 기기 내에서 분석됩니다. 데이터가 기기를 떠나지 않습니다.</p>
+    <div class="bg-surface-card rounded-xl p-6 mb-8 shadow-md flex items-center gap-6">
+      <div class="w-16 h-16 relative">
+        <div class="w-full h-full rounded-full border-4 border-surface-secondary relative">
+          <div class="absolute inset-[-4px] rounded-full border-4 border-transparent border-t-primary animate-spin"></div>
+        </div>
+        <div class="absolute inset-0 flex items-center justify-center">
+          <div class="w-3 h-3 bg-primary rounded-full absolute top-[10%] left-[50%] -translate-x-1/2 animate-node-pulse"></div>
+          <div class="w-3 h-3 bg-primary rounded-full absolute top-[50%] right-[10%] animate-node-pulse"></div>
+          <div class="w-3 h-3 bg-primary rounded-full absolute bottom-[10%] left-[50%] -translate-x-1/2 animate-node-pulse"></div>
+          <div class="w-3 h-3 bg-primary rounded-full absolute top-[50%] left-[10%] animate-node-pulse"></div>
+          <div class="w-3 h-3 bg-primary rounded-full absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 animate-node-pulse"></div>
         </div>
       </div>
-    </div>
-
-    <!-- AI Status Bar -->
-    <div class="ai-status-bar">
-      <div class="neural-icon">
-        <div class="neural-ring"></div>
-        <div class="neural-nodes">
-          <div class="neural-node"></div>
-          <div class="neural-node"></div>
-          <div class="neural-node"></div>
-          <div class="neural-node"></div>
-          <div class="neural-node"></div>
-        </div>
+      <div class="flex-1">
+        <h3 class="text-[1.1rem] font-display font-semibold mb-1">신경망 분석 활성화</h3>
+        <p class="text-text-secondary text-[0.9rem]">12개 디렉토리에서 847개 파일 스캔 중</p>
       </div>
-      <div class="ai-status-text">
-        <h3>신경망 분석 활성화</h3>
-        <p>12개 디렉토리에서 847개 파일 스캔 중</p>
-      </div>
-      <div class="progress-ring-container">
-        <svg class="progress-ring" width="60" height="60">
-          <circle class="progress-ring-bg" cx="30" cy="30" r="25"/>
-          <circle class="progress-ring-fill" cx="30" cy="30" r="25"/>
+      <div class="relative w-[60px] h-[60px]">
+        <svg class="w-full h-full -rotate-[90deg]" viewBox="0 0 60 60">
+          <circle class="fill-none stroke-surface-secondary" cx="30" cy="30" r="25" stroke-width="6"/>
+          <circle class="progress-ring-fill fill-none stroke-accent rounded-full transition-all duration-[1.5s]" cx="30" cy="30" r="25" stroke-width="6" stroke-linecap="round" stroke-dasharray="157" stroke-dashoffset="157"/>
         </svg>
-        <span class="progress-percent">87%</span>
+        <span class="absolute inset-0 flex items-center justify-center font-display font-bold text-accent text-[0.9rem]">87%</span>
       </div>
     </div>
 
     <!-- AI Discoveries Section -->
-    <div class="ai-discoveries">
-      <div class="section-header">
-        <div class="section-title">
-          <h2>AI 발견</h2>
-          <span class="badge">4개 신규</span>
+    <div class="mb-8">
+      <div class="flex items-center justify-between mb-6">
+        <div class="flex items-center gap-3">
+          <h2 class="text-[1.5rem] font-display font-semibold">AI 발견</h2>
+          <span class="bg-primary text-white text-xs font-semibold px-3 py-1 rounded-full">4개 신규</span>
         </div>
       </div>
 
-      <div class="discoveries-grid">
+      <div class="grid grid-cols-2 gap-6">
         <!-- Smart Clusters Card -->
-        <div class="discovery-card">
-          <div class="card-header">
-            <div class="card-icon clusters">
-              <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="3"/>
-                <circle cx="19" cy="5" r="2"/>
-                <circle cx="5" cy="19" r="2"/>
-                <path d="M10.4 10.6l5.2 5.2M13.6 13.6L8.4 8.4"/>
-              </svg>
+        <div class="discovery-card bg-surface-card rounded-xl p-6 shadow-md opacity-0 translate-y-5 transition-all duration-400">
+          <div class="flex items-center gap-4 mb-5">
+            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center">
+              <svg class="w-6 h-6 text-white"><use href="#icon-chart-bar"></use></svg>
             </div>
-            <div class="card-title-group">
-              <h3>스마트 클러스터</h3>
-              <span>3개 그룹 발견</span>
+            <div>
+              <h3 class="text-[1.1rem] font-semibold mb-1">스마트 클러스터</h3>
+              <span class="text-text-muted text-[0.85rem]">3개 그룹 발견</span>
             </div>
           </div>
-          <div class="cluster-list">
-            <div class="cluster-item">
-              <div class="cluster-color" style="background: linear-gradient(180deg, var(--primary), var(--primary-light));"></div>
-              <div class="cluster-info">
-                <h4>금융 보고서</h4>
-                <p>5개 파일 - 2024년 4분기 분석 문서</p>
+          <div class="flex flex-col gap-3">
+            <div class="flex items-center gap-4 p-4 bg-surface-secondary rounded-xl transition-transform duration-150 hover:translate-x-1">
+              <div class="w-3 h-10 rounded-sm bg-gradient-to-b from-primary to-primary-light"></div>
+              <div class="flex-1">
+                <h4 class="text-[0.95rem] font-semibold mb-1">금융 보고서</h4>
+                <p class="text-text-muted text-[0.8rem]">5개 파일 - 2024년 4분기 분석 문서</p>
               </div>
-              <span class="cluster-badge">5 files</span>
+              <span class="bg-surface-card text-text-secondary text-xs font-semibold px-3 py-2 rounded-full">5 files</span>
             </div>
-            <div class="cluster-item">
-              <div class="cluster-color" style="background: linear-gradient(180deg, var(--secondary), var(--secondary-light));"></div>
-              <div class="cluster-info">
-                <h4>휴가 사진</h4>
-                <p>12개 파일 - 2024년 여름 여행</p>
+            <div class="flex items-center gap-4 p-4 bg-surface-secondary rounded-xl transition-transform duration-150 hover:translate-x-1">
+              <div class="w-3 h-10 rounded-sm bg-gradient-to-b from-secondary to-secondary-light"></div>
+              <div class="flex-1">
+                <h4 class="text-[0.95rem] font-semibold mb-1">휴가 사진</h4>
+                <p class="text-text-muted text-[0.8rem]">12개 파일 - 2024년 여름 여행</p>
               </div>
-              <span class="cluster-badge">12 files</span>
+              <span class="bg-surface-card text-text-secondary text-xs font-semibold px-3 py-2 rounded-full">12 files</span>
             </div>
-            <div class="cluster-item">
-              <div class="cluster-color" style="background: linear-gradient(180deg, var(--accent), #6ee7b7);"></div>
-              <div class="cluster-info">
-                <h4>프로젝트 자산</h4>
-                <p>8개 파일 - 디자인 리소스</p>
+            <div class="flex items-center gap-4 p-4 bg-surface-secondary rounded-xl transition-transform duration-150 hover:translate-x-1">
+              <div class="w-3 h-10 rounded-sm bg-gradient-to-b from-accent to-[#6ee7b7]"></div>
+              <div class="flex-1">
+                <h4 class="text-[0.95rem] font-semibold mb-1">프로젝트 자산</h4>
+                <p class="text-text-muted text-[0.8rem]">8개 파일 - 디자인 리소스</p>
               </div>
-              <span class="cluster-badge">8 files</span>
+              <span class="bg-surface-card text-text-secondary text-xs font-semibold px-3 py-2 rounded-full">8 files</span>
             </div>
           </div>
         </div>
 
         <!-- Duplicate Detection Card -->
-        <div class="discovery-card">
-          <div class="card-header">
-            <div class="card-icon duplicates">
-              <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="8" y="8" width="12" height="12" rx="2"/>
-                <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>
-              </svg>
+        <div class="discovery-card bg-surface-card rounded-xl p-6 shadow-md opacity-0 translate-y-5 transition-all duration-400">
+          <div class="flex items-center gap-4 mb-5">
+            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-secondary to-[#ec4899] flex items-center justify-center">
+              <svg class="w-6 h-6 text-white"><use href="#icon-cpu"></use></svg>
             </div>
-            <div class="card-title-group">
-              <h3>중복 후보</h3>
-              <span>2개 중복 가능성</span>
+            <div>
+              <h3 class="text-[1.1rem] font-semibold mb-1">중복 후보</h3>
+              <span class="text-text-muted text-[0.85rem]">2개 중복 가능성</span>
             </div>
           </div>
-          <div class="duplicate-list">
-            <div class="duplicate-pair">
-              <div class="file-icon">
-                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                  <polyline points="14 2 14 8 20 8"/>
-                </svg>
+          <div class="flex flex-col gap-4">
+            <div class="flex items-center gap-4 p-4 bg-surface-secondary rounded-xl">
+              <div class="w-10 h-10 rounded-sm bg-gradient-to-br from-secondary-light to-secondary flex items-center justify-center">
+                <svg class="w-5 h-5 text-white"><use href="#icon-document"></use></svg>
               </div>
-              <div class="duplicate-info">
-                <p>report_final.pdf</p>
-                <span>report_v2.pdf와 일치</span>
+              <div class="flex-1">
+                <p class="font-medium text-[0.9rem] mb-1">report_final.pdf</p>
+                <span class="text-text-muted text-[0.8rem]">report_v2.pdf와 일치</span>
               </div>
-              <span class="match-badge">94%</span>
+              <span class="bg-gradient-to-r from-accent-warn to-[#f59e0b] text-white text-[0.8rem] font-bold px-3 py-2 rounded-full">94%</span>
             </div>
-            <div class="duplicate-pair">
-              <div class="file-icon">
-                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                  <polyline points="14 2 14 8 20 8"/>
-                </svg>
+            <div class="flex items-center gap-4 p-4 bg-surface-secondary rounded-xl">
+              <div class="w-10 h-10 rounded-sm bg-gradient-to-br from-secondary-light to-secondary flex items-center justify-center">
+                <svg class="w-5 h-5 text-white"><use href="#icon-document"></use></svg>
               </div>
-              <div class="duplicate-info">
-                <p>presentation.pptx</p>
-                <span>presentation_backup.pptx와 일치</span>
+              <div class="flex-1">
+                <p class="font-medium text-[0.9rem] mb-1">presentation.pptx</p>
+                <span class="text-text-muted text-[0.8rem]">presentation_backup.pptx와 일치</span>
               </div>
-              <span class="match-badge">78%</span>
+              <span class="bg-gradient-to-r from-accent-warn to-[#f59e0b] text-white text-[0.8rem] font-bold px-3 py-2 rounded-full">78%</span>
             </div>
           </div>
         </div>
 
         <!-- Auto Tags Card -->
-        <div class="discovery-card">
-          <div class="card-header">
-            <div class="card-icon tags">
-              <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
-                <line x1="7" y1="7" x2="7.01" y2="7"/>
-              </svg>
+        <div class="discovery-card bg-surface-card rounded-xl p-6 shadow-md opacity-0 translate-y-5 transition-all duration-400">
+          <div class="flex items-center gap-4 mb-5">
+            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-accent to-[#059669] flex items-center justify-center">
+              <svg class="w-6 h-6 text-white"><use href="#icon-tag"></use></svg>
             </div>
-            <div class="card-title-group">
-              <h3>자동 태그</h3>
-              <span>15개 태그 생성됨</span>
+            <div>
+              <h3 class="text-[1.1rem] font-semibold mb-1">자동 태그</h3>
+              <span class="text-text-muted text-[0.85rem]">15개 태그 생성됨</span>
             </div>
           </div>
-          <div class="tag-cloud">
-            <span class="tag-pill">
-              <span class="tag-dot high-priority"></span>
+          <div class="flex flex-wrap gap-3">
+            <span class="tag-pill inline-flex items-center gap-2 px-4 py-3 bg-surface-secondary rounded-full text-[0.85rem] font-medium cursor-pointer transition-all duration-150 hover:scale-105 hover:shadow-sm">
+              <span class="w-2 h-2 rounded-full bg-accent-danger"></span>
               높은 우선순위
             </span>
-            <span class="tag-pill">
-              <span class="tag-dot work"></span>
+            <span class="tag-pill inline-flex items-center gap-2 px-4 py-3 bg-surface-secondary rounded-full text-[0.85rem] font-medium cursor-pointer transition-all duration-150 hover:scale-105 hover:shadow-sm">
+              <span class="w-2 h-2 rounded-full bg-primary"></span>
               작업 관련
             </span>
-            <span class="tag-pill">
-              <span class="tag-dot personal"></span>
+            <span class="tag-pill inline-flex items-center gap-2 px-4 py-3 bg-surface-secondary rounded-full text-[0.85rem] font-medium cursor-pointer transition-all duration-150 hover:scale-105 hover:shadow-sm">
+              <span class="w-2 h-2 rounded-full bg-secondary"></span>
               개인
             </span>
-            <span class="tag-pill">
-              <span class="tag-dot archive"></span>
+            <span class="tag-pill inline-flex items-center gap-2 px-4 py-3 bg-surface-secondary rounded-full text-[0.85rem] font-medium cursor-pointer transition-all duration-150 hover:scale-105 hover:shadow-sm">
+              <span class="w-2 h-2 rounded-full bg-text-muted"></span>
               아카이브 대상
             </span>
-            <span class="tag-pill">
-              <span class="tag-dot quick"></span>
+            <span class="tag-pill inline-flex items-center gap-2 px-4 py-3 bg-surface-secondary rounded-full text-[0.85rem] font-medium cursor-pointer transition-all duration-150 hover:scale-105 hover:shadow-sm">
+              <span class="w-2 h-2 rounded-full bg-accent"></span>
               빠른 접근
             </span>
           </div>
         </div>
 
         <!-- Predictive Actions Card -->
-        <div class="discovery-card">
-          <div class="card-header">
-            <div class="card-icon predictive">
-              <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="10"/>
-                <polyline points="12 6 12 12 16 14"/>
-              </svg>
+        <div class="discovery-card bg-surface-card rounded-xl p-6 shadow-md opacity-0 translate-y-5 transition-all duration-400">
+          <div class="flex items-center gap-4 mb-5">
+            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-accent-warn to-[#f59e0b] flex items-center justify-center">
+              <svg class="w-6 h-6 text-white"><use href="#icon-clock"></use></svg>
             </div>
-            <div class="card-title-group">
-              <h3>예측 작업</h3>
-              <span>3개 예측</span>
+            <div>
+              <h3 class="text-[1.1rem] font-semibold mb-1">예측 작업</h3>
+              <span class="text-text-muted text-[0.85rem]">3개 예측</span>
             </div>
           </div>
-          <div class="prediction-list">
-            <div class="prediction-item">
-              <div class="prediction-icon" style="background: linear-gradient(135deg, var(--primary), var(--primary-dark));">
-                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                  <polyline points="14 2 14 8 20 8"/>
-                </svg>
+          <div class="flex flex-col gap-4">
+            <div class="flex items-center gap-4 p-4 bg-surface-secondary rounded-xl">
+              <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center">
+                <svg class="w-[22px] h-[22px] text-white"><use href="#icon-document"></use></svg>
               </div>
-              <div class="prediction-info">
-                <p>곧 4분기 보고서가 필요할 것입니다</p>
-                <span>월별 접근 패턴 기반</span>
+              <div class="flex-1">
+                <p class="font-medium text-[0.9rem] mb-1">곧 4분기 보고서가 필요할 것입니다</p>
+                <span class="text-text-muted text-[0.8rem]">월별 접근 패턴 기반</span>
               </div>
-              <div class="confidence-badge">
-                <div class="confidence-bar">
-                  <div class="confidence-fill high" style="--confidence: 92%;"></div>
+              <div class="flex items-center gap-2 px-3 py-2 bg-surface-card rounded-full text-[0.75rem] font-semibold">
+                <div class="w-10 h-1.5 bg-surface-secondary rounded-full overflow-hidden">
+                  <div class="confidence-fill h-full rounded-full transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 92%; background: var(--accent);"></div>
                 </div>
                 92%
               </div>
             </div>
-            <div class="prediction-item">
-              <div class="prediction-icon" style="background: linear-gradient(135deg, var(--secondary), #ec4899);">
-                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <rect x="3" y="3" width="18" height="18" rx="2"/>
-                  <circle cx="8.5" cy="8.5" r="1.5"/>
-                  <polyline points="21 15 16 10 5 21"/>
-                </svg>
+            <div class="flex items-center gap-4 p-4 bg-surface-secondary rounded-xl">
+              <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-secondary to-[#ec4899] flex items-center justify-center">
+                <svg class="w-[22px] h-[22px] text-white"><use href="#icon-photo"></use></svg>
               </div>
-              <div class="prediction-info">
-                <p>휴가 사진 아카이브</p>
-                <span>28일 동안 접근 없음</span>
+              <div class="flex-1">
+                <p class="font-medium text-[0.9rem] mb-1">휴가 사진 아카이브</p>
+                <span class="text-text-muted text-[0.8rem]">28일 동안 접근 없음</span>
               </div>
-              <div class="confidence-badge">
-                <div class="confidence-bar">
-                  <div class="confidence-fill medium" style="--confidence: 78%;"></div>
+              <div class="flex items-center gap-2 px-3 py-2 bg-surface-card rounded-full text-[0.75rem] font-semibold">
+                <div class="w-10 h-1.5 bg-surface-secondary rounded-full overflow-hidden">
+                  <div class="confidence-fill h-full rounded-full transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 78%; background: var(--accent-warn);"></div>
                 </div>
                 78%
               </div>
             </div>
-            <div class="prediction-item">
-              <div class="prediction-icon" style="background: linear-gradient(135deg, var(--accent), #059669);">
-                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                  <polyline points="17 8 12 3 7 8"/>
-                  <line x1="12" y1="3" x2="12" y2="15"/>
-                </svg>
+            <div class="flex items-center gap-4 p-4 bg-surface-secondary rounded-xl">
+              <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-accent to-[#059669] flex items-center justify-center">
+                <svg class="w-[22px] h-[22px] text-white"><use href="#icon-arrow-up"></use></svg>
               </div>
-              <div class="prediction-info">
-                <p>프로젝트 자산 백업</p>
-                <span>3일 전 수정됨</span>
+              <div class="flex-1">
+                <p class="font-medium text-[0.9rem] mb-1">프로젝트 자산 백업</p>
+                <span class="text-text-muted text-[0.8rem]">3일 전 수정됨</span>
               </div>
-              <div class="confidence-badge">
-                <div class="confidence-bar">
-                  <div class="confidence-fill high" style="--confidence: 85%;"></div>
+              <div class="flex items-center gap-2 px-3 py-2 bg-surface-card rounded-full text-[0.75rem] font-semibold">
+                <div class="w-10 h-1.5 bg-surface-secondary rounded-full overflow-hidden">
+                  <div class="confidence-fill h-full rounded-full transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 85%; background: var(--accent);"></div>
                 </div>
                 85%
               </div>
@@ -1154,54 +403,54 @@
     </div>
 
     <!-- Distribution Chart -->
-    <div class="distribution-section">
-      <div class="section-header">
-        <div class="section-title">
-          <h2>파일 분포</h2>
+    <div class="mb-8">
+      <div class="flex items-center justify-between mb-6">
+        <div class="flex items-center gap-3">
+          <h2 class="text-[1.5rem] font-display font-semibold">파일 분포</h2>
         </div>
       </div>
-      <div class="distribution-card">
-        <div class="distribution-content">
-          <div class="pie-chart-container">
-            <svg class="pie-chart" viewBox="0 0 100 100">
-              <circle class="pie-segment documents" cx="50" cy="50" r="25" style="--segment-dash: 98;"/>
-              <circle class="pie-segment images" cx="50" cy="50" r="25" style="--segment-dash: 78;"/>
-              <circle class="pie-segment videos" cx="50" cy="50" r="25" style="--segment-dash: 47;"/>
-              <circle class="pie-segment others" cx="50" cy="50" r="25" style="--segment-dash: 47;"/>
+      <div class="bg-surface-card rounded-xl p-8 shadow-md">
+        <div class="grid grid-cols-[300px_1fr] gap-8 items-center max-lg:grid-cols-1">
+          <div class="relative w-[220px] h-[220px] mx-auto">
+            <svg class="w-full h-full -rotate-[90deg]" viewBox="0 0 100 100">
+              <circle class="pie-segment fill-none stroke-primary transition-all duration-1000" cx="50" cy="50" r="25" stroke-width="40" stroke-dasharray="0 314" style="--segment-dash: 98;"/>
+              <circle class="pie-segment fill-none stroke-secondary transition-all duration-1000" cx="50" cy="50" r="25" stroke-width="40" stroke-dasharray="0 314" style="--segment-dash: 78;"/>
+              <circle class="pie-segment fill-none stroke-accent transition-all duration-1000" cx="50" cy="50" r="25" stroke-width="40" stroke-dasharray="0 314" style="--segment-dash: 47;"/>
+              <circle class="pie-segment fill-none stroke-accent-warn transition-all duration-1000" cx="50" cy="50" r="25" stroke-width="40" stroke-dasharray="0 314" style="--segment-dash: 47;"/>
             </svg>
-            <div class="pie-center">
-              <span>847</span>
-              <small>전체 파일</small>
+            <div class="absolute inset-10 bg-surface-card rounded-full flex flex-col items-center justify-center">
+              <span class="font-display text-2xl font-bold text-text-primary">847</span>
+              <small class="text-text-muted text-[0.8rem]">전체 파일</small>
             </div>
           </div>
-          <div class="pattern-bars">
-            <div class="pattern-bar-item">
-              <span class="pattern-bar-label">문서</span>
-              <div class="pattern-bar-track">
-                <div class="pattern-bar-fill documents" style="--bar-width: 45%;"></div>
+          <div class="flex flex-col gap-4">
+            <div class="flex items-center gap-4">
+              <span class="w-[100px] text-[0.9rem] font-medium">문서</span>
+              <div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
+                <div class="pattern-bar-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 45%; background: linear-gradient(90deg, var(--primary), var(--primary-light));"></div>
               </div>
-              <span class="pattern-bar-value">382</span>
+              <span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">382</span>
             </div>
-            <div class="pattern-bar-item">
-              <span class="pattern-bar-label">이미지</span>
-              <div class="pattern-bar-track">
-                <div class="pattern-bar-fill images" style="--bar-width: 35%;"></div>
+            <div class="flex items-center gap-4">
+              <span class="w-[100px] text-[0.9rem] font-medium">이미지</span>
+              <div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
+                <div class="pattern-bar-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 35%; background: linear-gradient(90deg, var(--secondary), var(--secondary-light));"></div>
               </div>
-              <span class="pattern-bar-value">296</span>
+              <span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">296</span>
             </div>
-            <div class="pattern-bar-item">
-              <span class="pattern-bar-label">동영상</span>
-              <div class="pattern-bar-track">
-                <div class="pattern-bar-fill videos" style="--bar-width: 12%;"></div>
+            <div class="flex items-center gap-4">
+              <span class="w-[100px] text-[0.9rem] font-medium">동영상</span>
+              <div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
+                <div class="pattern-bar-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 12%; background: linear-gradient(90deg, var(--accent), #6ee7b7);"></div>
               </div>
-              <span class="pattern-bar-value">102</span>
+              <span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">102</span>
             </div>
-            <div class="pattern-bar-item">
-              <span class="pattern-bar-label">기타</span>
-              <div class="pattern-bar-track">
-                <div class="pattern-bar-fill others" style="--bar-width: 8%;"></div>
+            <div class="flex items-center gap-4">
+              <span class="w-[100px] text-[0.9rem] font-medium">기타</span>
+              <div class="flex-1 h-8 bg-surface-secondary rounded-xl overflow-hidden relative">
+                <div class="pattern-bar-fill h-full rounded-xl transition-all duration-1000 animate-[width_1s_ease-out]" style="width: 8%; background: linear-gradient(90deg, var(--accent-warn), #fcd34d);"></div>
               </div>
-              <span class="pattern-bar-value">67</span>
+              <span class="w-[50px] text-right font-semibold text-[0.9rem] text-text-secondary">67</span>
             </div>
           </div>
         </div>
@@ -1209,30 +458,25 @@
     </div>
 
     <!-- Semantic Search Hints -->
-    <div class="search-hints">
-      <h3>
-        <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="11" cy="11" r="8"/>
-          <line x1="21" y1="21" x2="16.65" y2="16.65"/>
-        </svg>
+    <div class="bg-surface-card rounded-xl p-6 shadow-md mb-8">
+      <h3 class="text-base font-display font-semibold mb-4 flex items-center gap-2">
+        <svg class="w-5 h-5 text-primary"><use href="#icon-magnifying-glass"></use></svg>
         관련 검색
       </h3>
-      <div class="hints-container">
-        <span class="hint-chip">2024년 4분기 금융 보고서</span>
-        <span class="hint-chip">프로젝트 타임라인</span>
-        <span class="hint-chip">2024년 휴가</span>
-        <span class="hint-chip">디자인 자산</span>
-        <span class="hint-chip">세금 문서</span>
-        <span class="hint-chip">고객 프레젠테이션</span>
+      <div class="flex flex-wrap gap-3">
+        <span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">2024년 4분기 금융 보고서</span>
+        <span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">프로젝트 타임라인</span>
+        <span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">2024년 휴가</span>
+        <span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">디자인 자산</span>
+        <span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">세금 문서</span>
+        <span class="hint-chip px-5 py-3 bg-surface-secondary rounded-full text-[0.85rem] text-text-secondary cursor-pointer transition-all duration-150 hover:bg-primary hover:text-white hover:scale-105">고객 프레젠테이션</span>
       </div>
     </div>
 
     <!-- Generate Button -->
-    <div class="generate-section">
-      <button class="btn btn-primary">
-        <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
-        </svg>
+    <div class="flex justify-center gap-4">
+      <button class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-br from-primary to-primary-dark text-white rounded-full font-display font-semibold text-base shadow-blue hover:shadow-[0_6px_25px_rgba(59,130,246,0.4)] hover:-translate-y-0.5 active:translate-y-0 transition-all duration-250 min-h-[56px] min-w-[160px]">
+        <svg class="w-5 h-5"><use href="#icon-sparkles-alt"></use></svg>
         새 인사이트 생성
       </button>
     </div>
@@ -1243,42 +487,52 @@
       // Stagger reveal discovery cards
       setTimeout(() => {
         document.querySelectorAll('.discovery-card').forEach(card => {
-          card.classList.add('visible');
+          card.classList.remove('opacity-0', 'translate-y-5');
+          card.classList.add('opacity-100', 'translate-y-0');
         });
       }, 300);
 
       // Animate progress ring
       setTimeout(() => {
-        document.querySelector('.progress-ring-fill').classList.add('animate');
+        document.querySelector('.progress-ring-fill').style.strokeDashoffset = '20';
       }, 500);
 
       // Animate confidence bars
       setTimeout(() => {
         document.querySelectorAll('.confidence-fill').forEach(bar => {
-          bar.classList.add('animate');
+          const width = bar.style.width;
+          bar.style.width = '0';
+          setTimeout(() => {
+            bar.style.width = width;
+          }, 50);
         });
       }, 800);
 
       // Animate pie segments
       setTimeout(() => {
         document.querySelectorAll('.pie-segment').forEach(segment => {
-          segment.classList.add('animate');
+          const dash = getComputedStyle(segment).getPropertyValue('--segment-dash');
+          segment.style.strokeDasharray = dash + ' 314';
         });
       }, 600);
 
       // Animate pattern bars
       setTimeout(() => {
         document.querySelectorAll('.pattern-bar-fill').forEach(bar => {
-          bar.classList.add('animate');
+          const width = bar.style.width;
+          bar.style.width = '0';
+          setTimeout(() => {
+            bar.style.width = width;
+          }, 50);
         });
       }, 700);
 
       // Tag pill interaction
       document.querySelectorAll('.tag-pill').forEach(tag => {
         tag.addEventListener('click', () => {
-          tag.style.transform = 'scale(0.95)';
+          tag.classList.add('tag-pill-feedback');
           setTimeout(() => {
-            tag.style.transform = '';
+            tag.classList.remove('tag-pill-feedback');
           }, 150);
         });
       });
@@ -1286,9 +540,9 @@
       // Hint chip interaction
       document.querySelectorAll('.hint-chip').forEach(chip => {
         chip.addEventListener('click', () => {
-          chip.style.background = 'var(--primary-dark)';
+          chip.classList.add('hint-chip-feedback');
           setTimeout(() => {
-            chip.style.background = '';
+            chip.classList.remove('hint-chip-feedback');
           }, 300);
         });
       });
diff --git a/scene_gamification.html b/scene_gamification.html
index 332a720..2bb4c40 100644
--- a/scene_gamification.html
+++ b/scene_gamification.html
@@ -4,623 +4,109 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>내 진행 상황 - Chakmate</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <!-- Heroicons SVG Sprite -->
+  <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
+    <symbol id="icon-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 12H5M12 19l-7-7 7-7"/>
+    </symbol>
+  </svg>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: { DEFAULT: '#3b82f6', light: '#60a5fa', dark: '#1d4ed8' },
+            secondary: { DEFAULT: '#06b6d4', light: '#22d3ee' },
+            accent: { DEFAULT: '#0ea5e9', warn: '#38bdf8', danger: '#f472b6' },
+            surface: { primary: '#f8fafc', secondary: '#e2e8f0', card: '#ffffff' },
+            text: { primary: '#0f172a', secondary: '#475569', muted: '#94a3b8' },
+          },
+          fontFamily: {
+            sans: ['Noto Sans KR', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+            display: ['Outfit', 'sans-serif'],
+          },
+          boxShadow: {
+            'sm': '0 2px 8px rgba(14, 165, 233, 0.06)',
+            'md': '0 4px 20px rgba(14, 165, 233, 0.08)',
+            'lg': '0 8px 40px rgba(14, 165, 233, 0.12)',
+            'glow': '0 0 30px rgba(14, 165, 233, 0.25)',
+            'blue': '0 4px 20px rgba(59, 130, 246, 0.3)',
+          },
+          animation: {
+            'shimmer': 'shimmer 3s ease-in-out infinite',
+            'pulse-slow': 'pulse 1.5s ease-in-out infinite',
+            'unlock-pulse': 'unlockPulse 0.6s ease-out',
+            'sparkle': 'sparkle 0.6s ease-out forwards',
+            'confetti-fall': 'confettiFall 2s ease-out forwards',
+            'fire-flicker': 'fireFlicker 0.3s ease-in-out infinite',
+          },
+          keyframes: {
+            shimmer: {
+              '0%, 100%': { transform: 'translate(-10%, -10%) rotate(0deg)' },
+              '50%': { transform: 'translate(10%, 10%) rotate(180deg)' },
+            },
+            unlockPulse: {
+              '0%': { transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(251, 191, 36, 0.4)' },
+              '50%': { transform: 'scale(1.1)', boxShadow: '0 0 0 15px rgba(251, 191, 36, 0)' },
+              '100%': { transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(251, 191, 36, 0)' },
+            },
+            sparkle: {
+              '0%, 100%': { opacity: '0', transform: 'scale(0) rotate(0deg)' },
+              '50%': { opacity: '1', transform: 'scale(1) rotate(180deg)' },
+            },
+            confettiFall: {
+              '0%': { opacity: '1', transform: 'translateY(-100px) rotate(0deg)' },
+              '100%': { opacity: '0', transform: 'translateY(100vh) rotate(720deg)' },
+            },
+            fireFlicker: {
+              '0%, 100%': { transform: 'scaleY(1) scaleX(1)' },
+              '25%': { transform: 'scaleY(1.1) scaleX(0.95)' },
+              '50%': { transform: 'scaleY(0.95) scaleX(1.05)' },
+              '75%': { transform: 'scaleY(1.05) scaleX(0.98)' },
+            },
+          },
+        },
+      },
+    }
+  </script>
   <style>
-    :root {
-      /* Blue Light Puzzle Theme - Intelligent, Precise, Cool */
-      --primary: #3b82f6;
-      --primary-light: #60a5fa;
-      --primary-dark: #1d4ed8;
-      --secondary: #06b6d4;
-      --secondary-light: #22d3ee;
-      --accent: #0ea5e9;
-      --accent-warn: #38bdf8;
-      --accent-danger: #f472b6;
-
-      /* Neutrals */
-      --bg-primary: #f8fafc;
-      --bg-secondary: #e2e8f0;
-      --bg-card: #ffffff;
-      --bg-overlay: rgba(14, 165, 233, 0.08);
-
-      /* Text */
-      --text-primary: #0f172a;
-      --text-secondary: #475569;
-      --text-muted: #94a3b8;
-
-      /* Shadows with Blue Glow */
-      --shadow-sm: 0 2px 8px rgba(14, 165, 233, 0.06);
-      --shadow-md: 0 4px 20px rgba(14, 165, 233, 0.08);
-      --shadow-lg: 0 8px 40px rgba(14, 165, 233, 0.12);
-      --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.25);
-      --shadow-blue: 0 4px 20px rgba(59, 130, 246, 0.3);
-
-      /* Spacing */
-      --space-1: 4px;
-      --space-2: 8px;
-      --space-3: 12px;
-      --space-4: 16px;
-      --space-5: 20px;
-      --space-6: 24px;
-      --space-8: 32px;
-      --space-10: 40px;
-      --space-12: 48px;
-      --space-16: 64px;
-
-      /* Border Radius */
-      --radius-sm: 8px;
-      --radius-md: 12px;
-      --radius-lg: 20px;
-      --radius-xl: 28px;
-      --radius-full: 9999px;
-
-      /* Transitions */
-      --transition-fast: 150ms ease;
-      --transition-base: 250ms ease;
-      --transition-slow: 400ms ease;
-      --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-
-    [data-theme="dark"] {
-      --bg-primary: #0a0e1a;
-      --bg-secondary: #111827;
-      --bg-card: #1e293b;
-      --bg-overlay: rgba(14, 165, 233, 0.12);
-      --text-primary: #f1f5f9;
-      --text-secondary: #94a3b8;
-      --text-muted: #64748b;
-      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
-      --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
-      --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
-      --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.3);
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      min-height: 100vh;
-      overflow-x: hidden;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    h1, h2, h3, h4 {
-      font-family: 'Outfit', sans-serif;
-      font-weight: 600;
-    }
-
-    /* Main Container */
-    .container {
-      max-width: 480px;
-      margin: 0 auto;
-      padding: var(--space-4);
-      padding-bottom: 100px;
-    }
-
-    /* Header */
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--space-4) var(--space-6);
-      background: var(--bg-card);
-      box-shadow: var(--shadow-sm);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-      margin-bottom: var(--space-6);
-    }
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-    }
-
-    .header-logo {
-      width: 40px;
-      height: 40px;
-      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-      border-radius: var(--radius-md);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: var(--shadow-blue);
-      position: relative;
-    }
-
-    .header-logo::before {
-      content: '';
+    .confetti {
       position: absolute;
-      inset: -2px;
-      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-      border-radius: var(--radius-md);
-      filter: blur(8px);
-      opacity: 0.5;
-      z-index: -1;
-    }
-
-    .header-logo svg {
-      width: 24px;
-      height: 24px;
-      fill: white;
-      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
-    }
-
-    .header-title {
-      font-family: 'Outfit', sans-serif;
-      font-size: 1.25rem;
-      font-weight: 600;
-    }
-
-    .header-right {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-    }
-
-    .back-btn {
-      width: 44px;
-      height: 44px;
-      border-radius: var(--radius-md);
-      background: var(--bg-secondary);
-      border: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      box-shadow: var(--shadow-sm);
-      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-    }
-
-    .back-btn:hover {
-      transform: translateY(-2px);
-      box-shadow: var(--shadow-md);
-    }
-
-    .back-btn:active {
-      transform: translateY(0);
-    }
-
-    .back-btn svg {
-      width: 20px;
-      height: 20px;
-      stroke: var(--text-primary);
-      fill: none;
-    }
-
-    /* Streak Badge (matches index.html style) */
-    .streak-badge {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      background: linear-gradient(135deg, var(--accent-warn) 0%, #f59e0b 100%);
-      color: white;
-      padding: var(--space-2) var(--space-4);
-      border-radius: var(--radius-full);
-      font-weight: 600;
-      font-size: 0.9rem;
-    }
-
-    .streak-badge svg {
-      width: 18px;
-      height: 18px;
-      fill: white;
-    }
-
-    /* Streak Card */
-    .streak-card {
-      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-      border-radius: var(--radius-xl);
-      padding: var(--space-8);
-      text-align: center;
-      position: relative;
-      overflow: hidden;
-      box-shadow: var(--shadow-glow);
-      margin-bottom: var(--space-6);
-    }
-
-    .streak-card::before {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
-      animation: shimmer 3s ease-in-out infinite;
-    }
-
-    @keyframes shimmer {
-      0%, 100% { transform: translate(-10%, -10%) rotate(0deg); }
-      50% { transform: translate(10%, 10%) rotate(180deg); }
-    }
-
-    .streak-icon {
-      font-size: 3rem;
-      margin-bottom: var(--space-2);
-      animation: pulse 1.5s ease-in-out infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(1.1); }
-    }
-
-    .streak-count {
-      font-family: 'Outfit', sans-serif;
-      font-size: 4rem;
-      font-weight: 800;
-      color: white;
-      line-height: 1;
-      text-shadow: 0 4px 20px rgba(0,0,0,0.2);
-    }
-
-    .streak-label {
-      font-size: 1.25rem;
-      font-weight: 700;
-      color: rgba(255,255,255,0.95);
-      text-transform: uppercase;
-      letter-spacing: 2px;
-      margin-top: var(--space-2);
-    }
-
-    .streak-message {
-      color: rgba(255,255,255,0.9);
-      font-size: 0.9rem;
-      margin-top: var(--space-4);
-    }
-
-    /* Section Card */
-    .section-card {
-      background: var(--bg-card);
-      border-radius: var(--radius-lg);
-      padding: var(--space-5);
-      margin-bottom: var(--space-5);
-      box-shadow: var(--shadow-sm);
-      transition: transform var(--transition-base), box-shadow var(--transition-base);
-    }
-
-    .section-card:hover {
-      transform: translateY(-2px);
-      box-shadow: var(--shadow-md);
-    }
-
-    .section-title {
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: var(--text-secondary);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      margin-bottom: var(--space-4);
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-    }
-
-    .section-title::before {
-      content: '';
-      width: 4px;
-      height: 16px;
-      background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
-      border-radius: 2px;
-    }
-
-    /* Weekly Progress */
-    .weekly-progress {
-      margin-bottom: var(--space-4);
-    }
-
-    .progress-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: var(--space-3);
-    }
-
-    .progress-label {
-      font-size: 0.9rem;
-      color: var(--text-primary);
-      font-weight: 500;
-    }
-
-    .progress-count {
-      font-size: 0.9rem;
-      color: var(--primary);
-      font-weight: 600;
-    }
-
-    .progress-bar {
-      height: 12px;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-full);
-      overflow: hidden;
-      position: relative;
-    }
-
-    .progress-fill {
-      height: 100%;
-      background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
-      border-radius: var(--radius-full);
-      width: 0;
-      transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
-      position: relative;
-    }
-
-    .progress-fill::after {
-      content: '';
-      position: absolute;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      width: 20px;
-      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
-    }
-
-    /* Week Days Grid */
-    .week-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: var(--space-2);
-      margin-top: var(--space-4);
-    }
-
-    .week-day {
-      text-align: center;
-    }
-
-    .week-day-label {
-      font-size: 0.7rem;
-      color: var(--text-muted);
-      font-weight: 500;
-      margin-bottom: var(--space-2);
-    }
-
-    .week-day-indicator {
-      width: 36px;
-      height: 36px;
-      border-radius: var(--radius-md);
-      margin: 0 auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.1rem;
-      background: var(--bg-secondary);
-      transition: all var(--transition-base);
-    }
-
-    .week-day-indicator.completed {
-      background: linear-gradient(135deg, var(--accent) 0%, #10b981 100%);
-      color: white;
-      box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
-    }
-
-    .week-day-indicator.today {
-      border: 2px solid var(--primary);
-      box-shadow: 0 0 0 4px var(--bg-overlay);
-    }
-
-    /* Achievements */
-    .achievements-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: var(--space-3);
-    }
-
-    .achievement {
-      position: relative;
-      aspect-ratio: 1;
-      border-radius: var(--radius-md);
-      background: var(--bg-secondary);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-1);
-      padding: var(--space-2);
-      transition: transform var(--transition-bounce), box-shadow var(--transition-base);
-      cursor: pointer;
-    }
-
-    .achievement.unlocked {
-      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-      box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
-    }
-
-    .achievement.unlocked.gold {
-      background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
-    }
-
-    .achievement.unlocked.silver {
-      background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 100%);
-      box-shadow: 0 4px 20px rgba(156, 163, 175, 0.3);
-    }
-
-    .achievement.unlocked.bronze {
-      background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
-      box-shadow: 0 4px 20px rgba(251, 146, 60, 0.3);
-    }
-
-    .achievement.locked {
-      opacity: 0.6;
-    }
-
-    .achievement:hover:not(.locked) {
-      transform: scale(1.05) translateY(-4px);
-    }
-
-    .achievement.locked:hover {
-      transform: scale(1.02);
-    }
-
-    .achievement.locked:hover .achievement-tooltip {
-      opacity: 1;
-      visibility: visible;
-      transform: translateX(-50%) translateY(-10px);
-    }
-
-    .achievement-icon {
-      font-size: 1.5rem;
-    }
-
-    .achievement-name {
-      font-size: 0.6rem;
-      font-weight: 600;
-      color: var(--text-secondary);
-      text-align: center;
-      line-height: 1.2;
-    }
-
-    .achievement.locked .achievement-name {
-      color: var(--text-muted);
-    }
-
-    .achievement-tooltip {
-      position: absolute;
-      bottom: calc(100% + 8px);
-      left: 50%;
-      transform: translateX(-50%) translateY(0);
-      background: var(--text-primary);
-      color: var(--bg-card);
-      padding: var(--space-2) var(--space-3);
-      border-radius: var(--radius-sm);
-      font-size: 0.7rem;
-      white-space: nowrap;
+      width: 10px;
+      height: 10px;
       opacity: 0;
-      visibility: hidden;
-      transition: all var(--transition-fast);
-      z-index: 10;
     }
-
-    .achievement-tooltip::after {
-      content: '';
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border: 6px solid transparent;
-      border-top-color: var(--text-primary);
-    }
-
-    .achievement.unlocked .achievement-tooltip {
-      display: none;
-    }
-
-    /* Unlock Animation */
-    @keyframes unlockPulse {
-      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
-      50% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(251, 191, 36, 0); }
-      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
-    }
-
     .achievement.just-unlocked {
       animation: unlockPulse 0.6s ease-out;
     }
-
-    @keyframes sparkle {
-      0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
-      50% { opacity: 1; transform: scale(1) rotate(180deg); }
-    }
-
     .sparkle {
       position: absolute;
       font-size: 1rem;
       animation: sparkle 0.6s ease-out forwards;
     }
-
-    /* Daily Tip */
-    .daily-tip {
-      background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
-      border-radius: var(--radius-md);
-      padding: var(--space-4);
-      display: flex;
-      gap: var(--space-3);
-      align-items: flex-start;
+    .toast.show {
+      opacity: 1 !important;
+      transform: translateX(-50%) translateY(0) !important;
     }
-
-    .tip-icon {
-      font-size: 1.5rem;
-      flex-shrink: 0;
-    }
-
-    .tip-content {
-      flex: 1;
-    }
-
-    .tip-text {
-      font-size: 0.9rem;
-      color: var(--text-primary);
-      line-height: 1.5;
-    }
-
-    .tip-author {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-      margin-top: var(--space-2);
-    }
-
-    /* Toggle Switch */
-    .toggle-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--space-4);
-      background: var(--bg-card);
-      border-radius: var(--radius-lg);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .toggle-info {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-    }
-
-    .toggle-icon {
-      font-size: 1.5rem;
-    }
-
-    .toggle-label {
-      font-size: 0.95rem;
-      font-weight: 500;
-      color: var(--text-primary);
-    }
-
-    .toggle-sublabel {
-      font-size: 0.75rem;
-      color: var(--text-muted);
-      margin-top: 2px;
-    }
-
     .toggle-switch {
       position: relative;
       width: 56px;
       height: 32px;
     }
-
     .toggle-switch input {
       opacity: 0;
       width: 0;
       height: 0;
     }
-
     .toggle-slider {
       position: absolute;
       cursor: pointer;
       inset: 0;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-full);
-      transition: background var(--transition-base);
+      background: #e2e8f0;
+      border-radius: 9999px;
+      transition: background 250ms ease;
     }
-
     .toggle-slider::before {
       content: '';
       position: absolute;
@@ -630,179 +116,208 @@
       bottom: 4px;
       background: white;
       border-radius: 50%;
-      transition: transform var(--transition-bounce);
-      box-shadow: var(--shadow-sm);
+      transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+      box-shadow: 0 2px 8px rgba(14, 165, 233, 0.06);
     }
-
     .toggle-switch input:checked + .toggle-slider {
-      background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
+      background: linear-gradient(90deg, #3b82f6 0%, #0ea5e9 100%);
     }
-
     .toggle-switch input:checked + .toggle-slider::before {
       transform: translateX(24px);
     }
-
-    /* Confetti */
-    .confetti-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 1000;
-      overflow: hidden;
-    }
-
-    .confetti {
+    .achievement-tooltip {
       position: absolute;
-      width: 10px;
-      height: 10px;
-      opacity: 0;
-    }
-
-    @keyframes confettiFall {
-      0% {
-        opacity: 1;
-        transform: translateY(-100px) rotate(0deg);
-      }
-      100% {
-        opacity: 0;
-        transform: translateY(100vh) rotate(720deg);
-      }
-    }
-
-    /* Toast Notification */
-    .toast {
-      position: fixed;
-      bottom: 100px;
+      bottom: calc(100% + 8px);
       left: 50%;
-      transform: translateX(-50%) translateY(100px);
-      background: var(--text-primary);
-      color: var(--bg-card);
-      padding: var(--space-4) var(--space-6);
-      border-radius: var(--radius-full);
-      font-size: 0.9rem;
-      font-weight: 500;
-      box-shadow: var(--shadow-lg);
+      transform: translateX(-50%) translateY(0);
+      background: #0f172a;
+      color: #ffffff;
+      padding: 8px 12px;
+      border-radius: 8px;
+      font-size: 0.7rem;
+      white-space: nowrap;
       opacity: 0;
-      transition: all var(--transition-bounce);
-      z-index: 100;
+      visibility: hidden;
+      transition: all 150ms ease;
+      z-index: 10;
+    }
+    .achievement-tooltip::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 6px solid transparent;
+      border-top-color: #0f172a;
+    }
+    .achievement.locked:hover .achievement-tooltip {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(-50%) translateY(-10px);
+    }
+    .achievement.unlocked .achievement-tooltip {
+      display: none;
+    }
+    .week-day-indicator {
+      width: 36px;
+      height: 36px;
+      border-radius: 12px;
+      margin: 0 auto;
       display: flex;
       align-items: center;
-      gap: var(--space-2);
+      justify-content: center;
+      font-size: 1.1rem;
+      background: #e2e8f0;
+      transition: all 250ms ease;
     }
-
-    .toast.show {
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
+    .week-day-indicator.completed {
+      background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
+      color: white;
+      box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
     }
-
-    /* Streak Fire Animation */
-    @keyframes fireFlicker {
-      0%, 100% { transform: scaleY(1) scaleX(1); }
-      25% { transform: scaleY(1.1) scaleX(0.95); }
-      50% { transform: scaleY(0.95) scaleX(1.05); }
-      75% { transform: scaleY(1.05) scaleX(0.98); }
+    .week-day-indicator.today {
+      border: 2px solid #3b82f6;
+      box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.08);
+    }
+    .achievement {
+      position: relative;
+      aspect-ratio: 1;
+      border-radius: 12px;
+      background: #e2e8f0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      padding: 8px;
+      transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 250ms ease;
+      cursor: pointer;
+    }
+    .achievement.unlocked {
+      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+      box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
+    }
+    .achievement.unlocked.gold {
+      background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
+    }
+    .achievement.unlocked.silver {
+      background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 100%);
+      box-shadow: 0 4px 20px rgba(156, 163, 175, 0.3);
+    }
+    .achievement.unlocked.bronze {
+      background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
+      box-shadow: 0 4px 20px rgba(251, 146, 60, 0.3);
+    }
+    .achievement.locked {
+      opacity: 0.6;
+    }
+    .achievement:hover:not(.locked) {
+      transform: scale(1.05) translateY(-4px);
+    }
+    .achievement.locked:hover {
+      transform: scale(1.02);
     }
-
     .streak-icon.animate {
       animation: fireFlicker 0.3s ease-in-out infinite;
     }
   </style>
 </head>
-<body>
-  <div class="container">
-    <header class="header">
-      <div class="header-left">
-<div class="header-logo">
-          <svg viewBox="0 0 24 24" fill="none">
-            <!-- Puzzle piece representing '착' - fitting together -->
-            <defs>
-              <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop offset="0%" stop-color="#06b6d4"/>
-                <stop offset="50%" stop-color="#3b82f6"/>
-                <stop offset="100%" stop-color="#0ea5e9"/>
-              </linearGradient>
-            </defs>
-            <!-- Puzzle piece body -->
-            <path d="M6 3a3 3 0 013 3v2a3 3 0 01-3 3H4a2 2 0 00-2 2v6a2 2 0 002 2h2a3 3 0 013 3v2a3 3 0 01-3 3H6a3 3 0 01-3-3v-2a3 3 0 013-3h2a2 2 0 002-2V8a2 2 0 00-2-2H6a3 3 0 01-3-3V6a3 3 0 013-3z" fill="url(#logoGrad)"/>
-            <!-- Puzzle knob highlight -->
-            <circle cx="12" cy="12" r="3" fill="white" opacity="0.3"/>
-          </svg>
+<body class="font-sans bg-surface-primary text-text-primary min-h-screen overflow-x-hidden antialiased">
+  <div class="max-w-[480px] mx-auto p-4 pb-[100px]">
+    <header class="flex items-center justify-between p-4 bg-surface-card shadow-sm sticky top-0 z-[100] mb-6 rounded-xl">
+      <div class="flex items-center gap-3">
+          <div class="relative w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center shadow-blue">
+            <svg viewBox="0 0 24 24" fill="none" class="w-6 h-6 fill-white drop-shadow-md">
+              <defs>
+                <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stop-color="#06b6d4"/>
+                  <stop offset="50%" stop-color="#3b82f6"/>
+                  <stop offset="100%" stop-color="#0ea5e9"/>
+                </linearGradient>
+              </defs>
+              <path d="M6 3a3 3 0 013 3v2a3 3 0 01-3 3H4a2 2 0 00-2 2v6a2 2 0 002 2h2a3 3 0 013 3v2a3 3 0 01-3 3H6a3 3 0 01-3-3v-2a3 3 0 013-3h2a2 2 0 002-2V8a2 2 0 00-2-2H6a3 3 0 01-3-3V6a3 3 0 013-3z" fill="url(#logoGrad)"/>
+              <circle cx="12" cy="12" r="3" fill="white" opacity="0.3"/>
+            </svg>
+          </div>
+          <h1 class="font-display text-xl font-semibold">내 진행 상황</h1>
         </div>
-        <h1 class="header-title">내 진행 상황</h1>
-      </div>
-      <div class="header-right">
-        <button class="back-btn" onclick="window.location.href='index.html'">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M19 12H5M12 19l-7-7 7-7"/>
-          </svg>
-          뒤로
-        </button>
-      </div>
-    </header>
+        <div class="flex items-center gap-3">
+          <button class="w-11 h-11 rounded-xl bg-surface-secondary flex items-center justify-center cursor-pointer shadow-sm hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 transition-all duration-150" onclick="window.location.href='index.html'">
+            <svg class="w-5 h-5 stroke-text-primary"><use href="#icon-arrow-left"></use></svg>
+            뒤로
+          </button>
+        </div>
+      </header>
 
-    <div class="streak-card">
-      <div class="streak-icon" id="streakIcon">🔥</div>
-      <div class="streak-count" id="streakCount">0</div>
-      <div class="streak-label">STREAK!</div>
-      <div class="streak-message" id="streakMessage">오늘 시작하세요!</div>
-    </div>
+      <div class="bg-gradient-to-br from-primary to-secondary rounded-[28px] p-8 text-center relative overflow-hidden shadow-glow mb-6">
+        <div class="streak-icon text-5xl mb-2 animate-pulse-slow" id="streakIcon">🔥</div>
+        <div class="font-display text-7xl font-extrabold text-white leading-none drop-shadow-lg" id="streakCount">0</div>
+        <div class="text-xl font-bold text-white/95 uppercase tracking-[2px] mt-1">STREAK!</div>
+        <div class="text-white/90 text-sm mt-4" id="streakMessage">오늘 시작하세요!</div>
+      </div>
 
-    <div class="section-card">
-      <div class="section-title">주간 목표</div>
-      <div class="weekly-progress">
-        <div class="progress-header">
-          <span class="progress-label">이번 주 완료된 일수</span>
-          <span class="progress-count"><span id="daysCompleted">0</span>/7</span>
+      <div class="bg-surface-card rounded-[20px] p-5 mb-5 shadow-sm hover:-translate-y-0.5 hover:shadow-md transition-all duration-250">
+        <div class="text-xs font-semibold text-text-secondary uppercase tracking-wider mb-4 flex items-center gap-2">
+          <span class="w-1 h-4 bg-gradient-to-b from-primary to-secondary rounded-sm"></span>
+          주간 목표
         </div>
-        <div class="progress-bar">
-          <div class="progress-fill" id="progressFill"></div>
+        <div class="mb-4">
+          <div class="flex justify-between items-center mb-3">
+            <span class="text-sm text-text-primary font-medium">이번 주 완료된 일수</span>
+            <span class="text-sm text-primary font-semibold"><span id="daysCompleted">0</span>/7</span>
+          </div>
+          <div class="h-3 bg-surface-secondary rounded-full overflow-hidden relative">
+            <div class="h-full bg-gradient-to-r from-primary to-accent rounded-full w-0 transition-all duration-1000 relative" id="progressFill"></div>
+          </div>
+        </div>
+        <div class="grid grid-cols-7 gap-2 mt-4" id="weekGrid">
         </div>
       </div>
-      <div class="week-grid" id="weekGrid">
+
+      <div class="bg-surface-card rounded-[20px] p-5 mb-5 shadow-sm hover:-translate-y-0.5 hover:shadow-md transition-all duration-250">
+        <div class="text-xs font-semibold text-text-secondary uppercase tracking-wider mb-4 flex items-center gap-2">
+          <span class="w-1 h-4 bg-gradient-to-b from-primary to-secondary rounded-sm"></span>
+          업적
+        </div>
+        <div class="grid grid-cols-4 gap-3" id="achievementsGrid">
+        </div>
+      </div>
+
+      <div class="bg-surface-card rounded-[20px] p-5 mb-5 shadow-sm hover:-translate-y-0.5 hover:shadow-md transition-all duration-250">
+        <div class="text-xs font-semibold text-text-secondary uppercase tracking-wider mb-4 flex items-center gap-2">
+          <span class="w-1 h-4 bg-gradient-to-b from-primary to-secondary rounded-sm"></span>
+          오늘의 팁
+        </div>
+        <div class="bg-gradient-to-br from-surface-secondary to-surface-card rounded-xl p-4 flex gap-3 items-start">
+          <span class="text-2xl shrink-0">💡</span>
+          <div class="flex-1">
+            <p class="text-sm text-text-primary leading-relaxed" id="tipText">작은 걸음이 큰 변화를 만듭니다! 오늘 5분만 투자하세요.</p>
+            <p class="text-xs text-text-muted mt-2">— 오늘의 동기</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between p-4 bg-surface-card rounded-[20px] shadow-sm">
+        <div class="flex items-center gap-3">
+          <span class="text-2xl">🔔</span>
+          <div>
+            <div class="text-sm font-medium text-text-primary">습관 알림</div>
+            <div class="text-xs text-text-muted mt-0.5">매일 알림 받기</div>
+          </div>
+        </div>
+        <label class="toggle-switch">
+          <input type="checkbox" id="habitToggle">
+          <span class="toggle-slider"></span>
+        </label>
       </div>
     </div>
 
-    <div class="section-card">
-      <div class="section-title">업적</div>
-      <div class="achievements-grid" id="achievementsGrid">
-      </div>
+    <div class="fixed bottom-[100px] left-1/2 -translate-x-1/2 translate-y-[100px] bg-text-primary text-surface-card px-6 py-4 rounded-full text-sm font-medium shadow-lg opacity-0 transition-all duration-500 z-[100] flex items-center gap-2" id="toast">
+      <span id="toastIcon">🎉</span>
+      <span id="toastText">업적 달성!</span>
     </div>
 
-    <div class="section-card">
-      <div class="section-title">오늘의 팁</div>
-      <div class="daily-tip">
-        <span class="tip-icon">💡</span>
-        <div class="tip-content">
-          <p class="tip-text" id="tipText">작은 걸음이 큰 변화를 만듭니다! 오늘 5분만的投资하세요.</p>
-          <p class="tip-author">— 오늘의 동기</p>
-        </div>
-      </div>
-    </div>
-
-    <div class="toggle-container">
-      <div class="toggle-info">
-        <span class="toggle-icon">🔔</span>
-        <div>
-          <div class="toggle-label">습관 알림</div>
-          <div class="toggle-sublabel">매일 알림 받기</div>
-        </div>
-      </div>
-      <label class="toggle-switch">
-        <input type="checkbox" id="habitToggle">
-        <span class="toggle-slider"></span>
-      </label>
-    </div>
-  </div>
-
-  <div class="toast" id="toast">
-    <span id="toastIcon">🎉</span>
-    <span id="toastText">업적 달성!</span>
-  </div>
-
-  <div class="confetti-container" id="confettiContainer"></div>
+    <div class="fixed top-0 left-0 w-full h-full pointer-events-none z-[1000] overflow-hidden" id="confettiContainer"></div>
 
   <script>
     // Data Management
diff --git a/scene_swipe.html b/scene_swipe.html
index 4651a47..f4246fa 100644
--- a/scene_swipe.html
+++ b/scene_swipe.html
@@ -7,752 +7,166 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: { DEFAULT: '#3b82f6', light: '#60a5fa', dark: '#1d4ed8' },
+            secondary: { DEFAULT: '#06b6d4', light: '#22d3ee' },
+            accent: { DEFAULT: '#0ea5e9', warn: '#38bdf8', danger: '#f472b6' },
+            surface: { primary: '#f8fafc', secondary: '#e2e8f0', card: '#ffffff' },
+            text: { primary: '#0f172a', secondary: '#475569', muted: '#94a3b8' },
+          },
+          fontFamily: {
+            sans: ['Noto Sans KR', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+            display: ['Outfit', 'sans-serif'],
+          },
+          boxShadow: {
+            'sm': '0 2px 8px rgba(14, 165, 233, 0.06)',
+            'md': '0 4px 20px rgba(14, 165, 233, 0.08)',
+            'lg': '0 8px 40px rgba(14, 165, 233, 0.12)',
+            'glow': '0 0 30px rgba(14, 165, 233, 0.25)',
+            'blue': '0 4px 20px rgba(59, 130, 246, 0.3)',
+          },
+          animation: {
+            'float': 'float 3s ease-in-out infinite',
+            'fade-slide-up': 'fadeSlideUp 0.5s ease forwards',
+            'slide-in': 'slideIn 0.5s ease forwards',
+            'bounce-in': 'bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
+            'pulse-slow': 'pulse 2s ease-in-out infinite',
+          },
+          keyframes: {
+            float: {
+              '0%, 100%': { transform: 'translateY(0)' },
+              '50%': { transform: 'translateY(-10px)' },
+            },
+            fadeSlideUp: {
+              from: { opacity: '0', transform: 'translateY(20px)' },
+              to: { opacity: '1', transform: 'translateY(0)' },
+            },
+            slideIn: {
+              from: { opacity: '0', transform: 'translateY(30px)' },
+              to: { opacity: '1', transform: 'translateY(0)' },
+            },
+            bounceIn: {
+              '0%': { transform: 'scale(0)' },
+              '50%': { transform: 'scale(1.1)' },
+              '100%': { transform: 'scale(1)' },
+            },
+            pulse: {
+              '0%, 100%': { opacity: '0.5', transform: 'scale(1)' },
+              '50%': { opacity: '1', transform: 'scale(1.05)' },
+            },
+            shimmer: {
+              '0%': { transform: 'translateX(-100%) translateY(-100%)' },
+              '100%': { transform: 'translateX(100%) translateY(100%)' },
+            },
+            cardExitLeft: {
+              to: { transform: 'translateX(-150%) rotate(-15deg)', opacity: '0' },
+            },
+            cardExitRight: {
+              to: { transform: 'translateX(150%) rotate(15deg)', opacity: '0' },
+            },
+            cardEnter: {
+              from: { transform: 'scale(0.9) translateY(30px)', opacity: '0' },
+              to: { transform: 'scale(1) translateY(0)', opacity: '1' },
+            },
+          },
+        },
+      },
+    }
+  </script>
   <style>
-    :root {
-      /* Blue Light Puzzle Theme - Intelligent, Precise, Cool */
-      --primary: #3b82f6;
-      --primary-light: #60a5fa;
-      --primary-dark: #1d4ed8;
-      --secondary: #06b6d4;
-      --secondary-light: #22d3ee;
-      --accent: #0ea5e9;
-      --accent-warn: #38bdf8;
-      --accent-danger: #f472b6;
-
-      --bg-primary: #f8fafc;
-      --bg-secondary: #e2e8f0;
-      --bg-card: #ffffff;
-      --bg-overlay: rgba(14, 165, 233, 0.08);
-
-      --text-primary: #0f172a;
-      --text-secondary: #475569;
-      --text-muted: #94a3b8;
-
-      --shadow-sm: 0 2px 8px rgba(14, 165, 233, 0.06);
-      --shadow-md: 0 4px 20px rgba(14, 165, 233, 0.08);
-      --shadow-lg: 0 8px 40px rgba(14, 165, 233, 0.12);
-      --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.25);
-      --shadow-blue: 0 4px 20px rgba(59, 130, 246, 0.3);
-
-      --space-1: 4px;
-      --space-2: 8px;
-      --space-3: 12px;
-      --space-4: 16px;
-      --space-5: 20px;
-      --space-6: 24px;
-      --space-8: 32px;
-      --space-10: 40px;
-      --space-12: 48px;
-      --space-16: 64px;
-
-      --radius-sm: 8px;
-      --radius-md: 12px;
-      --radius-lg: 20px;
-      --radius-xl: 28px;
-      --radius-full: 9999px;
-
-      --transition-fast: 150ms ease;
-      --transition-base: 250ms ease;
-      --transition-slow: 400ms ease;
-      --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-
-    [data-theme="dark"] {
-      --bg-primary: #0a0e1a;
-      --bg-secondary: #111827;
-      --bg-card: #1e293b;
-      --bg-overlay: rgba(14, 165, 233, 0.12);
-      --text-primary: #f1f5f9;
-      --text-secondary: #94a3b8;
-      --text-muted: #64748b;
-      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
-      --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
-      --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
-      --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.3);
-    }
-
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-
-    body {
-      font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      min-height: 100vh;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; }
-
-    /* Buttons */
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-2);
-      padding: var(--space-4) var(--space-8);
-      border-radius: var(--radius-full);
-      font-size: 1rem;
-      font-weight: 600;
-      font-family: 'Outfit', sans-serif;
-      cursor: pointer;
-      border: none;
-      transition: all var(--transition-base);
-      min-height: 56px;
-      min-width: 160px;
-    }
-
-    .btn-primary {
-      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-      color: white;
-      box-shadow: var(--shadow-blue);
-    }
-
-    .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4);
-    }
-
-    .btn-primary:active {
-      transform: translateY(0);
-    }
-
-    .btn-secondary {
-      background: var(--bg-card);
-      color: var(--text-primary);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .btn-secondary:hover {
-      background: var(--bg-secondary);
-    }
-
-    .btn-ghost {
-      background: transparent;
-      color: var(--text-secondary);
-      min-width: auto;
-      padding: var(--space-3) var(--space-4);
-    }
-
-    .btn-icon {
-      width: 56px;
-      height: 56px;
-      padding: 0;
-      border-radius: var(--radius-lg);
-    }
-
-    .btn svg {
-      width: 20px;
-      height: 20px;
-      stroke: currentColor;
-      fill: none;
-    }
-
-    /* Header */
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--space-4) var(--space-6);
-      background: var(--bg-card);
-      box-shadow: var(--shadow-sm);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-
-    .back-btn {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      padding: var(--space-2) var(--space-4);
-      background: var(--bg-secondary);
-      border: none;
-      border-radius: var(--radius-full);
-      color: var(--text-secondary);
-      font-size: 14px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: var(--transition-fast);
-    }
-
-    .back-btn:hover { background: var(--primary-light); color: white; }
-
-    .header-title {
-      font-family: 'Outfit', sans-serif;
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-
-    .undo-btn {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      padding: var(--space-3) var(--space-5);
-      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-      border: none;
-      border-radius: var(--radius-full);
-      color: white;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      box-shadow: var(--shadow-md), 0 4px 15px rgba(14, 165, 233, 0.3);
-      transition: var(--transition-base);
-    }
-
-    .undo-btn:hover:not(:disabled) {
-      transform: translateY(-2px);
-      box-shadow: var(--shadow-lg), 0 6px 20px rgba(14, 165, 233, 0.4);
-    }
-
-    .undo-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-
-    /* Main Container */
-    .main-container {
-      display: flex;
-      flex-direction: column;
-      min-height: calc(100vh - 70px);
-      padding: var(--space-6);
-    }
-
-    /* Progress Header */
-    .progress-header {
-      text-align: center;
-      margin-bottom: var(--space-8);
-    }
-
-    .progress-header h2 {
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--text-primary);
-      margin-bottom: var(--space-2);
-    }
-
-    .progress-header p {
-      color: var(--text-muted);
-      font-size: 15px;
-    }
-
-    /* Card Stack */
-    .card-area {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      padding: var(--space-8) 0;
-    }
-
-    .card-stack {
-      position: relative;
-      width: 100%;
-      max-width: 320px;
-      height: 420px;
-    }
-
-    /* File Card */
-    .file-card {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: var(--bg-card);
-      border-radius: var(--radius-xl);
-      box-shadow: var(--shadow-lg);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      touch-action: pan-y;
-      cursor: grab;
-      user-select: none;
-      transition: transform 0.1s ease, box-shadow 0.2s ease;
-    }
-
-    .file-card:active { cursor: grabbing; }
-
-    /* Card Visual Stack Effect */
-    .file-card::before {
-      content: '';
-      position: absolute;
-      top: 8px;
-      left: 8px;
-      right: 8px;
-      bottom: -8px;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-xl);
-      z-index: -1;
-      opacity: 0.5;
-    }
-
-    .file-card::after {
-      content: '';
-      position: absolute;
-      top: 4px;
-      left: 4px;
-      right: 4px;
-      bottom: -4px;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-xl);
-      z-index: -2;
-      opacity: 0.3;
-    }
-
-    /* Card Header with Type Badge */
-    .card-header {
-      padding: var(--space-5) var(--space-6);
-      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .file-type-badge {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      background: rgba(255,255,255,0.2);
-      padding: var(--space-2) var(--space-3);
-      border-radius: var(--radius-full);
-      font-size: 12px;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    .file-type-badge .icon { font-size: 16px; }
-
-    .file-size-badge {
-      font-size: 12px;
-      opacity: 0.9;
-    }
-
-    /* Card Body */
-    .card-body {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: var(--space-8);
-    }
-
-    .file-icon-container {
-      width: 120px;
-      height: 120px;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-lg);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: var(--space-6);
-      position: relative;
-      overflow: hidden;
-    }
-
-    .file-icon-container::before {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
-      animation: shimmer 2s infinite;
-    }
-
     @keyframes shimmer {
       0% { transform: translateX(-100%) translateY(-100%); }
       100% { transform: translateX(100%) translateY(100%); }
     }
-
-    .file-icon-container .icon { font-size: 64px; }
-
-    .file-name {
-      font-family: 'Outfit', sans-serif;
-      font-size: 22px;
-      font-weight: 600;
-      color: var(--text-primary);
-      text-align: center;
-      margin-bottom: var(--space-3);
-      line-height: 1.3;
-      word-break: break-word;
-    }
-
-    .file-date {
-      color: var(--text-muted);
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-    }
-
-    .file-date svg { width: 16px; height: 16px; }
-
-    /* Swipe Indicators */
-    .swipe-indicators {
-      position: absolute;
-      top: 50%;
-      left: var(--space-4);
-      right: var(--space-4);
-      display: flex;
-      justify-content: space-between;
-      transform: translateY(-50%);
-      pointer-events: none;
-      z-index: 10;
-    }
-
-    .swipe-indicator {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 56px;
-      height: 56px;
-      border-radius: 50%;
-      opacity: 0;
-      transform: scale(0.5);
-      transition: all var(--transition-base);
-    }
-
-    .swipe-indicator.delete {
-      background: var(--accent-danger);
-      color: white;
-    }
-
-    .swipe-indicator.keep {
-      background: var(--accent);
-      color: white;
-    }
-
-    .swipe-indicator.active {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    .swipe-indicator svg { width: 28px; height: 28px; }
-
-    /* Card Footer */
-    .card-footer {
-      padding: var(--space-4) var(--space-6);
-      background: var(--bg-secondary);
-      display: flex;
-      justify-content: center;
-      gap: var(--space-6);
-    }
-
-    .swipe-hint {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      color: var(--text-muted);
-      font-size: 13px;
-    }
-
-    .swipe-hint .arrow {
-      font-size: 18px;
-      color: var(--text-secondary);
-    }
-
-    /* Action Buttons Alternative */
-    .action-buttons {
-      display: flex;
-      justify-content: center;
-      gap: var(--space-6);
-      margin-top: var(--space-8);
-    }
-
-    .action-btn {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-      border: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: var(--transition-bounce);
-      box-shadow: var(--shadow-md);
-    }
-
-    .action-btn:active {
-      transform: scale(0.9);
-    }
-
-    .action-btn.delete {
-      background: linear-gradient(135deg, var(--accent-danger), #ef4444);
-      color: white;
-    }
-
-    .action-btn.keep {
-      background: linear-gradient(135deg, var(--accent), #10b981);
-      color: white;
-    }
-
-    .action-btn svg { width: 36px; height: 36px; }
-
-    /* Swipe Overlay on Card */
-    .card-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      transition: opacity 0.15s ease;
-      pointer-events: none;
-      border-radius: var(--radius-xl);
-      z-index: 5;
-    }
-
-    .card-overlay.delete {
-      background: linear-gradient(135deg, rgba(248,113,113,0.95), rgba(239,68,68,0.95));
-    }
-
-    .card-overlay.keep {
-      background: linear-gradient(135deg, rgba(52,211,153,0.95), rgba(16,185,129,0.95));
-    }
-
-    .card-overlay.show { opacity: 1; }
-
-    .card-overlay .action-label {
-      font-family: 'Outfit', sans-serif;
-      font-size: 28px;
-      font-weight: 700;
-      color: white;
-      text-transform: uppercase;
-      letter-spacing: 3px;
-    }
-
-    /* Progress Footer */
-    .progress-footer {
-      padding: var(--space-5);
-      background: var(--bg-card);
-      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-      box-shadow: 0 -4px 20px rgba(30, 27, 46, 0.08);
-    }
-
-    .progress-bar-container {
-      display: flex;
-      align-items: center;
-      gap: var(--space-4);
-    }
-
-    .progress-bar-wrapper {
-      flex: 1;
-      height: 8px;
-      background: var(--bg-secondary);
-      border-radius: var(--radius-full);
-      overflow: hidden;
-    }
-
-    .progress-bar-fill {
-      height: 100%;
-      background: linear-gradient(90deg, var(--primary), var(--secondary));
-      border-radius: var(--radius-full);
-      transition: width 0.5s var(--transition-bounce);
-    }
-
-    .progress-text {
-      font-family: 'Outfit', sans-serif;
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--primary);
-      min-width: 60px;
-      text-align: right;
-    }
-
-    /* Empty State */
-    .empty-state {
-      display: none;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      padding: var(--space-16);
-    }
-
-    .empty-state.show { display: flex; }
-
-    .empty-state .icon-wrapper {
-      width: 120px;
-      height: 120px;
-      background: linear-gradient(135deg, var(--primary), var(--secondary));
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: var(--space-6);
-      animation: pulse 2s ease infinite;
-    }
-
-    @keyframes pulse {
-0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
-50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(14, 165, 233, 0); }
-    }
-
-    .empty-state .icon-wrapper svg { width: 60px; height: 60px; color: white; }
-
-    .empty-state h2 {
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--text-primary);
-      margin-bottom: var(--space-3);
-    }
-
-    .empty-state p {
-      color: var(--text-muted);
-      font-size: 16px;
-      margin-bottom: var(--space-6);
-    }
-
-    .celebrate-btn {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      padding: var(--space-4) var(--space-6);
-      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-      border: none;
-      border-radius: var(--radius-full);
-      color: white;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      box-shadow: var(--shadow-md);
-      transition: var(--transition-base);
-    }
-
-    .celebrate-btn:hover {
-      transform: translateY(-2px);
-      box-shadow: var(--shadow-lg);
-    }
-
-    /* Toast */
-    .toast {
-      position: fixed;
-      top: 90px;
-      left: 50%;
-      transform: translateX(-50%) translateY(-20px);
-      background: var(--text-primary);
-      color: var(--bg-card);
-      padding: var(--space-3) var(--space-6);
-      border-radius: var(--radius-full);
-      font-size: 14px;
-      font-weight: 500;
-      box-shadow: var(--shadow-lg);
-      opacity: 0;
-      pointer-events: none;
-      transition: all var(--transition-base);
-      z-index: 200;
-    }
-
-    .toast.show {
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-    }
-
-    /* Animations */
-    .card-exit-left {
-      animation: cardExitLeft 0.4s ease forwards;
-    }
-
-    .card-exit-right {
-      animation: cardExitRight 0.4s ease forwards;
-    }
-
     @keyframes cardExitLeft {
       to { transform: translateX(-150%) rotate(-15deg); opacity: 0; }
     }
-
     @keyframes cardExitRight {
       to { transform: translateX(150%) rotate(15deg); opacity: 0; }
     }
-
-    .card-enter {
-      animation: cardEnter 0.4s var(--transition-bounce) forwards;
-    }
-
     @keyframes cardEnter {
       from { transform: scale(0.9) translateY(30px); opacity: 0; }
       to { transform: scale(1) translateY(0); opacity: 1; }
     }
-
-    /* Responsive */
-    @media (max-width: 380px) {
-      .card-stack { height: 380px; }
-      .action-btn { width: 70px; height: 70px; }
-      .action-btn svg { width: 30px; height: 30px; }
-    }
   </style>
 </head>
-<body>
-  <header class="header">
-    <button class="back-btn" onclick="window.location.href='index.html'">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M19 12H5M12 19l-7-7 7-7"/>
-      </svg>
+<body class="font-sans bg-surface-primary text-text-primary min-h-screen antialiased">
+  <!-- Heroicons SVG Sprite -->
+  <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+    <symbol id="icon-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 12H5M12 19l-7-7 7-7"/>
+    </symbol>
+    <symbol id="icon-arrow-uturn-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M3 7v6h6M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>
+    </symbol>
+    <symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
+    </symbol>
+    <symbol id="icon-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+    </symbol>
+    <symbol id="icon-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
+    </symbol>
+  </svg>
+  <header class="flex items-center justify-between px-6 py-4 bg-surface-card shadow-sm sticky top-0 z-50">
+    <button class="flex items-center gap-2 px-4 py-2 bg-surface-secondary rounded-full text-text-secondary text-sm font-medium transition-colors duration-150 hover:bg-primary-light hover:text-white" onclick="window.location.href='index.html'">
+      <svg class="w-5 h-5"><use href="#icon-arrow-left"></use></svg>
       뒤로
     </button>
-    <h1 class="header-title">스와이프 모드</h1>
-    <button class="undo-btn" id="undoBtn" disabled>
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M3 7v6h6M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>
-      </svg>
+    <h1 class="font-display text-lg font-semibold text-text-primary">스와이프 모드</h1>
+    <button class="flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-primary to-primary-dark rounded-full text-white text-sm font-semibold shadow-md transition-all duration-250 hover:-translate-y-0.5 hover:shadow-lg disabled:opacity-40 disabled:cursor-not-allowed disabled:transform-none" id="undoBtn" disabled>
+      <svg class="w-4 h-4"><use href="#icon-arrow-uturn-left"></use></svg>
       실행 취소
     </button>
   </header>
 
-  <main class="main-container">
-    <div class="progress-header">
-      <h2 id="currentFileName">project_proposal.pdf</h2>
-      <p>왼쪽으로 스와이프하면 삭제, 오른쪽으로 스와이프하면 보관</p>
+  <main class="flex flex-col min-h-[calc(100vh-70px)] px-6">
+    <div class="text-center mb-8">
+      <h2 class="text-[28px] font-bold text-text-primary mb-1" id="currentFileName">project_proposal.pdf</h2>
+      <p class="text-text-muted text-sm">왼쪽으로 스와이프하면 삭제, 오른쪽으로 스와이프하면 보관</p>
     </div>
 
-    <div class="card-area">
-      <div class="card-stack" id="cardStack"></div>
-      
-      <div class="empty-state" id="emptyState">
-        <div class="icon-wrapper">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
-            <polyline points="22 4 12 14.01 9 11.01"/>
-          </svg>
+    <div class="flex-1 flex flex-col items-center justify-center relative py-8">
+      <div class="relative w-full max-w-[320px] h-[420px]" id="cardStack"></div>
+
+      <div class="hidden flex-col items-center justify-center text-center p-16" id="emptyState">
+        <div class="w-[120px] h-[120px] bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center mb-6 animate-pulse-slow shadow-glow">
+          <svg class="w-[60px] h-[60px] text-white"><use href="#icon-check"></use></svg>
         </div>
-        <h2>모두 완료!</h2>
-        <p>모든 파일을 검토했습니다</p>
-        <button class="celebrate-btn" onclick="resetFiles()">
+        <h2 class="text-[28px] font-bold text-text-primary mb-3">모두 완료!</h2>
+        <p class="text-text-muted text-base mb-6">모든 파일을 검토했습니다</p>
+        <button class="flex items-center gap-2 px-6 py-4 bg-gradient-to-r from-primary to-primary-dark rounded-full text-white text-base font-semibold shadow-md transition-all duration-250 hover:-translate-y-0.5 hover:shadow-lg" onclick="resetFiles()">
           다시 시작
         </button>
       </div>
     </div>
 
-    <div class="action-buttons" id="actionButtons">
-      <button class="action-btn delete" onclick="handleSwipe('delete')">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="3 6 5 6 21 6"/>
-          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-        </svg>
+    <div class="flex justify-center gap-6 mt-8" id="actionButtons">
+      <button class="w-[80px] h-[80px] rounded-full bg-gradient-to-br from-accent-danger to-red-500 text-white flex items-center justify-center shadow-md transition-transform duration-500 active:scale-90" onclick="handleSwipe('delete')">
+        <svg class="w-9 h-9"><use href="#icon-trash"></use></svg>
       </button>
-      <button class="action-btn keep" onclick="handleSwipe('keep')">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
-          <polyline points="22 4 12 14.01 9 11.01"/>
-        </svg>
+      <button class="w-[80px] h-[80px] rounded-full bg-gradient-to-br from-accent to-emerald-500 text-white flex items-center justify-center shadow-md transition-transform duration-500 active:scale-90" onclick="handleSwipe('keep')">
+        <svg class="w-9 h-9"><use href="#icon-check"></use></svg>
       </button>
     </div>
   </main>
 
-  <footer class="progress-footer">
-    <div class="progress-bar-container">
-      <div class="progress-bar-wrapper">
-        <div class="progress-bar-fill" id="progressFill" style="width: 0%"></div>
+  <footer class="p-5 bg-surface-card rounded-t-3xl shadow-[0_-4px_20px_rgba(30,27,46,0.08)]">
+    <div class="flex items-center gap-4">
+      <div class="flex-1 h-2 bg-surface-secondary rounded-full overflow-hidden">
+        <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-500" id="progressFill" style="width: 0%"></div>
       </div>
-      <div class="progress-text" id="progressText">0%</div>
+      <div class="font-display text-sm font-semibold text-primary min-w-[60px] text-right" id="progressText">0%</div>
     </div>
   </footer>
 
-  <div class="toast" id="toast">파일 보관됨</div>
+  <div class="fixed top-[90px] left-1/2 -translate-x-1/2 bg-text-primary text-surface-card px-6 py-3 rounded-full text-sm font-medium shadow-lg opacity-0 pointer-events-none transition-all duration-250 z-[200]" id="toast">파일 보관됨</div>
 
   <script>
     const mockFiles = [
@@ -793,199 +207,208 @@
     function createCard(file) {
       const typeInfo = getFileTypeInfo(file.type);
       return `
-        <div class="file-card" data-id="${file.id}" style="transform: translateX(0) rotate(0deg);">
-          <div class="card-overlay delete" id="overlayDelete">
-            <span class="action-label">삭제</span>
+        <div class="file-card absolute w-full h-full bg-surface-card rounded-[28px] shadow-lg flex flex-col overflow-hidden touch-pan-y cursor-grab select-none transition-transform duration-100" data-id="${file.id}" style="transform: translateX(0) rotate(0deg);">
+          <div class="card-overlay absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-150 pointer-events-none rounded-[28px] z-10" id="overlayDelete">
+            <span class="font-display text-[28px] font-bold text-white uppercase tracking-[3px]">삭제</span>
           </div>
-          <div class="card-overlay keep" id="overlayKeep">
-            <span class="action-label">보관</span>
+          <div class="card-overlay absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-150 pointer-events-none rounded-[28px] z-10" id="overlayKeep">
+            <span class="font-display text-[28px] font-bold text-white uppercase tracking-[3px]">보관</span>
           </div>
-          
-          <div class="card-header" style="background: linear-gradient(135deg, ${typeInfo.color}, ${typeInfo.color}dd)">
-            <div class="file-type-badge">
-              <span class="icon">${file.icon}</span>
+          <div class="card-header px-6 py-5 bg-gradient-to-br from-primary to-primary-dark text-white flex items-center justify-between">
+            <div class="flex items-center gap-2 bg-white/20 px-3 py-2 rounded-full text-xs font-semibold uppercase">
+              <span class="text-base">${file.icon}</span>
               <span>${typeInfo.label}</span>
             </div>
-            <span class="file-size-badge">${file.size}</span>
+            <span class="text-xs opacity-90">${file.size}</span>
           </div>
-          
-          <div class="card-body">
-            <div class="file-icon-container">
-              <span class="icon">${file.icon}</span>
+          <div class="card-body flex-1 flex flex-col items-center justify-center px-8">
+            <div class="w-[120px] h-[120px] bg-surface-secondary rounded-3xl flex items-center justify-center mb-6 relative overflow-hidden">
+              <div class="absolute inset-0 bg-gradient-to-br from-transparent via-white/30 to-transparent animate-shimmer"></div>
+              <span class="text-[64px] relative z-10">${file.icon}</span>
             </div>
-            <div class="file-name">${file.name}</div>
-            <div class="file-date">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
-                <line x1="16" y1="2" x2="16" y2="6"/>
-                <line x1="8" y1="2" x2="8" y2="6"/>
-                <line x1="3" y1="10" x2="21" y2="10"/>
-              </svg>
+            <h3 class="font-display text-xl font-semibold text-text-primary text-center mb-3 leading-tight break-all">${file.name}</h3>
+            <p class="text-text-muted text-sm flex items-center gap-2">
+              <svg class="w-4 h-4"><use href="#icon-calendar"></use></svg>
               ${file.date}
-            </div>
+            </p>
           </div>
-          
-          <div class="card-footer">
-            <span class="swipe-hint">
-              <span class="arrow">←</span> 삭제
-            </span>
-            <span class="swipe-hint">
-              보관 <span class="arrow">→</span>
-            </span>
+          <div class="card-footer px-6 py-4 bg-surface-secondary flex justify-center gap-6">
+            <div class="flex items-center gap-2 text-text-muted text-xs">
+              <span class="text-lg text-text-secondary">←</span>
+              <span>삭제</span>
+            </div>
+            <div class="flex items-center gap-2 text-text-muted text-xs">
+              <span>보관</span>
+              <span class="text-lg text-text-secondary">→</span>
+            </div>
           </div>
         </div>
       `;
     }
 
-    function renderCard() {
+    function renderCards() {
       if (files.length === 0) {
-        cardStack.style.display = 'none';
-        emptyState.classList.add('show');
+        cardStack.innerHTML = '';
+        emptyState.classList.remove('hidden');
+        emptyState.classList.add('flex');
         actionButtons.style.display = 'none';
+        currentFileName.textContent = '모든 파일 검토 완료';
         return;
       }
 
-      cardStack.style.display = 'block';
-      emptyState.classList.remove('show');
+      emptyState.classList.add('hidden');
+      emptyState.classList.remove('flex');
       actionButtons.style.display = 'flex';
 
-      const file = files[0];
-      cardStack.innerHTML = createCard(file);
-      currentFileName.textContent = file.name;
+      const topFile = files[0];
+      currentFileName.textContent = topFile.name;
+      cardStack.innerHTML = createCard(topFile);
 
-      setupSwipeGestures();
-      updateProgress();
+      const card = cardStack.querySelector('.file-card');
+      initSwipe(card);
     }
 
-    function setupSwipeGestures() {
+    let startX = 0;
+    let currentX = 0;
+    let isDragging = false;
+
+    function initSwipe(card) {
+      if (!card) return;
+
+      card.addEventListener('mousedown', (e) => startDrag(e));
+      card.addEventListener('touchstart', (e) => startDrag(e), { passive: true });
+
+      document.addEventListener('mousemove', (e) => moveDrag(e));
+      document.addEventListener('touchmove', (e) => moveDrag(e), { passive: true });
+
+      document.addEventListener('mouseup', () => endDrag(card));
+      document.addEventListener('touchend', () => endDrag(card));
+    }
+
+    function startDrag(e) {
+      isDragging = true;
+      startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
+      currentX = 0;
+    }
+
+    function moveDrag(e) {
+      if (!isDragging) return;
+      const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
+      currentX = clientX - startX;
+
       const card = cardStack.querySelector('.file-card');
       if (!card) return;
 
-      let startX = 0;
-      let currentX = 0;
-      let isDragging = false;
+      const rotation = currentX * 0.05;
+      card.style.transform = `translateX(${currentX}px) rotate(${rotation}deg)`;
 
       const overlayDelete = card.querySelector('#overlayDelete');
       const overlayKeep = card.querySelector('#overlayKeep');
 
-      const handleStart = (e) => {
-        startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
-        isDragging = true;
-        card.style.transition = 'none';
-      };
+      if (currentX < -50) {
+        overlayDelete.style.opacity = Math.min(Math.abs(currentX) / 100, 1);
+        overlayDelete.classList.add('bg-gradient-to-br', 'from-red-400/95', 'to-red-600/95');
+        overlayKeep.style.opacity = 0;
+      } else if (currentX > 50) {
+        overlayKeep.style.opacity = Math.min(currentX / 100, 1);
+        overlayKeep.classList.add('bg-gradient-to-br', 'from-emerald-400/95', 'to-emerald-600/95');
+        overlayDelete.style.opacity = 0;
+      } else {
+        overlayDelete.style.opacity = 0;
+        overlayKeep.style.opacity = 0;
+      }
+    }
 
-      const handleMove = (e) => {
-        if (!isDragging) return;
-        e.preventDefault();
-        
-        const x = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
-        currentX = x - startX;
-        
-        const rotation = currentX * 0.05;
-        card.style.transform = `translateX(${currentX}px) rotate(${rotation}deg)`;
-        
-        const threshold = 100;
-        const progress = Math.min(Math.abs(currentX) / threshold, 1);
-        
-        if (currentX < 0) {
-          overlayDelete.style.opacity = progress;
-          overlayKeep.style.opacity = 0;
-        } else {
-          overlayKeep.style.opacity = progress;
-          overlayDelete.style.opacity = 0;
-        }
-      };
+    function endDrag(card) {
+      if (!isDragging) return;
+      isDragging = false;
 
-      const handleEnd = () => {
-        if (!isDragging) return;
-        isDragging = false;
-        card.style.transition = 'transform 0.3s ease';
-        
-        const threshold = 100;
-        
-        if (currentX < -threshold) {
-          handleSwipe('delete');
-        } else if (currentX > threshold) {
-          handleSwipe('keep');
-        } else {
-          card.style.transform = 'translateX(0) rotate(0deg)';
-          overlayDelete.style.opacity = 0;
-          overlayKeep.style.opacity = 0;
-        }
-        
-        currentX = 0;
-      };
+      if (currentX < -150) {
+        animateCard(card, 'left');
+      } else if (currentX > 150) {
+        animateCard(card, 'right');
+      } else {
+        card.style.transform = 'translateX(0) rotate(0deg)';
+        const overlayDelete = card.querySelector('#overlayDelete');
+        const overlayKeep = card.querySelector('#overlayKeep');
+        overlayDelete.style.opacity = 0;
+        overlayKeep.style.opacity = 0;
+      }
+      currentX = 0;
+    }
 
-      card.addEventListener('mousedown', handleStart);
-      card.addEventListener('touchstart', handleStart, { passive: true });
-      
-      document.addEventListener('mousemove', handleMove);
-      document.addEventListener('touchmove', handleMove, { passive: false });
-      
-      document.addEventListener('mouseup', handleEnd);
-      document.addEventListener('touchend', handleEnd);
+    function animateCard(card, direction) {
+      if (direction === 'left') {
+        card.classList.add('animate-card-exit-left');
+        card.style.opacity = '0';
+      } else {
+        card.classList.add('animate-card-exit-right');
+        card.style.opacity = '0';
+      }
+
+      setTimeout(() => {
+        handleSwipe(direction === 'left' ? 'delete' : 'keep');
+      }, 300);
     }
 
     function handleSwipe(action) {
       if (files.length === 0) return;
-      
-      const card = cardStack.querySelector('.file-card');
-      const file = files.shift();
-      
-      historyStack.push({ file, action });
+
+      const deletedFile = files.shift();
+      historyStack.push(deletedFile);
       undoBtn.disabled = false;
-      
-      if (action === 'delete') {
-        card.classList.add('card-exit-left');
-showToast('파일 삭제됨');
-    } else {
-      card.classList.add('card-exit-right');
-      showToast('파일 보관됨');
-      }
-      
-      setTimeout(() => {
-        renderCard();
-      }, 400);
+
+      updateProgress();
+      renderCards();
+      showToast(action === 'delete' ? '파일 삭제됨' : '파일 보관됨');
     }
 
     function undo() {
       if (historyStack.length === 0) return;
-      
-      const last = historyStack.pop();
-      files.unshift(last.file);
-      
-      if (historyStack.length === 0) {
-        undoBtn.disabled = true;
-      }
-      
-      showToast(`${last.file.name} 복원됨`);
-      renderCard();
-    }
 
-    function showToast(message) {
-      toast.textContent = message;
-      toast.classList.add('show');
-      setTimeout(() => toast.classList.remove('show'), 2000);
+      const restoredFile = historyStack.pop();
+      files.unshift(restoredFile);
+
+      undoBtn.disabled = historyStack.length === 0;
+
+      updateProgress();
+      renderCards();
+      showToast('실행 취소됨');
     }
 
     function updateProgress() {
       const total = mockFiles.length;
-      const completed = total - files.length;
-      const percent = Math.round((completed / total) * 100);
-      
-      progressFill.style.width = `${percent}%`;
-      progressText.textContent = `${percent}%`;
+      const current = files.length;
+      const progress = Math.round(((total - current) / total) * 100);
+
+      progressFill.style.width = `${progress}%`;
+      progressText.textContent = `${progress}%`;
+    }
+
+    function showToast(message) {
+      toast.textContent = message;
+      toast.classList.add('opacity-100', 'translate-y-0');
+      toast.classList.remove('opacity-0', '-translate-y-5');
+
+      setTimeout(() => {
+        toast.classList.remove('opacity-100', 'translate-y-0');
+        toast.classList.add('opacity-0', '-translate-y-5');
+      }, 2000);
     }
 
     function resetFiles() {
       files = [...mockFiles];
       historyStack = [];
       undoBtn.disabled = true;
-      renderCard();
+      updateProgress();
+      renderCards();
+      showToast('초기화됨');
     }
 
     undoBtn.addEventListener('click', undo);
-    renderCard();
+
+    renderCards();
+    updateProgress();
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/scene_visualization.html b/scene_visualization.html
index 646e9c9..add485a 100644
--- a/scene_visualization.html
+++ b/scene_visualization.html
@@ -7,6 +7,62 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <!-- Heroicons SVG Sprite -->
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none; width: 0; height: 0;">
+    <symbol id="icon-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 12H5M12 19l-7-7 7-7"/>
+    </symbol>
+    <symbol id="icon-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M5 12h14M12 5l7 7-7 7"/>
+    </symbol>
+    <symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
+    </symbol>
+    <symbol id="icon-folder-solid" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h6l4 4h6a2 2 0 012 2v8a2 2 0 01-2 2z"/>
+    </symbol>
+    <symbol id="icon-folder-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
+    </symbol>
+    <symbol id="icon-document" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+      <polyline points="14 2 14 8 20 8"/>
+    </symbol>
+    <symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="20 6 9 17 4 12"/>
+    </symbol>
+    <symbol id="icon-x-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="18" y1="6" x2="6" y2="18"/>
+      <line x1="6" y1="6" x2="18" y2="18"/>
+    </symbol>
+    <symbol id="icon-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="9 18 15 12 9 6"/>
+    </symbol>
+    <symbol id="icon-chevron-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="15 18 9 12 15 6"/>
+    </symbol>
+    <symbol id="icon-chevron-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="18 15 12 9 6 15"/>
+    </symbol>
+    <symbol id="icon-chevron-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="6 9 12 15 18 9"/>
+    </symbol>
+    <symbol id="icon-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="12" y1="5" x2="12" y2="19"/>
+      <line x1="5" y1="12" x2="19" y2="12"/>
+    </symbol>
+    <symbol id="icon-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="5" y1="12" x2="19" y2="12"/>
+    </symbol>
+    <symbol id="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+      <circle cx="12" cy="12" r="3"/>
+    </symbol>
+    <symbol id="icon-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="16 18 22 12 16 6"/>
+      <polyline points="8 6 2 12 8 18"/>
+    </symbol>
+  </svg>
   <style>
     :root {
       /* Blue Light Puzzle Theme - Intelligent, Precise, Cool */
@@ -1476,7 +1532,7 @@
       <div class="header-right">
         <button class="back-btn" onclick="window.location.href='index.html'" aria-label="Go back">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M19 12H5M12 19l-7-7 7-7"/>
+            <use href="#icon-arrow-left"></use>
           </svg>
         </button>
       </div>
@@ -1486,20 +1542,21 @@
     <div class="comparison-banner">
       <div class="comparison-item current">
         <div class="comparison-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
+          <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <use href="#icon-folder"></use>
           </svg>
         </div>
         <span>현재</span>
       </div>
-      <span class="comparison-arrow">→</span>
+      <span class="comparison-arrow">
+        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <use href="#icon-arrow-right"></use>
+        </svg>
+      </span>
       <div class="comparison-item proposed">
         <div class="comparison-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M9.5 2A2.5 2.5 0 0112 4.5V6H9.5A2.5 2.5 0 019.5 2zM12 4.5V6H6.5A2.5 2.5 0 014.5 6V4.5A2.5 2.5 0 016.5 2H12z"/>
-            <path d="M14.5 2A2.5 2.5 0 0112 4.5V6H14.5A2.5 2.5 0 0114.5 2zM12 4.5V6H17.5A2.5 2.5 0 0120 6V4.5A2.5 2.5 0 0117.5 2H12z"/>
-            <path d="M4.5 22A2.5 2.5 0 012 19.5V18H4.5A2.5 2.5 0 014.5 22zM2 18V19.5A2.5 2.5 0 014.5 22H6A2.5 2.5 0 012 19.5V18z"/>
-            <path d="M4.5 22A2.5 2.5 0 012 19.5V18H4.5A2.5 2.5 0 014.5 22zM2 18V19.5A2.5 2.5 0 014.5 22H6A2.5 2.5 0 012 19.5V18z"/>
+          <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <use href="#icon-folder"></use>
           </svg>
         </div>
         <span>AI 제안</span>
@@ -1512,7 +1569,9 @@
       <div class="comparison-panel">
         <div class="comparison-panel-header before">
           <div class="comparison-panel-icon before">
-            <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <use href="#icon-folder"></use>
+            </svg>
           </div>
           <div>
             <div class="comparison-panel-title">정리 전</div>
@@ -1522,7 +1581,7 @@
         <div class="before-tree">
           <div class="messy-folder">
             <div class="messy-folder-name">
-              <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
               다운로드
             </div>
             <div class="messy-files">
@@ -1535,7 +1594,7 @@
           </div>
           <div class="messy-folder">
             <div class="messy-folder-name">
-              <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
               바탕화면
             </div>
             <div class="messy-files">
@@ -1547,7 +1606,7 @@
           </div>
           <div class="messy-folder">
             <div class="messy-folder-name">
-              <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
               문서
             </div>
             <div class="messy-files">
@@ -1561,7 +1620,7 @@
         <div class="comparison-stats">
           <div class="comparison-stat">
             <div class="comparison-stat-icon removed">
-              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-x-mark"></use></svg>
             </div>
             <div>
               <div class="comparison-stat-value">87</div>
@@ -1570,7 +1629,7 @@
           </div>
           <div class="comparison-stat">
             <div class="comparison-stat-icon removed">
-              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
             </div>
             <div>
               <div class="comparison-stat-value">12</div>
@@ -1584,7 +1643,7 @@
       <div class="comparison-panel">
         <div class="comparison-panel-header after">
           <div class="comparison-panel-icon after">
-            <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/><polyline points="20 6 9 17 4 12"/></svg>
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use><use href="#icon-check" class="absolute inset-0"></use></svg>
           </div>
           <div>
             <div class="comparison-panel-title">정리 후</div>
@@ -1594,63 +1653,63 @@
         <div class="after-tree">
           <div class="clean-folder">
             <div class="clean-folder-header">
-              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><use href="#icon-plus"></use></svg>
               <span class="clean-folder-name">작업 프로젝트</span>
               <span class="clean-folder-count">24개 파일</span>
             </div>
             <div class="clean-subfolders">
               <div class="clean-subfolder">
-                <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 2024 보고서
                 <span class="diff-indicator added">
-                  <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-plus"></use></svg>
                   +8
                 </span>
               </div>
               <div class="clean-subfolder">
-                <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 고객 파일
               </div>
             </div>
           </div>
           <div class="clean-folder">
             <div class="clean-folder-header">
-              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2"><use href="#icon-folder"></use></svg>
               <span class="clean-folder-name">개인 파일</span>
               <span class="clean-folder-count">31개 파일</span>
             </div>
             <div class="clean-subfolders">
               <div class="clean-subfolder">
-                <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 사진 아카이브
                 <span class="diff-indicator added">
-                  <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-plus"></use></svg>
                   +15
                 </span>
               </div>
               <div class="clean-subfolder">
-                <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 문서
               </div>
             </div>
           </div>
           <div class="clean-folder">
             <div class="clean-folder-header">
-              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--text-muted)" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2"><use href="#icon-folder"></use></svg>
               <span class="clean-folder-name">유틸리티</span>
               <span class="clean-folder-count">18개 파일</span>
             </div>
             <div class="clean-subfolders">
               <div class="clean-subfolder">
-                <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 임시 파일
                 <span class="diff-indicator removed">
-                  <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
+                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-check"></use></svg>
                   정리됨
                 </span>
               </div>
               <div class="clean-subfolder">
-                <svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 아카이브
               </div>
             </div>
@@ -1659,7 +1718,7 @@
         <div class="comparison-stats">
           <div class="comparison-stat">
             <div class="comparison-stat-icon improved">
-              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-check"></use></svg>
             </div>
             <div>
               <div class="comparison-stat-value">73</div>
@@ -1668,7 +1727,7 @@
           </div>
           <div class="comparison-stat">
             <div class="comparison-stat-icon optimized">
-              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
             </div>
             <div>
               <div class="comparison-stat-value">6</div>
@@ -1692,20 +1751,14 @@
             <label class="checkbox-wrapper">
               <input type="checkbox" class="checkbox-input" data-type="folder" data-folder="work-projects" checked>
               <span class="checkbox-visual">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                  <polyline points="20 6 9 17 4 12"/>
-                </svg>
+                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
               </span>
             </label>
-            <svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
-            </svg>
+            <svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor"><use href="#icon-folder-solid"></use></svg>
             <span class="folder-name">작업 프로젝트</span>
             <div class="folder-meta">
               <span class="file-count">12개 파일</span>
-              <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="6 9 12 15 18 9"/>
-              </svg>
+              <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-chevron-down"></use></svg>
             </div>
           </div>
           <div class="tree-children">
@@ -1714,42 +1767,30 @@
                 <label class="checkbox-wrapper">
                   <input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="work-projects" data-subfolder="2024-reports" checked>
                   <span class="checkbox-visual">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                      <polyline points="20 6 9 17 4 12"/>
-                    </svg>
+                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
                   </span>
                 </label>
-                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
-                </svg>
+                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 <span class="child-folder-name">2024 보고서</span>
               </div>
               <div class="child-item" data-preview="work-projects/client-files">
                 <label class="checkbox-wrapper">
                   <input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="work-projects" data-subfolder="client-files" checked>
                   <span class="checkbox-visual">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                      <polyline points="20 6 9 17 4 12"/>
-                    </svg>
+                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
                   </span>
                 </label>
-                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
-                </svg>
+                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 <span class="child-folder-name">고객 파일</span>
               </div>
               <div class="child-item" data-preview="work-projects/archive">
                 <label class="checkbox-wrapper">
                   <input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="work-projects" data-subfolder="archive">
                   <span class="checkbox-visual">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                      <polyline points="20 6 9 17 4 12"/>
-                    </svg>
+                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
                   </span>
                 </label>
-                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
-                </svg>
+                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 <span class="child-folder-name">아카이브</span>
               </div>
             </div>
@@ -1762,20 +1803,14 @@
             <label class="checkbox-wrapper">
               <input type="checkbox" class="checkbox-input" data-type="folder" data-folder="personal">
               <span class="checkbox-visual">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                  <polyline points="20 6 9 17 4 12"/>
-                </svg>
+                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
               </span>
             </label>
-            <svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
-            </svg>
+            <svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor"><use href="#icon-folder-solid"></use></svg>
             <span class="folder-name">개인</span>
             <div class="folder-meta">
               <span class="file-count">24개 파일</span>
-              <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="6 9 12 15 18 9"/>
-              </svg>
+              <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-chevron-down"></use></svg>
             </div>
           </div>
           <div class="tree-children">
@@ -1784,28 +1819,20 @@
                 <label class="checkbox-wrapper">
                   <input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="personal" data-subfolder="photos">
                   <span class="checkbox-visual">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                      <polyline points="20 6 9 17 4 12"/>
-                    </svg>
+                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
                   </span>
                 </label>
-                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
-                </svg>
+                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 <span class="child-folder-name">사진</span>
               </div>
               <div class="child-item" data-preview="personal/downloads-archive">
                 <label class="checkbox-wrapper">
                   <input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="personal" data-subfolder="downloads-archive">
                   <span class="checkbox-visual">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                      <polyline points="20 6 9 17 4 12"/>
-                    </svg>
+                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
                   </span>
                 </label>
-                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
-                </svg>
+                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 <span class="child-folder-name">다운로드 아카이브</span>
               </div>
             </div>
@@ -1818,20 +1845,14 @@
             <label class="checkbox-wrapper">
               <input type="checkbox" class="checkbox-input" data-type="folder" data-folder="utilities">
               <span class="checkbox-visual">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                  <polyline points="20 6 9 17 4 12"/>
-                </svg>
+                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
               </span>
             </label>
-            <svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z"/>
-            </svg>
+            <svg class="folder-icon" viewBox="0 0 24 24" fill="currentColor"><use href="#icon-folder-solid"></use></svg>
             <span class="folder-name">유틸리티</span>
             <div class="folder-meta">
               <span class="file-count">8개 파일</span>
-              <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="6 9 12 15 18 9"/>
-              </svg>
+              <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-chevron-down"></use></svg>
             </div>
           </div>
           <div class="tree-children">
@@ -1840,14 +1861,10 @@
                 <label class="checkbox-wrapper">
                   <input type="checkbox" class="checkbox-input" data-type="subfolder" data-folder="utilities" data-subfolder="temp-files">
                   <span class="checkbox-visual">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
-                      <polyline points="20 6 9 17 4 12"/>
-                    </svg>
+                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><use href="#icon-check"></use></svg>
                   </span>
                 </label>
-                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
-                </svg>
+                <svg class="child-folder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-folder"></use></svg>
                 <span class="child-folder-name">임시 파일</span>
               </div>
             </div>
@@ -1863,20 +1880,13 @@
       </div>
       <div class="preview-container">
         <div class="preview-header">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-            <circle cx="12" cy="12" r="3"/>
-          </svg>
+          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-eye"></use></svg>
           <span class="preview-title">폴더 내용</span>
           <span class="preview-path" id="previewPath">폴더 선택</span>
         </div>
         <div class="preview-content" id="previewContent">
           <div class="preview-empty">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-              <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
-              <line x1="12" y1="11" x2="12" y2="17"/>
-              <line x1="9" y1="14" x2="15" y2="14"/>
-            </svg>
+            <svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><use href="#icon-folder"></use></svg>
             <p>폴더를 클릭하여 내용 미리보기</p>
           </div>
         </div>
@@ -1897,9 +1907,7 @@
         </div>
       </div>
       <button class="apply-btn" id="applyBtn" disabled>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <polyline points="20 6 9 17 4 12"/>
-        </svg>
+        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><use href="#icon-check"></use></svg>
         <span>선택 항목 적용</span>
         <span class="count-badge" id="applyCount">0</span>
       </button>
@@ -1907,12 +1915,10 @@
   </div>
 
   
-  <div class="success-overlay" id="successOverlay">
+      <div class="success-overlay" id="successOverlay">
     <div class="success-content">
       <div class="success-icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-          <polyline points="20 6 9 17 4 12"/>
-        </svg>
+        <svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><use href="#icon-check"></use></svg>
       </div>
       <h2 class="success-title">적용 완료!</h2>
       <p class="success-subtitle" id="successSubtitle">3개의 폴더가 정리되었습니다</p>
@@ -2042,11 +2048,7 @@
       if (!files || files.length === 0) {
         previewContent.innerHTML = `
           <div class="preview-empty">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-              <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
-              <line x1="12" y1="11" x2="12" y2="17"/>
-              <line x1="9" y1="14" x2="15" y2="14"/>
-            </svg>
+            <svg class="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><use href="#icon-folder"></use></svg>
             <p>이 폴더는 비어 있습니다</p>
           </div>
         `;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..7e1106c
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,104 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./scene_*.html"],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#3b82f6',
+          light: '#60a5fa',
+          dark: '#1d4ed8',
+        },
+        secondary: {
+          DEFAULT: '#06b6d4',
+          light: '#22d3ee',
+        },
+        accent: {
+          DEFAULT: '#0ea5e9',
+          warn: '#38bdf8',
+          danger: '#f472b6',
+        },
+        surface: {
+          primary: '#f8fafc',
+          secondary: '#e2e8f0',
+          card: '#ffffff',
+          overlay: 'rgba(14, 165, 233, 0.08)',
+        },
+        dark: {
+          primary: '#0a0e1a',
+          secondary: '#111827',
+          card: '#1e293b',
+          overlay: 'rgba(14, 165, 233, 0.12)',
+        },
+        text: {
+          primary: '#0f172a',
+          secondary: '#475569',
+          muted: '#94a3b8',
+        },
+      },
+      fontFamily: {
+        sans: ['Noto Sans KR', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+        display: ['Outfit', 'sans-serif'],
+      },
+      spacing: {
+        '1': '4px',
+        '2': '8px',
+        '3': '12px',
+        '4': '16px',
+        '5': '20px',
+        '6': '24px',
+        '8': '32px',
+        '10': '40px',
+        '12': '48px',
+        '16': '64px',
+      },
+      borderRadius: {
+        'sm': '8px',
+        'md': '12px',
+        'lg': '20px',
+        'xl': '28px',
+      },
+      boxShadow: {
+        'sm': '0 2px 8px rgba(14, 165, 233, 0.06)',
+        'md': '0 4px 20px rgba(14, 165, 233, 0.08)',
+        'lg': '0 8px 40px rgba(14, 165, 233, 0.12)',
+        'glow': '0 0 30px rgba(14, 165, 233, 0.25)',
+        'blue': '0 4px 20px rgba(59, 130, 246, 0.3)',
+      },
+      transitionTimingFunction: {
+        'bounce': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+      },
+      keyframes: {
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+        fadeSlideUp: {
+          from: { opacity: '0', transform: 'translateY(20px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideIn: {
+          from: { opacity: '0', transform: 'translateY(30px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        bounceIn: {
+          '0%': { transform: 'scale(0)' },
+          '50%': { transform: 'scale(1.1)' },
+          '100%': { transform: 'scale(1)' },
+        },
+        pulse: {
+          '0%, 100%': { opacity: '0.5', transform: 'scale(1)' },
+          '50%': { opacity: '1', transform: 'scale(1.1)' },
+        },
+      },
+      animation: {
+        'float': 'float 3s ease-in-out infinite',
+        'fade-slide-up': 'fadeSlideUp 0.5s ease forwards',
+        'slide-in': 'slideIn 0.5s ease forwards',
+        'bounce-in': 'bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
+        'pulse-slow': 'pulse 2s ease-in-out infinite',
+      },
+    },
+  },
+  plugins: [],
+}
\ No newline at end of file